404.html必须严格命名为全小写、无空格、无BOM的根目录文件，且服务器须返回真实HTTP 404状态码；需含front matter（Jekyll）、内联CSS、语义化HTML、可访问结构及noindex声明。
404.html 文件名和位置必须严格匹配
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认 404.html 这个确切文件名，且必须是全小写、无空格、无隐藏字符（比如 BOM）。放在子目录（如 /pages/404.html）或改名成 error-404.html、404.htm 都不会被识别。
常见错误现象：你明明写了页面，访问 /nonexistent 却看到平台默认的灰色错误页，而不是你的设计——大概率是文件没放对位置或名字拼错了。
- 用
git ls-files | grep 404确认 Git 已提交该文件（Windows 记事本可能偷偷加 BOM） - Jekyll 用户必须在
404.html开头加 front matter：---\npermalink: /404.html\npublished: false\n---，否则会被当成普通文章渲染 - 确保它和
index.html同级，即网站根目录
服务器必须返回真实 404 状态码，不是 200 或 302
本地双击打开 404.html 是 200 OK，这完全无效。真正的 404 页面需要服务器在找不到资源时，返回 HTTP 状态码 404 Not Found，同时把你的 HTML 当作响应体发送出去。
验证方式只有两种：走真实 HTTP 服务 + 查 Network 面板，或用 curl。
立即学习“前端免费学习笔记（深入）”；
- 本地测试：运行
npx serve -s，访问http://localhost:5000/xxx-abc123，在 DevTools → Network 中看该请求的Status是否为404 - 线上验证：执行
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found - SPA 应用（React/Vue）要特别小心：
location / { try_files $uri $uri/ /index.html; }这类 fallback 规则会吞掉所有 404，必须排除/404.html路径
CSS 必须内联，JS 必须禁用
外部 CSS、JS、图片加载失败时，404 页面会直接白屏或只剩文字。CDN 挂了、Nginx 配置拦截了 /css/ 路径、甚至某些安全策略会拒绝未声明 integrity 的脚本——这些都可能导致降级失效。
解决方案非常明确：样式全部写进 <style></style> 标签，控制在 1KB 以内；不引入任何 <script></script>，所有跳转用纯 HTML 链接实现。
-
<link rel="stylesheet">和@import全部禁止 - 图片用根相对路径（如
/img/404-icon.svg）或 data URL，避免./icon.png在/blog/post/xxx下失效 - “返回首页”必须是
<a href="/">回到首页</a>，不是<button onclick="location.href='/'"></button> - 别加背景图、Web Font、Flex/Grid 复杂布局——IE11 和旧安卓 WebView 不一定支持
HTML 结构必须语义化且含“404”文字
搜索引擎和屏幕阅读器靠标签结构理解页面意图。<h1></h1> 里没有“404”字样，就等于告诉爬虫“这不是错误页”，结果就是被当普通页面收录；视障用户听到的可能是“网页标题”，而非“404 页面未找到”。
所有内容必须可降级、可访问、无需 JS 渲染。
-
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title> -
<h1></h1>必须直写 “404 Not Found” 或 “页面未找到(404)”，不能是 SVG 文本、图片或 JS 插入 - 主内容区用
<main></main>包裹，或加role="main"，让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录 - 链接文字写“回到首页”，别写 “Click here”——屏幕阅读器用户需要知道目标
最容易被忽略的是：状态码本身不可伪造，前端所有努力都建立在服务器正确返回 404 的前提下。文件放对了、代码写好了，但 Nginx 少了一行 error_page 404 /404.html，或者 Netlify 的 _redirects 没配 status = 404，整个页面就只是个好看的 200。
