404.html必须放在根目录且严格命名为小写，GitHub Pages、Vercel、Netlify、Cloudflare Pages仅识别该文件名；需返回真实HTTP 404状态码，HTML中和须含“404”，CSS须内联，禁用外部资源与JS依赖。
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 结构必须语义化，<h1></h1> 里得有 “404” 字样
搜索引擎和屏幕阅读器靠标签结构识别意图。<h1>404 Not Found</h1> 不是装饰，而是可访问性和 SEO 的硬性要求。用图片、SVG 文本或 JS 动态插入“404”，都会让视障用户听不到、爬虫读不到。
常见错误现象：页面看着像 404，但 Google 把它当普通页面索引；用户用读屏软件听到的是“网页标题”，而非“404 页面未找到”。
- 必须用
<main></main>包裹核心内容，或加role="main" -
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title> - 提供明确跳转入口：用
<a href="/">← 返回首页</a>，别用<button onclick="..."></button>或<meta http-equiv="refresh"> - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
CSS 必须内联，禁用外部资源与 JavaScript 依赖
404 页面可能出现在资源路径错误时（比如 /assets/main.css 本身 404），若再引用外部样式或脚本，会触发更多失败请求，拖慢渲染甚至白屏。
实操建议：
- 所有样式写进
<style></style>，控制在 1KB 以内；禁用<link rel="stylesheet"> - 字体优先用系统栈：
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 <a href="https://www.php.cn/link/db8fd996bde03224bfb6808f56734712">https://www.php.cn/link/db8fd996bde03224bfb6808f56734712</a> 是最准的验证方式。
