404.html必须置于根目录且严格小写，平台仅识别此文件名；需UTF-8无BOM编码、含YAML front matter（Jekyll）、返回真实404状态码；标题与主标题须含“404”纯文本，CSS内联、禁用JS跳转，确保可访问性与SEO合规。
404.html 文件必须放根目录且严格小写
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认 404.html 这个确切文件名，且必须在项目根目录下。写成 404.htm、error-404.html、pages/404.html 或 404.HTML 都不会被识别。
常见踩坑点：
- Windows 记事本保存时可能加 BOM，导致服务器拒绝解析；建议用 VS Code 或 Sublime 保存为 UTF-8 无 BOM
- Git 提交前用
git ls-files | grep 404确认文件名是纯小写、无空格、无隐藏字符 - Jekyll 用户需在
404.html开头加 YAML front matter：---\npermalink: /404.html\npublished: false\n---，否则会被当成普通页面渲染
服务器必须返回真实 404 状态码，不能是 200 或 302
本地双击打开 404.html 是 200 OK，毫无意义——file:// 协议根本没有 HTTP 状态码。验证必须走真实 HTTP 服务。
实操验证方式：
立即学习“前端免费学习笔记（深入）”；
- 本地启动：
npx serve -s或python3 -m http.server 8000，然后访问http://localhost:8000/xxx-abc123 - 看 DevTools → Network → 找该请求 → Response Headers 中
Status是否为404 Not Found - 命令行更可靠：
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found
SPA（如 React/Vue）特别容易翻车：Nginx 的 try_files $uri $uri/ /index.html; 会把所有 404 吞掉并返回 200。必须排除 /404.html 路径，例如加一行 location = /404.html { } 并确保它不被 rewrite 覆盖。
<h1></h1> 和 <title></title> 必须含 “404” 字样
搜索引擎和屏幕阅读器靠标签结构识别页面意图，不是靠你写了张带“404”的图或 JS 渲染的文字。
硬性要求：
-
<title></title>必须直写 “404”，例如<title>404 - 页面未找到</title>，否则搜索结果点进来像进了首页 -
<h1></h1>必须是纯文本 “404 Not Found” 或 “页面未找到(404)”，禁用 SVG 文本、图片替代、aria-label模拟 - 主内容必须包裹在
<main></main>内，或加role="main"，让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
CSS 必须内联，禁用外部资源和 JS 跳转
404 页面常出现在资源路径出错时（比如 /assets/main.css 本身 404），若再加载外部 CSS/JS，极大概率白屏或只剩文字。
关键约束：
- CSS 全部写进
<style></style>标签，控制在 1KB 以内；禁用<link rel="stylesheet"> - 图片用 data URL 或绝对根路径（如
/img/404-icon.svg），相对路径在深层 URL 下会失效 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
- “返回首页”用
<a href="/">← 返回首页</a>，不是<button onclick="location.href='/'"></button> - 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)—— 它们返回的是 200，属于软 404
真正难的不是写 HTML，而是让每个环节都守住边界：状态码由服务器决定，语义由标签承载，样式由内联保障，跳转由纯 HTML 实现。漏掉任意一环，用户看到的就只是“长得像 404”的普通页面。
