404.html必须严格命名为小写并置于网站根目录，且服务器需返回真实HTTP/1.1 404 Not Found状态码；HTML须含语义化404、内联CSS、无外部依赖，禁用JS和相对路径。
404.html 必须放根目录且严格小写
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认一个路径：/404.html，和 index.html 同级。写成 404.htm、pages/404.html、404.HTML 或带空格的 404 .html 全部失效。
常见踩坑点：
- Windows 记事本保存时自动加 BOM 头，导致页面白屏或乱码；用 VS Code 或 Sublime 保存为 UTF-8 无 BOM 格式
- Git 提交前执行
git ls-files | grep 404，确认文件名是纯小写且已跟踪 - Jekyll 用户需在
404.html开头加---\npermalink: /404.html\npublished: false\n---，否则会被当成普通文章渲染
服务器必须返回真实 404 状态码，不是“显示个提示”就行
本地双击打开 404.html 是 200 OK，毫无意义——浏览器没走 HTTP 协议，根本没状态码这回事。真正生效的前提是：访问一个不存在的路径（如 /xxx）时，响应头第一行必须是 HTTP/1.1 404 Not Found。
验证方式（任选其一）：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
curl -I https://yoursite.com/nonexistent，看首行输出 - Chrome DevTools → Network → 刷新一个错路径 → 点开请求 → 查 Response Headers 中的
Status - 本地测试用
npx serve -s不行（它 fallback 到index.html），改用python3 -m http.server 8000并确保目录下有404.html
HTML 结构不能省略语义化标签和关键文字
<h1>404 Not Found</h1> 不只是样式需要，而是搜索引擎和屏幕阅读器识别错误页的唯一可靠依据。用图片、SVG、JS 动态插入“404”字样的方式，都会被忽略。
必须包含的要素：
-
<title></title>中含 “404”，例如<title>404 - 页面未找到</title> -
<h1></h1>直写 “404 Not Found” 或中文等效表述，不可包裹在<div> 里<li>主内容用 <code><main></main>包裹，或加role="main" - 返回链接用
<a href="/">← 返回首页</a>，不用<button></button>或 JS 跳转 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录 - 所有样式写进
<style></style>标签，控制在 1KB 以内 - 避免
@import、背景图、Web Font；字体栈用-apple-system, sans-serif兜底 - 图片用根相对路径（如
/img/404-icon.svg）或 data URL，禁用./或../ - 不写
<script></script>，包括灯光开关、自动跳转、统计脚本——用户可能禁用 JS 或网络中断 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
CSS 必须内联，禁用外部资源和 JavaScript
外部 CSS、CDN 字体、JS 脚本在 404 场景下极大概率加载失败——因为服务器连静态资源都找不到，页面直接变白屏或只剩裸文本。
安全做法：
最简可行版本就是：一个 404.html 文件，<h1>404</h1> + 内联 <style></style> + <a href="/"></a>。其余都是锦上添花，但前提是状态码、路径、结构三者全对——少一个，用户看到的就不是 404 页面，而是服务器默认错误或空白。
