404页面必须由服务器真实返回HTTP 404状态码，否则无效；本地双击打开走file://协议无状态码，须用npx serve等HTTP服务配合curl或DevTools验证响应头为“HTTP/1.1 404 Not Found”。
404页面不是“写个带404字样的HTML就行”，它必须被服务器真实返回 404 Not Found 状态码，否则搜索引擎当普通页面收录、用户刷新无提示、跳转逻辑失效——所有前端努力都白搭。
为什么本地双击404.html永远验证不了效果
file:// 协议下没有 HTTP 状态码概念，浏览器强制返回 200 OK。你看到的只是个普通 HTML 文件，和 404 完全无关。
- 验证必须走真实 HTTP 服务：用
npx serve -s启动，访问http://localhost:5000/xxx（一个肯定不存在的路径） - 打开 DevTools → Network → 找该请求 → 看
Status是否为404 Not Found，且Content-Type是text/html - 命令行更可靠：
curl -I http://localhost:5000/xxx，第一行必须是HTTP/1.1 404 Not Found - GitHub Pages / Netlify / Vercel 等静态托管平台，只在部署后才生效；本地预览时它们的 404 拦截机制不工作
静态托管平台怎么让404.html真正接管
不同平台对 404.html 的识别规则差异极大，文件放错位置或命名不对，就等于没写。
- 文件名必须严格为小写
404.html，不能是404.htm、error-404.html、404.HTML或带空格/隐藏字符 - 必须放在项目根目录（即和
index.html同级），Git 提交前用git ls-files | grep 404确认已纳入索引 - GitHub Pages：无需额外配置，只要根目录有
404.html即可自动接管 - Netlify：需在
_redirects文件中加一行/* /404.html 404，或在netlify.toml中声明重定向规则 - Jekyll 用户：必须在
404.html开头加 YAML front matter：---\npermalink: /404.html\npublished: false\n---，否则会被当成普通文章渲染
HTML结构里哪些东西不能省、不能骗
搜索引擎和屏幕阅读器靠标签语义判断这是错误页，不是靠视觉样式。JS 渲染、图片文字、SVG 文本全都不算数。
-
404 - 页面未找到 -
必须直写 “404 Not Found” 或 “页面未找到（404）”，不能是
- 主内容必须包裹在
或加role="main"，确保屏幕阅读器跳过导航直接读错误信息 - 加
，防止被搜索引擎误收录为正常页面 - 所有 CSS 必须内联在
里，禁用—— 外部资源加载失败会导致白屏
带搜索框或跳转按钮时最容易踩的坑
用户进 404 页面平均停留不到 8 秒，任何依赖 JS 加载或执行的逻辑，都会导致降级失效甚至卡死。
- 搜索框必须用原生
，input 带name="q"，不写 JS 拦截 - “返回首页”必须是
@#@#@#@#@#@#@#@#@#@0，不是 - 想用动画跳转？可以，但必须用
location.replace("/")（不留历史记录），且动画结束后再触发，比如setTimeout(() => location.replace('/'), 600) - 绝对不要用
或setTimeout(() => location.href = '/', 2000)—— 这会返回200状态，Google 当软 404 处理 - 如果用了 PWA 或 Service Worker，检查它是否缓存了
404.html—— 缓存版本里的 JS 可能根本不会执行
最常被忽略的一点：404 页面的响应体必须是纯 HTML，不能被 SPA 的 fallback 规则吞掉。Nginx 的 try_files $uri $uri/ /index.html; 会把所有 404 都返回 200 的首页，必须显式排除 /404.html 路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
