404.html 必须严格命名为小写、置于根目录、无BOM、含语义化404标题，且服务器须返回真实404状态码；本地双击无效，需HTTP服务验证，SPA需避免兜底覆盖。
直接放一个叫 404.html 的文件在网站根目录，服务器就能自动接管 404 请求——但绝大多数人卡在这一步之后：页面不生效、状态码不对、刷新子路径还是 404。核心不是“怎么写 HTML”，而是“怎么让服务器真把它当 404 用”。
404.html 文件名和位置必须严格小写、在根目录
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认 404.html 这个确切名字，且必须和 index.html 在同一级目录下。
- ❌ 错误示例：
404.htm、error404.html、pages/404.html、404.HTML - ✅ 正确路径：
/404.html（即项目根目录下） - Windows 记事本容易偷偷加 BOM 头，建议用 VS Code 或 Sublime 打开并另存为 UTF-8 无 BOM 格式
- Git 用户执行
git ls-files | grep 404确认它真被提交了，而不是被 .gitignore 忽略
页面里必须有明确的 “404” 语义文字
搜索引擎和屏幕阅读器靠结构识别错误页意图，不能只靠 CSS 隐藏文字或 JS 插入。
- 必须包含
<h1>404</h1>或<h1>404 Not Found</h1>这类带数字 404 的标题 - 避免用图片、SVG 文本、Canvas 渲染 “404” 字样——它们无法被爬虫读取
- 推荐结构：
<h1>404 页面未找到</h1> <p>您访问的页面不存在</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> - 不要在
<title></title>里写 “首页” 或 “关于我们”，应是<title>404 - 页面未找到</title>
本地双击打开永远测不出真实 404 效果
浏览器用 file:// 协议打开时，根本不会触发 HTTP 状态码机制，所有请求都走本地文件系统——你看到的“能打开”，不代表线上有效。
- 必须起一个 HTTP 服务测试：比如
npx serve -s .（当前目录），然后访问http://localhost:5000/nonexistent - 用
curl -I http://localhost:5000/nonexistent检查响应头是否含HTTP/1.1 404 Not Found - 如果返回
200 OK，说明服务器没配置 error page，或者 fallback 规则覆盖了 404（常见于 Vue/React history 模式） - SPA 应用部署时，Nginx 的
try_files $uri $uri/ /index.html;必须排除/404.html，否则它会被兜底成index.html并返回 200
别用跳转代替 404，尤其别做 301 重定向
把所有 404 请求用 meta refresh 或 JS 跳首页，看起来“友好”，实则破坏 SEO 和日志分析。
- ❌ 不要写：
<meta http-equiv="refresh" content="0; url=/"> - ❌ 不要用：
window.location.href = "/"; - ✅ 正确做法：页面保留 404 状态码，加一个醒目的
<a href="/">返回首页</a>按钮 - 搜索引擎会把 301 当作“该 URL 已永久迁移”，导致死链权重被错误传递；真实 404 才能帮你发现拼写错误、失效外链、爬虫试探等关键问题
最容易被忽略的一点：即使你写了完美的 404.html，只要服务器返回的是 200 或 302，它就只是个普通网页。验证状态码不是可选项，是必过门槛——所有后续美化、交互、文案，都建立在这个前提之上。
