404页面必须返回真实404状态码且含语义化HTML结构。需确保根目录下为小写404.html、服务器正确响应404、title和h1含“404”、内联CSS、禁用外部资源及脚本，并通过curl或DevTools验证状态码。

光有 404.html 文件不能算搭好了 404 页面——它必须被服务器真实返回 404 Not Found 状态码，否则搜索引擎当普通页面收录，用户刷新也意识不到链接已失效。

文件名与存放位置必须严格匹配平台规范

GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些静态托管服务，只识别根目录下名为 404.html 的文件（全小写、无空格、无隐藏字符）。写成 404.htm、error-404.html、/pages/404.html 或 404.HTML 都会失效。

• 用 git ls-files | grep 404 检查 Git 是否真提交了该文件（Windows 记事本可能加 BOM）
• Jekyll 用户需在 404.html 开头加 ---\npermalink: /404.html\npublished: false\n---，否则会被当作普通页面渲染
• 确认部署后该文件可通过 https://yoursite.com/404.html 直接访问（不是 404，而是 200）

必须验证服务器返回的是真实 404 状态码

本地双击打开 404.html 是 200 OK，毫无意义。真正验证必须走 HTTP 协议：

• 用 npx serve -s 或 python3 -m http.server 8000 启本地服务，访问 http://localhost:8000/nonexistent-path
• 打开 DevTools → Network → 找该请求 → 看 Response Headers 中 Status 是否为 404 Not Found
• 命令行更准：curl -I https://yoursite.com/nonexistent，第一行必须是 HTTP/1.1 404 Not Found
• 若返回 302 或 200，说明服务器配置错误或 SPA fallback 规则覆盖了 404

HTML 结构里不可省略的语义与可访问性要素

搜索引擎和屏幕阅读器不看样式，只认结构和文字内容。以下元素缺一不可：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 必须含 “404”，如

• 必须直写 “404” 文字，如

  页面未找到（404）

  ；禁用图片/SVG/JS 渲染
• 主内容必须包裹在
  标签内，或加 role="main" 属性
• 加 ，防止被搜索引擎误收录
• 所有跳转链接用纯 @#@#@#@#@#@#@#@#@#@0，禁用 onclick 或 location.href 脚本

CSS 与资源加载必须离线可用且轻量

404 页面本身出现在资源链断裂时，不能再依赖外部请求：

• CSS 必须内联进 ，控制在 1KB 以内；禁用
• 图片优先用 data URL 或绝对根路径（如 /img/404-icon.svg），避免相对路径在深层 URL 下失效
• 文字与背景对比度 ≥ 4.5:1（可用 webaim.org/contrastchecker 验证）
• 禁用第三方脚本（如统计、CDN 字体、动画库），它们加载失败会导致白屏或交互降级

最容易被忽略的点：状态码和语义标签不是“锦上添花”，而是硬性门槛。哪怕视觉再炫酷，只要 curl -I 返回不是 404 Not Found，或者

里没明写 “404”，这个页面对 SEO 和辅助技术就是无效的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！