404.html 文件需满足服务器返回真实404状态码、根目录小写命名、语义化HTML结构、内联精简CSS及禁用外部资源等条件才生效。
光写一个 404.html 文件放进去，90% 的情况根本不会生效——服务器没返回真实 404 Not Found 状态码，搜索引擎当普通页面收录，用户也意识不到自己进了死链。
怎么确认你的 404 页面真返回了 404 状态码
本地双击打开 404.html 完全无效：file:// 协议压根没有 HTTP 状态码。必须走真实 HTTP 服务验证：
- 用
npx serve -s或python3 -m http.server 8000启服务，访问http://localhost:8000/xxx-abc123 - 打开 DevTools → Network → 找该请求 → 看 Response Headers 里
Status是否为404 Not Found - 命令行更准：
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found
文件名、位置、大小写必须严格匹配
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认一个名字：小写的 404.html，且必须放在项目根目录（和 index.html 同级）：
- 写成
404.htm、error404.html、pages/404.html或404.HTML都会失效 - Windows 记事本保存可能带 BOM，用
git ls-files | grep 404检查是否真提交了该文件 - Jekyll 用户需在
404.html开头加---\npermalink: /404.html\npublished: false\n---，否则会被渲染为普通页面
HTML 结构里哪些标签和内容不能省
404.html 不是普通网页，而是服务端注入的错误响应体，语义和可访问性必须硬保障：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<title></title>必须含 “404”，比如<title>404 - 页面未找到</title>，否则搜索结果点进来像进了首页 -
<h1></h1>必须直写 “404 Not Found” 或 “页面未找到(404)”，不能是图片、SVG 文本或 JS 渲染内容 - 主内容用
<main></main>包裹，或加role="main"，让屏幕阅读器跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
CSS 和资源加载必须内联且精简
外部资源极大概率加载失败：CDN 挂了、GitHub Pages 拦截了 <link>、Nginx 配置把所有路径 fallback 到 index.html——导致页面白屏或只剩文字：
- CSS 必须写在
<style></style>标签里，控制在 1KB 以内；禁用<link rel="stylesheet"> - 所有图片用绝对根路径（如
/img/404-icon.svg）或 data URL，避免相对路径在深层 URL 下失效 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
- 禁用
<script src="https://cdn.example.com/analytics.js"></script>这类第三方脚本，加载失败会拖慢首屏可交互时间
最容易被忽略的是：你写的 HTML 再漂亮，如果服务器配置没让 /nonexistent 路径真正返回 404 Not Found，那它就只是个普通 HTML 文件，不是 404 页面。
