404页面必须由服务器返回真实404状态码，file://协议下无效；需用npx serve等HTTP服务验证，配合根相对路径、内联CSS、语义化HTML及noindex元标签确保可访问与SEO合规。
404 页面不是“写个提示就行”，核心在于服务器必须返回真实的 404 Not Found 状态码，否则再花哨的 HTML 也白搭——搜索引擎当普通页收录，用户刷新后仍卡在死链里。
为什么本地双击 404.html 根本不算生效
浏览器用 file:// 协议打开时，压根没有 HTTP 状态码概念，响应永远是 200。你看到的只是个普通 HTML 文件，和错误处理毫无关系。
- 验证必须走真实 HTTP：用
npx serve -s启服务，访问http://localhost:5000/xxx-abc，再看 DevTools → Network 里的 Status 是否为404 Not Found - 命令行更准：
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found - GitHub Pages、Vercel 等平台只认根目录下严格小写的
404.html；写成404.htm、pages/404.html或带 BOM 的文件，服务器直接忽略
静态托管与 Nginx/Apache 的配置差异
不同环境接管 404 请求的方式完全不同，写错一行配置就退回平台默认灰页。
- GitHub Pages：只要
404.html在仓库根目录，且没被 Jekyll 渲染（Jekyll 用户需加---\npermalink: /404.html\npublished: false\n---） - Nginx：必须在
server块中写error_page 404 /404.html;，并确保location = /404.html存在且未被try_files $uri $uri/ /index.html;拦截 - Apache：
.htaccess中写ErrorDocument 404 /404.html，路径必须以/开头，不能是./404.html或带协议的完整 URL - SPA 应用（React/Vue）：通用 fallback 规则会吞掉所有 404，必须显式排除：
location ~ ^/404\.html$ { try_files $uri =404; }
HTML 结构里哪些标签和属性不能省
搜索引擎和屏幕阅读器靠语义识别这是错误页，不是靠视觉样式。删掉任意一项，都可能让页面被当成普通内容索引或对视障用户不可读。
立即学习“前端免费学习笔记（深入）”；
-
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title> -
<h1></h1>必须直写文字 “404 Not Found” 或 “页面未找到(404)”，禁用图片、SVG 文本、JS 插入 - 核心内容必须包裹在
<main></main>中，或加role="main"，让辅助技术跳过导航直达错误信息 - 返回首页用
<a href="/">回到首页</a>，不用<button onclick="..."></button>—— JS 被禁用时按钮直接失效 - 加
<meta name="robots" content="noindex">，防止爬虫误收录
CSS 内联限制与字体/对比度硬要求
外部 CSS 加载失败 = 白屏。404 页面可能发生在任何子路径（如 /blog/post/xxx），此时相对路径引用的资源大概率 404，连带拖垮自身渲染。
- CSS 必须全部塞进
<style></style>标签，控制在 1KB 以内（删空格、注释、@import） - 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif，不依赖 Web Font - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证；深灰背景配浅灰文字（如
#333+#999）不合格 - 禁用背景图、
@font-face、@keyframes复杂动画——它们触发额外请求，弱网下极易失败 - 所有路径用根相对路径：
/css/style.css、/img/icon.svg，不用./img/或../assets/
最常被忽略的点：状态码验证必须在真实 HTTP 环境下做，而不是看页面长什么样；所有结构和样式都要假设 JS 完全不可用——因为用户打开 404 页面平均停留不到 8 秒，没时间等脚本加载。
