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 插入。

• 必须包含

  404

  或

  404 Not Found

  这类带数字 404 的标题
• 避免用图片、SVG 文本、Canvas 渲染 “404” 字样——它们无法被爬虫读取
• 推荐结构：

  404 页面未找到

  您访问的页面不存在

  

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

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

  下载
• 不要在 里写 “首页” 或 “关于我们”，应是

本地双击打开永远测不出真实 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 和日志分析。

• ❌ 不要写：
• ❌ 不要用：window.location.href = "/";
• ✅ 正确做法：页面保留 404 状态码，加一个醒目的 @#@#@#@#@#@#@#@#@#@0 按钮
• 搜索引擎会把 301 当作“该 URL 已永久迁移”，导致死链权重被错误传递；真实 404 才能帮你发现拼写错误、失效外链、爬虫试探等关键问题

最容易被忽略的一点：即使你写了完美的 404.html，只要服务器返回的是 200 或 302，它就只是个普通网页。验证状态码不是可选项，是必过门槛——所有后续美化、交互、文案，都建立在这个前提之上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！