必须返回真实404状态码:用npx serve或curl验证Status为404 Not Found;GitHub Pages需小写404.html在根目录;title和h1须含“404”;结构用包裹;CSS内联≤1KB;禁用JS跳转和第三方脚本。

必须返回真实 404 Not Found 状态码,否则页面再简洁也无效——浏览器地址栏显示“404”但 Network 面板里是 200 OK,就等于没做。
验证状态码是否真为 404
本地双击打开 404.html 文件走的是 file:// 协议,压根没有 HTTP 状态码。必须用真实 HTTP 服务验证:
- 用
npx serve -s启服务,访问http://localhost:5000/xyz123,看 DevTools → Network → Response Headers 中Status是否为404 Not Found - 命令行更可靠:
curl -I https://yoursite.com/nonexistent,第一行必须是HTTP/1.1 404 Not Found - GitHub Pages 必须严格命名为小写
404.html并放在仓库根目录;写成404.htm或pages/404.html都不生效
HTML 结构不能省的硬性标签
搜索引擎和屏幕阅读器靠结构识别错误意图,不是靠视觉样式:
-
必须含 “404”,例如,否则会被当普通页收录404 - 页面未找到 -
必须直写文字 “404 Not Found” 或 “页面未找到(404)”,禁用图片、SVG 文本或 JS 插入 - 核心内容用
包裹,让辅助技术跳过导航直读错误信息 - 返回首页用纯
@#@#@#@#@#@#@#@#@#@0,不是—— JS 关闭时仍要可用
CSS 必须内联且 ≤1KB
外链 CSS 加载失败 = 白屏。移动端弱网下资源超时概率高,所有样式必须塞进 标签:
- 字体用系统栈:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 文字与背景对比度 ≥ 4.5:1,可用 webaim.org/contrastchecker 验证
- 居中推荐
display: flex; height: 100vh; align-items: center; justify-content: center;,比position: absolute更稳 - 删空格、注释、
@import,压缩后控制在 1KB 内(可用gzip -c 404.html | wc -c检查)
别碰自动跳转和 JS 依赖
用户在 404 页面平均停留不到 8 秒,任何 JS 失效都会导致降级失败:
- 禁用
和setTimeout(() => location.href = '/', 2000)—— 它们会让状态码变成200,破坏 SEO - 想加“回到上一页”?先判断
document.referrer是否同域且非空,否则按钮href="#"并置灰 - 搜索框用标准
,即可,无需 JS 拦截 - 第三方脚本一律禁用,包括统计、CDN 字体、图标库——加载失败会拖慢首屏可交互时间
最容易被忽略的点:SPA 应用(如 Vue/React)的 try_files $uri $uri/ /index.html; 规则会吞掉所有 404,返回 200 OK 的首页。必须显式排除 /404.html 路径,否则你写的 HTML 根本不会被服务器返回。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











