必须真实返回404状态码，否则搜索引擎误收录、用户刷新无反馈、无障碍设备无法识别；需用curl -I或Network面板验证响应头为“HTTP/1.1 404 Not Found”，404.html须小写、放根目录、title和h1含“404”，CSS内联、资源用绝对路径。
404页面不是“写个HTML放上去就生效”，它必须由服务器真实返回 404 Not Found 状态码，否则搜索引擎当普通页收录、用户刷新无反馈、无障碍设备读不出错误语义——所有后续美化都白搭。
怎么确认你的 404.html 真被当成 404 页面？
本地双击打开 404.html 永远是 200 OK，毫无验证价值。必须走 HTTP 协议验证：
- 用
npx serve -s启服务（注意：-s 会 fallback 到 index.html，测试 404 时要删掉它，改用npx serve） - 访问一个肯定不存在的路径，比如
http://localhost:5000/xyz123 - 打开 DevTools → Network → 找该请求 → 看
Status是否为404 Not Found - 更可靠的方式是命令行：
curl -I http://localhost:5000/xyz123，第一行必须是HTTP/1.1 404 Not Found
404.html 文件名和位置有哪些硬性限制？
静态托管平台只认一个名字、一个位置，错一个字符都不生效：
- 文件名必须严格是小写
404.html（不是404.htm、error404.html、404.HTML） - 必须放在项目根目录（和
index.html同级），不能在pages/或errors/子目录下 - Git 提交前检查隐藏字符：
git ls-files | grep 404；Windows 记事本保存可能加 BOM，建议用 VS Code 保存为 UTF-8 无 BOM - Jekyll 用户需在
404.html开头加 front matter：---\npermalink: /404.html\npublished: false\n---
HTML 结构里哪些标签和内容不能省？
这不是普通网页，而是错误响应体，语义和可访问性是硬指标：
立即学习“前端免费学习笔记（深入）”；
-
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title>，否则搜索结果点进来像进了首页 -
<h1></h1>必须直写 “404 Not Found” 或 “页面未找到(404)”，不能是图片、SVG 文本或 JS 渲染内容 - 主内容必须用
<main></main>包裹，或加role="main"，让屏幕阅读器跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录 - 提供至少一个有效跳转：
<a href="/">← 返回首页</a>，别用<button onclick="..."></button>
CSS 和资源加载为什么必须内联？
404 页面常出现在资源路径错误场景下（比如 /css/main.css 本身 404），若再依赖外部资源，极易白屏或只剩文字：
- CSS 必须写在
<style></style>标签里，控制在 1KB 以内；禁用<link rel="stylesheet"> - 字体优先用系统栈：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 图片用绝对根路径（如
/img/404-icon.svg）或 data URL，避免相对路径在深层 URL 下失效 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
- 禁用第三方脚本：
<script src="https://cdn.example.com/analytics.js"></script>加载失败会拖慢首屏可交互时间
最容易被忽略的一点：SPA 应用（React/Vue）的路由 fallback 规则常把所有 404 吞成 200 的 index.html，必须显式排除 /404.html 路径，否则你写的每行 HTML 都不会被服务器当作错误页返回。
