真正的友好在于用户一眼看懂错误并能立即行动，前提是服务器必须返回真实的404 not found状态码；本地双击打开404.html无效，须在http环境（如npx serve）中验证，且响应头status必须为404。
真正的友好，不在于动画多炫或文案多俏皮，而在于用户一眼看懂“这是个错误”，且能立刻做有效动作——前提是服务器必须返回真实的 404 Not Found 状态码。否则所有设计都白搭。
确保服务器返回真实 404 状态码
本地双击打开 404.html 永远测不出效果，因为 file:// 协议没有 HTTP 状态码概念。必须用真实 HTTP 环境验证：
- 用
npx serve -s或python3 -m http.server 8000启服务，访问http://localhost:8000/nonexistent - 打开浏览器 DevTools → Network → 找该请求 → 确认 Response Headers 中有
Status: 404 Not Found - 命令行更准：
curl -I https://yoursite.com/nonexistent，首行必须是HTTP/1.1 404 Not Found
常见失效场景：GitHub Pages 要求文件严格为根目录下的 404.html（小写、无 BOM、Jekyll 需加 permalink: /404.html）；Netlify 推荐用 _redirects 文件写 /* /404.html 404；Nginx 必须配 error_page 404 /404.html 并确保该 location 不被 rewrite 覆盖。
HTML 结构必须语义化且含明确信号
搜索引擎和屏幕阅读器不读视觉样式，只依赖结构和文字。以下元素缺一不可：
-
<title></title>必须含 “404” 字样，如<title>404 - 页面未找到</title> -
<h1></h1>必须直写 “404” 或 “Not Found”，不能是图片、SVG 文本或 JS 插入 - 主内容必须包裹在
<main></main>内，或带role="main"的容器 - 加
<meta name="robots" content="noindex">，防被搜索引擎误收录
别用 <div class="error-title"> 代替 <code><h1></h1>，也别把 “404” 做成背景图——视障用户和爬虫都看不到。
跳转与交互必须零 JS 依赖
用户进 404 页平均停留不到 8 秒，任何 JS 依赖都会卡住真实可用路径：
- 「返回首页」按钮必须是
@#@#@#@#@#@#@#@#@#@0，不是<button onclick="location.href='/'"></button> - 「回到上一页」要先判断：
document.referrer是否同域且非空，否则href设为#并置灰 - 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)——这会让状态码变成 200，SEO 权重全丢 - 搜索框用
<form action="/search" method="GET"><input name="q"></form>，不绑 JS
所有按钮、链接的路径必须真实存在，比如 /blog 页面真得能访问，否则又触发一次 404，形成失败链。
CSS 与资源必须内联且精简
404 是异常路径，不能因一个外链 CSS 加载失败就白屏：
- CSS 全部写进
<style></style>标签，控制在 1KB 以内；禁用@import和外链styles.css - 字体用系统栈：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 图片优先用内联 SVG 或 Data URI；避免
<img src="/img/404-icon.png">这类额外请求 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
最常被忽略的一点：页面里所有相对路径（比如 href="about.html"、src="logo.svg"）都必须基于当前 URL 解析——若用户访问的是 /posts/2024/abc 下的 404，href="about.html" 实际请求的是 /posts/2024/about.html，大概率又 404。一律用绝对路径：href="/about"、src="/logo.svg"。
