静态网页的404.html必须放在根目录且命名为404.html，GitHub Pages自动支持但限于绑定路径，Netlify/Vercel需配置重定向规则，页面需兼顾SEO与离线可用性。
静态网页没有后端，404 页面不能靠服务器动态返回，但只要文件存在、路径正确、被服务器识别，就能生效——关键不在“怎么写”，而在“放哪”和“怎么让服务器用它”。
你的 404.html 文件必须放在网站根目录
这是最常踩的坑：很多人把 404.html 放在子目录（比如 /pages/404.html）或本地测试时双击打开，结果 404 始终不触发。
- 静态托管服务（如 GitHub Pages、Vercel、Netlify、Cloudflare Pages）默认只认根目录下的
404.html - 本地用浏览器直接双击打开
file://协议，根本不会触发 404（没有 HTTP 状态码概念），必须通过本地服务器预览（如npx serve或 VS Code Live Server） - 文件名必须严格是
404.html，不是error404.html、404.htm或带大小写混用（某些服务器区分大小写）
GitHub Pages 自动支持，但有隐藏限制
GitHub Pages 不需要额外配置，只要根目录有 404.html 就会自动接管所有 404 请求——但仅限于你绑定的域名或 github.io 子路径下。
- 如果你用的是项目站点（
username.github.io/repo），404.html只对/repo/xxx路径有效；访问/other这类非本项目路径，仍会跳 GitHub 默认 404 - 自定义域名下，
404.html生效；但若 DNS 解析异常或证书错误，用户根本到不了页面，自然也看不到你的404.html - 页面内链接建议用相对路径（如
./index.html），避免硬编码https://yoursite.com/导致离线失效
Netlify / Vercel 需要明确声明重定向规则
这些平台默认不自动 fallback 到 404.html，尤其当使用了前端路由（如 React Router）时，必须显式配置 404 行为。
立即学习“前端免费学习笔记（深入）”；
- Netlify：在根目录加
_redirects文件，内容写一行：/ * /404.html 404
- Vercel：在根目录加
vercel.json，写{ "rewrites": [{ "source": "/(.*)", "destination": "/404.html" }] }——但注意这会覆盖所有 404，包括真实缺失的资源（如图片、CSS），更稳妥的是只重写 HTML 路由：{"rewrites": [{ "source": "/(.+)", "destination": "/404.html" }]}，再配合cleanUrls: true - 如果用了
index.html的 history 模式路由，别把404.html当作兜底页来处理所有路径，否则真实 404 资源请求也会返回 HTML，导致控制台报错却没提示
HTML 内容本身要兼顾可用性与 SEO
404.html 是纯静态文件，但用户可能从搜索引擎点进来，也可能输错 URL，页面得自己“说清状况”。
- 必须包含
<title>404 Not Found</title>，否则搜索引擎可能误判为首页重复 - 加一个明确的
<h1>Page not found</h1>，别只靠 CSS 隐藏文字或用图片替代 - 提供至少一个有效导航：回到首页的链接（
<a href="/">Go home</a>）、搜索框（前端 JS 实现，不依赖后端）、或 Sitemap 链接 - 避免在
404.html中加载外部 JS/CSS（如统计脚本、CDN 字体），否则网络异常时页面可能白屏或样式崩溃
真正难的不是写个好看的 404.html，而是确保它在各种部署环境里被正确识别——不同平台对“404 响应”的解释逻辑差异很大，同一份代码在 GitHub Pages 上好使，在 Netlify 上可能完全不触发，问题往往出在重定向配置或路径约定上。
