必须返回真实404状态码，通过本地http服务或curl验证；html需含含“404”的title、h1、main/role="main"、noindex meta；禁用跳转和js依赖；css内联、对比度达标、资源路径有效；github pages须确保404.html在根目录且jekyll配置正确。
必须返回真实 404 Not Found 状态码，否则搜索引擎当普通页面收录、用户得不到准确反馈——光有好看的 HTML 文件没用。
怎么确认服务器真返回了 404 状态码
本地双击 404.html 打开无效，浏览器走 file:// 协议，压根没有 HTTP 状态码概念。必须用 HTTP 服务预览：
- 用
npx serve或python3 -m http.server 8000启一个本地服务，再访问http://localhost:8000/nonexistent - 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到那个请求 → 看 Response Headers 里是否有
Status: 404 Not Found - 命令行验证更直接：
curl -I https://yoursite.com/nonexistent，输出第一行必须是HTTP/1.1 404 Not Found
HTML 结构里哪些元素不能少
不是堆标签，而是让机器和人都能立刻识别“这是个错误页”：
-
<title></title>必须含 “404” 字样，比如<title>404 - 页面未找到</title>，否则搜索结果点进来用户以为进了首页 -
<h1></h1>必须直给事实，如<h1>页面未找到（404）</h1>，别写“哎呀出错了”，屏幕阅读器靠这个判断上下文 - 主内容区用
<main></main>包裹，或加role="main"的容器，让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
跳转和交互最容易踩的坑
用户进 404 页平均停留不到 8 秒，任何延迟、跳转、依赖 JS 的操作都在赶人：
- 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)—— 这会让状态码变成200，SEO 权重全丢给首页 - 所有按钮用
@#@#@#@#@#@#@#@#@#@0，不是<button onclick="location.href='/'"></button>；禁用 JS 时仍要可用 - 想加“回到上一页”？先判断
document.referrer是否同域且非空，否则按钮 href 设为#并置灰 - 别在 404 页调
fetch()查推荐文章——后端已失联，前端补救纯属徒劳
CSS 和资源加载的底线控制
404 是异常路径，不能因外部资源加载失败导致页面空白或不可读：
- CSS 最好内联进
<style></style>，控制在 1KB 以内；避免外链styles.css失败后只剩白屏 - 文字与背景对比度 ≥ 4.5:1，比如
#333配#fff可以，配#eee不行；用在线工具（如 webaim.org/contrastchecker）验 - 图片用相对路径，且确保部署后真实存在；
404.html里引用/img/404-bg.png，就真得有这个文件，否则又触发一次 404 - 动画可有，但别依赖 Canvas 或复杂 JS；粒子效果、SVG 旋转这些，不支持就降级为静态图，不影响核心信息传达
最常被忽略的一点：GitHub Pages 只认根目录下的 404.html，Jekyll 用户还得在文件开头加 permalink: /404.html 和 published: false，否则会被渲染成博客文章页——这时候你看到的“404”其实是个 200 响应的普通页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
