404.html 必须严格位于根目录且小写，服务器需返回真实 HTTP 404 状态码，HTML 中 h1 标签须含“404”文字、语义完整，并避免 SPA fallback 吞掉错误响应。
404.html 文件名和位置必须严格匹配平台要求
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些静态托管服务，只识别根目录下名为 404.html 的文件——多一个空格、大写一个字母（如 404.HTML）、加个路径前缀（如 pages/404.html）或换后缀（如 404.htm），都会导致它被完全忽略，返回平台默认的错误页。
常见错误现象：本地预览正常，部署后仍看到 GitHub 的 “404 There isn’t a GitHub Pages site here.”
- 用
git ls-files | grep 404确认 Git 仓库里提交的确实是小写404.html（Windows 记事本可能偷偷加 BOM） - Jekyll 用户必须在文件开头加 YAML front matter：
---\npermalink: /404.html\npublished: false\n---，否则会被当作普通页面渲染 - 检查构建产物目录（如
_site/或dist/），确认404.html真实存在于最终输出的根目录中
服务器必须返回真实 HTTP 404 状态码
光有 404.html 文件毫无作用。关键在于：当用户访问一个不存在路径时，服务器要返回 HTTP/1.1 404 Not Found 响应头，且响应体是你写的 HTML；不能是 302 重定向过去，更不能悄悄变成 200 OK。
常见错误现象：浏览器控制台显示 Failed to load resource: the server responded with a status of 200 OK，但 URL 是 /xxx/xxx；Google Search Console 把你的 404.html 当普通页面收录。
立即学习“前端免费学习笔记（深入）”；
- Apache：在
.htaccess中写ErrorDocument 404 /404.html，路径必须以/开头 - Nginx：在
server块中加error_page 404 /404.html;，并确保location = /404.html存在且未被其他rewrite规则覆盖 - SPA 应用（React/Vue）：
location / { try_files $uri $uri/ /index.html; }这类 fallback 会吞掉所有 404，必须显式排除：try_files $uri $uri/ /index.html =404;或加条件判断避开/404.html
<h1></h1> 必须包含可见“404”文字且语义完整
搜索引擎和屏幕阅读器靠结构识别意图。<h1>404 Not Found</h1> 不只是样式需要，而是 SEO 和可访问性的硬性要求。用图片、SVG 文本或 JS 动态插入“404”字样的方式，都不可靠。
常见错误现象：页面看着像 404，但 Google 把它当普通页面索引；视障用户听到的是“网页标题”，而非“404 页面未找到”。
- 标题标签必须是
<h1></h1>，且内容明确含“404”三字符（如<h1>404</h1>或<h1>404 Page Not Found</h1>） - 整个错误内容应包裹在
<main></main>内，避免用<div> 堆砌<li>页面 <code><title></title>也应含“404”，例如<title>404 - 页面未找到</title> - 动画时长与跳转延时必须严格一致，例如 CSS 动画设
0.6s，JS 就用setTimeout(() => { location.replace('/'); }, 600) - 跳转必须用
location.replace('/')而非location.href = '/'，防止用户点「返回」又回到错误页 - 跳转逻辑应放在
DOMContentLoaded事件内，或直接写在
跳转逻辑需兼顾动画同步与 SEO 合规
自动跳转首页容易被 Google 判为“软 404”。若要做“趣味跳入”效果，必须满足两个底线：用户能看清这是 404，且有手动操作入口。
常见错误现象：加了动画后用户还没看清就跳走了；JS 跳转代码被 Service Worker 缓存拦截失效。
