404.html必须放在根目录且严格命名为小写，GitHub Pages、Vercel、Netlify、Cloudflare Pages仅识别该文件名；需返回真实HTTP 404状态码，HTML中和须含“404”，CSS须内联，禁用外部资源与JS依赖。

html 404页面搭建详细步骤

404.html 必须放根目录且严格小写

GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认 404.html 这个确切文件名，且必须和 index.html 同级。写成 404.htm、error404.html、pages/404.html 或 404.HTML 都不会被识别。

常见错误现象：页面内容明明写了“404”，但访问 /nonexistent 时仍看到平台默认灰页（比如 GitHub 的 “There isn’t a GitHub Pages site here.”）。

用 git ls-files | grep 404 确认 Git 已提交该文件（Windows 记事本可能悄悄加 BOM）
Jekyll 用户需在 404.html 开头加 ---\npermalink: /404.html\npublished: false\n---，否则会被当普通文章渲染
检查部署目标系统是否区分大小写——macOS 默认不区分，Linux 服务器上 404.HTML 就是无效文件

服务器必须返回真实 404 状态码，不能是 200

本地双击打开 404.html 是 file:// 协议，压根没有 HTTP 状态码；真正的 404 页面必须由服务器返回 HTTP/1.1 404 Not Found 响应头，同时把你的 HTML 当作响应体发送。

常见错误现象：Network 面板里状态码是 200 OK，但 URL 明显错误；Google Search Console 把你的 404.html 当正常页面收录。

静态托管：GitHub Pages 自动支持；Netlify 需在 _redirects 中写 /* /404.html 404；Vercel 要确保 404.html 存在且 errorPages 启用
Apache：在 .htaccess 中加 ErrorDocument 404 /404.html
Nginx：在 server 块中加 error_page 404 /404.html;，并确保 location = /404.html 可公开访问
SPA 应用（React/Vue）：try_files $uri $uri/ /index.html; 会吞掉所有 404，必须排除 /404.html 路径

HTML 结构必须语义化，里得有 “404” 字样

搜索引擎和屏幕阅读器靠标签结构识别意图。

`404 Not Found`

不是装饰，而是可访问性和 SEO 的硬性要求。用图片、SVG 文本或 JS 动态插入“404”，都会让视障用户听不到、爬虫读不到。

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

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

下载

常见错误现象：页面看着像 404，但 Google 把它当普通页面索引；用户用读屏软件听到的是“网页标题”，而非“404 页面未找到”。

必须用包裹核心内容，或加 role="main"
必须含 “404”，例如 404 - 页面未找到
提供明确跳转入口：用 @#@#@#@#@#@#@#@#@#@0，别用或
加，防止被搜索引擎误收录

CSS 必须内联，禁用外部资源与 JavaScript 依赖

404 页面可能出现在资源路径错误时（比如 /assets/main.css 本身 404），若再引用外部样式或脚本，会触发更多失败请求，拖慢渲染甚至白屏。

实操建议：

所有样式写进，控制在 1KB 以内；禁用
字体优先用系统栈：font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif
图片用根相对路径（如 /img/404-icon.svg）或 data URI，避免相对路径在深层 URL 下失效
“返回首页”链接必须纯 HTML，不能依赖 history.back() 或 fetch 等 API
文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证

验证环节最容易被忽略：别只看页面长什么样，得确认三件事——Network 面板里状态码是不是 404、响应头里 Content-Type 是不是 text/html、返回的 HTML 内容是不是你写的那个 404.html。用 curl -I @#@#@#@#@#@#@#@#@#@2 是最准的验证方式。