404页面真正生效的关键是服务器返回HTTP 404状态码而非200：需用curl或DevTools验证响应头，确保文件名为小写404.html置于根目录，HTML含语义化标签且CSS/JS零依赖。
404.html 文件本身写起来确实简单，但能真正生效的 404 页面，从来不是“写完就跑”。多数人卡在第 2 步：服务器根本没返回 404 Not Found 状态码，而是悄悄返回了 200 OK —— 这时你页面再漂亮，对 SEO、用户、爬虫全是负向信号。
怎么验证你的 404 页面真被服务器认领了
别信“看起来像”，只看响应头：
- 用
curl -I https://yoursite.com/this-path-does-not-exist，第一行必须是HTTP/1.1 404 Not Found - 在 Chrome DevTools → Network → 刷新一个不存在路径 → 找该请求 → 看 Status 列是不是
404，且 Response Headers 里没有Location或302跳转 - 本地双击打开
404.html？无效。file://协议压根没有 HTTP 状态码，纯属自我安慰
GitHub Pages / Vercel / Netlify 用户最常踩的命名坑
这些平台只认一个名字、一个位置：
- 文件名必须是严格小写的
404.html（不是404.htm、error404.html、404.HTML） - 必须放在 Git 仓库或项目根目录（不是
pages/404.html、src/404.html） - Git 提交前检查：运行
git ls-files | grep 404，确认输出就是404.html（Windows 记事本可能偷偷加 BOM，改用 VS Code 保存为 UTF-8 无 BOM） - Jekyll 用户额外加 front matter：
---\npermalink: /404.html\npublished: false\n---，否则会被当成普通文章渲染
HTML 结构里三个不能省的硬性标签
不是为了“好看”，是让搜索引擎和屏幕阅读器立刻识别这是错误页：
立即学习“前端免费学习笔记（深入）”；
-
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title>；否则 Google 当普通页收录 -
<h1></h1>必须直写文字，如<h1>404 Not Found</h1>；禁用图片、SVG、JS 插入——辅助技术读不到 - 核心内容必须包裹在
<main role="main"></main>内；让视障用户跳过导航，直接听到错误说明
CSS 和跳转逻辑为什么必须“零依赖”
404 是异常路径，网络、缓存、JS 执行环境都不可靠：
- CSS 必须内联进
<style></style>，删空格/注释后控制在 1KB 内；外链<link rel="stylesheet">加载失败 = 白屏 - 所有跳转必须用纯
<a href="/"></a>；<button onclick="location.href='/'"></button>在 JS 禁用或加载失败时完全失灵 - 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)；它们会让状态码变成200，Google 视为软 404 - 搜索框用标准
<form method="GET" action="/search"></form>，<input name="q">；不写 JS 就能提交，且 URL 可书签、可分享
真实生效的 404.html 不是“前端作品”，它是服务器配置、文件路径、HTML 语义、HTTP 规范四者咬合的结果。最容易被忽略的，其实是那个看不见的 Status: 404 响应头——它不在代码里，而在你没配对的 error_page 或 ErrorDocument 指令中。
