404.html必须放在项目根目录、严格命名为小写、且托管平台需支持静态自定义错误页；本地双击无效，须通过HTTP访问验证。
直接放结论：不用写一行 JavaScript，不装任何工具，连本地服务器都不用起，404.html 放对位置、配好基础结构，就能被浏览器自动识别——前提是你的托管平台支持静态页的自定义错误页（比如 GitHub Pages、Vercel、Netlify、Cloudflare Pages 都默认支持）。
为什么你的 404.html 没生效？
最常见原因是路径或命名不对。静态托管平台只认根目录下名为 404.html 的文件（注意大小写，不能是 404.htm 或 error404.html），且必须是纯 HTML 文件（不能是 PHP/JS 渲染生成的）。
常见失效场景：
- 你把
404.html放在pages/或src/子目录里 —— 它必须和index.html并列在项目最外层 - 用了构建工具（如 Vite、Next.js）但没配置
static输出，导致打包后404.html被忽略 - 托管平台是老式虚拟主机（比如某些廉价共享空间），不支持自定义错误页，只返回默认 Apache/Nginx 404
404.html 必须包含哪些标签？
不需要任何特殊 meta 或 script。一个最小可用版本只要三样东西：、、一句能让人看懂的提示文字。其他都是锦上添花。
立即学习“前端免费学习笔记（深入）”；
推荐结构（可直接复制）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面找不到了</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; margin: 10vh 0; }
a { color: #007bff; text-decoration: none; }
</style>
</head>
<body>
<h1>⚠️ 找不到这个页面</h1>
<p>你访问的地址可能输错了，或者内容已被移走</p>
<p><a href="/">→ 返回首页</a></p>
</body>
</html>
说明：
-
<title></title>影响浏览器标签页显示，别留空 -
lang="zh-CN"帮助屏幕阅读器和搜索引擎理解语言，不是可有可无 -
<a href="/"></a>必须用绝对路径/，相对路径（如./index.html）在深层 URL 下会失效
怎么快速验证它真的起作用？
别靠猜，用最笨但最稳的办法：
- 把项目推到 GitHub，开启 GitHub Pages（Settings → Pages → Source 选
main /root） - 等部署完成（通常 1–2 分钟），打开
https://.github.io//this-page-does-not-exist - 如果看到你写的
404.html内容，就成功了；如果看到 GitHub 默认的“404 Not Found”白页，说明文件没放对位置或命名错误
注意：本地双击打开 404.html 不会触发 404 状态，必须通过 HTTP 协议访问（即用域名或 localhost）才能测试真实行为。
真正容易被忽略的是：很多新手以为 404 页面要“动态捕获错误”，其实它只是个静态兜底页。只要路径、命名、托管配置三者对齐，剩下的就是文案和样式的事——而这两样，你早就会了。
