404.html 必须严格置于根目录且小写命名，服务器需返回真实 404 状态码并禁止 fallback 覆盖，同时页面须内联样式、禁用跳转、明确标注“404”语义。
404.html 文件必须严格放在根目录且命名小写
GitHub Pages、Netlify、Vercel、Cloudflare Pages 这些静态托管平台，只识别 404.html 这个确切文件名，且必须位于项目仓库或构建输出的**根目录**（与 index.html 同级）。写成 404.htm、error-404.html、/pages/404.html 或 404.HTML 都会失效——服务器压根不接管。
常见错误现象：页面内容写了，也推送了，但访问不存在路径时仍显示平台默认灰页（比如 GitHub 的 “There isn’t a GitHub Pages site here.”）。
- 用
git ls-files | grep 404确认 Git 已提交该文件（Windows 记事本可能悄悄加 BOM） - Jekyll 用户需在
404.html开头加---\npermalink: /404.html\npublished: false\n---，否则会被当作普通文章渲染 - 本地双击打开
404.html永远不会触发真实 404 —— 必须起 HTTP 服务测试（如npx serve -s .）
Nginx / Apache 需显式配置 error_page 并确保返回真实状态码
光有 404.html 文件毫无作用。关键是要让服务器在资源不存在时，返回 HTTP/1.1 404 Not Found 状态码，同时响应体是你的 HTML —— 而不是跳转过去（302）、也不是静默返回 200。
常见错误：Nginx 配置了 error_page 404 /404.html，但没限制 /404.html 自身的访问权限，导致它被当作普通页面返回 200；或 Apache 的 .htaccess 写成 ErrorDocument 404 ./404.html（路径缺开头的 /）。
- Nginx：在
server块中加error_page 404 /404.html;，再加location = /404.html { internal; }，确保该路径不可直连 - Apache：
.htaccess中写ErrorDocument 404 /404.html（注意开头斜杠） - 务必用
curl -I https://yoursite.com/nonexistent-path或浏览器 Network 面板验证响应头含HTTP/1.1 404 Not Found
SPA 应用（React/Vue）必须排除 404.html 路径避免 fallback 覆盖
单页应用常用 try_files $uri $uri/ /index.html; 把所有未命中路径兜底到 index.html，这会导致真正的 404 请求也被吃掉，返回 200 + index.html —— 你的 404.html 完全没机会生效。
解决方案不是删掉 fallback，而是**在 fallback 规则里排除 /404.html**：
- Nginx：把
try_files $uri $uri/ /index.html;改成try_files $uri $uri/ @fallback;，再定义location @fallback { if ($request_uri != "/404.html") { rewrite ^(.*)$ /index.html break; } } - 或者更直接：在
location /块里加if ($request_uri = "/404.html") { break; }，确保该路径不进 fallback - Next.js / Nuxt 等框架通常内置
notFound: true支持，优先走框架层逻辑而非依赖静态文件
HTML 内容本身不能依赖外部资源或 JS 跳转
404 页面是异常路径下的最后防线，不能因为某个 CSS 或 JS 加载失败就白屏或失能。所有样式必须内联，所有交互逻辑要降级可用。
-
<style></style>写在里，字体用系统栈：font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 禁用
<meta http-equiv="refresh">和无交互的window.location.href = '/'—— 这会让状态码变成 200，破坏 SEO - 导航按钮用纯
@#@#@#@#@#@#@#@#@#@0，不要靠history.back()或fetch；若需“回到上一页”，用document.referrer判断同域后再渲染按钮 -
<title></title>和<h1></h1>必须含 “404” 字样，否则爬虫和屏幕阅读器无法识别这是错误页
404.html，却卡在 Nginx 的 internal 配置或 SPA 的 fallback 排除上，导致页面始终返回 200。测的时候别只看视觉，先跑一遍 curl -I。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
