必须返回真实http 404状态码，并用语义化html结构分三层提供可点击引导：显示当前路径、高频替代链接、站内搜索表单，兼顾可访问性与离线可用性。
核心是：真实返回 404 状态码 + 语义化结构 + 分层可点击引导。不能只写个“页面没找到”，而要帮用户快速判断、补救、转向。
必须确保服务器返回真实的 HTTP 404 状态码
这是所有友好设计的前提。如果返回的是 200 状态码，搜索引擎会持续抓取死链，浏览器也无法触发离线缓存逻辑，用户也得不到准确的错误信号。
- GitHub Pages：把文件命名为
404.html放在仓库根目录，系统自动用 404 状态返回（注意：子路径如/a/404.html不生效） - Vercel：需在
vercel.json中配置"errorPages"，或启用staticPageGeneration并确保404.html存在 - Nginx：用
error_page 404 /404.html;配置，并为该 location 加上internal;防止被直接访问 - 本地验证：运行
curl -I https://yoursite.com/xxx，确认响应头中含HTTP/2 404
用 HTML5 语义化标签搭建清晰骨架
结构本身就在传达信息。屏幕阅读器、搜索引擎和无 JS 环境都依赖它正确理解页面意图。
- 开头写
，<code> -
<header></header>包含带<h1>404</h1>的主标题，再加一句自然文案如“您访问的页面找不到了” -
<main></main>内用<section></section>承载核心内容：错误说明、当前路径、导航选项 -
<footer></footer>放简洁联系信息或版权，不塞无关链接 - 避免用
<div> 堆砌；禁用 <code><nav></nav>包裹单个“返回首页”按钮——它不是全站导航分三层提供明确、免 JS 的点击引导
用户此刻最需要的是“下一步做什么”，而不是动效或幽默段子。每项都应真实有效、无需脚本即可跳转。
-
第一层：确认目标 —— 在
<p></p>或<code>标签里显示location.pathname，例如：/blog/post-2025，方便用户核对拼写或路径是否过期 -
第二层：高频替代 —— 提供 3–4 个真实存在的页面链接，如“最新文章”（指向
/blog）、“产品介绍”（/products）、“帮助中心”（/help），全部用绝对路径 -
第三层：主动检索 —— 放一个
<form action="/search" method="GET"></form>，内含<input name="q">，提交后跳转到站内搜索页；不依赖第三方 API，保证离线可用
兼顾可访问性与轻量体验
不是所有用户都能看到动画，也不是所有设备都支持 JS。友好，首先是“可靠”。
- 所有文字对比度 ≥ 4.5:1（如深灰 #333 背景配白底，或白字配深蓝 #1a237e）
- 关键文案加
aria-live="polite"，让屏幕阅读器自动播报“页面未找到” - 主视觉用内联 SVG 或纯 CSS 实现（如
aspect-ratio+grid布局），不请求外部图片或字体 - 禁用
history.back()按钮——外链进来的 404 页面点它会跳空页甚至报错 - 搜索框默认聚焦（
autofocus），减少一次点击
-
第一层：确认目标 —— 在
