必须返回真实404状态码：用npx serve或curl验证Status为404 Not Found；GitHub Pages需小写404.html在根目录；title和h1须含“404”；结构用包裹；CSS内联≤1KB；禁用JS跳转和第三方脚本。
必须返回真实 404 Not Found 状态码，否则页面再简洁也无效——浏览器地址栏显示“404”但 Network 面板里是 200 OK，就等于没做。
验证状态码是否真为 404
本地双击打开 404.html 文件走的是 file:// 协议，压根没有 HTTP 状态码。必须用真实 HTTP 服务验证：
- 用
npx serve -s启服务，访问http://localhost:5000/xyz123，看 DevTools → Network → Response Headers 中Status是否为404 Not Found - 命令行更可靠：
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found - GitHub Pages 必须严格命名为小写
404.html并放在仓库根目录；写成404.htm或pages/404.html都不生效
HTML 结构不能省的硬性标签
搜索引擎和屏幕阅读器靠结构识别错误意图，不是靠视觉样式：
-
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title>，否则会被当普通页收录 -
<h1></h1>必须直写文字 “404 Not Found” 或 “页面未找到（404）”，禁用图片、SVG 文本或 JS 插入 - 核心内容用
<main role="main"></main>包裹，让辅助技术跳过导航直读错误信息 - 返回首页用纯
<a href="/">← 返回首页</a>，不是<button onclick="location.href='/'"></button>—— JS 关闭时仍要可用
CSS 必须内联且 ≤1KB
外链 CSS 加载失败 = 白屏。移动端弱网下资源超时概率高，所有样式必须塞进 <style></style> 标签：
立即学习“前端免费学习笔记（深入）”；
- 字体用系统栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
- 居中推荐
display: flex; height: 100vh; align-items: center; justify-content: center;，比position: absolute更稳 - 删空格、注释、
@import，压缩后控制在 1KB 内（可用gzip -c 404.html | wc -c检查）
别碰自动跳转和 JS 依赖
用户在 404 页面平均停留不到 8 秒，任何 JS 失效都会导致降级失败：
- 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)—— 它们会让状态码变成200，破坏 SEO - 想加“回到上一页”？先判断
document.referrer是否同域且非空，否则按钮href="#"并置灰 - 搜索框用标准
<form method="GET" action="/search"></form>，<input name="q">即可，无需 JS 拦截 - 第三方脚本一律禁用，包括统计、CDN 字体、图标库——加载失败会拖慢首屏可交互时间
最容易被忽略的点：SPA 应用（如 Vue/React）的 try_files $uri $uri/ /index.html; 规则会吞掉所有 404，返回 200 OK 的首页。必须显式排除 /404.html 路径，否则你写的 HTML 根本不会被服务器返回。
