404页面必须由服务器真实返回404状态码，而非仅美化HTML；需通过HTTP服务（如npx serve）或curl验证状态码，文件名严格为根目录下小写404.html，含语义化结构、内联CSS、可访问文案及noindex声明。
404 页面不是“写个提示就行”，它必须让服务器真实返回 404 Not Found 状态码，否则搜索引擎当普通页面收录、用户刷新也看不到重试提示——所有美化和引导都建立在这个前提上。
如何验证你的 404.html 真被当作错误页返回
本地双击打开 404.html 永远是 200 OK，毫无意义。必须走 HTTP 协议验证：
- 用
npx serve -s启服务，访问http://localhost:5000/xxx-abc，打开 DevTools → Network → 找该请求 → 看 Response Headers 里Status是否为404 Not Found - 更可靠：命令行执行
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found - 常见失败现象：
Failed to load resource: the server responded with a status of 200 OK—— 这说明服务器把 404.html 当普通文件返回了，没触发错误处理逻辑
静态托管平台的命名与路径陷阱
GitHub Pages、Vercel、Netlify、Cloudflare Pages 只认一个名字、一个位置：
- 文件名必须是全小写
404.html，不能是404.htm、error404.html、404.HTML或带空格 - 必须放在仓库或项目根目录（跟
index.html同级），pages/404.html或src/404.html都无效 - Git 提交时检查：运行
git ls-files | grep 404，确认输出只有404.html；Windows 记事本可能加 BOM，导致平台不识别 - Jekyll 用户需在
404.html开头加 front matter：---\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” 文字，不能是图片、SVG 文本或 JS 插入；推荐<h1>404 Not Found</h1> - 主内容必须包裹在
<main></main>内，或加role="main"，让屏幕阅读器跳过导航直接读错误信息 - 提供明确跳转：至少一个
<a href="/">← 返回首页</a>，禁用 JS 时仍可用；别用<button onclick="location.href='/'"></button> - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
CSS 内联 + 资源路径避坑指南
404 页面可能发生在任意子路径下（比如 /blog/post/xxx），外部资源极易加载失败：
- CSS 必须写进
<style></style>标签，控制在 1KB 以内；禁用<link rel="stylesheet"> - 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif，不依赖 Web Font - 图片必须用根相对路径（如
/img/404-icon.svg）或 data URL；./icon.png在深层路径下会 404 - 避免
@import、背景图、第三方 CDN 脚本——它们会触发额外请求，增加白屏风险 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
最容易被忽略的是：状态码由服务器决定，前端无法伪造；而用户真正需要的不是“炫酷动画”，是在错链发生时，一眼看懂“这是 404”，并能立刻点击回到有效路径——所有设计都该服务于这个瞬间判断与操作。
