404页面必须由服务器真实返回404状态码，否则搜索引擎误收录、用户无反馈；需用curl -I或DevTools Network面板验证状态码，GitHub Pages要求根目录小写404.html，Nginx需防try_files覆盖，HTML须含含“404”的title/h1/main，CSS内联且≤1KB，禁用JS跳转与meta刷新。
404页面不是“写个提示就行”，它必须被服务器真实返回 404 Not Found 状态码，否则搜索引擎当普通页收录、用户刷新没反馈、跳转按钮再漂亮也白搭。
怎么确认你的 404.html 真被服务器用了
本地双击打开 404.html 永远是 200 OK——file:// 协议压根没有 HTTP 状态码。验证只看两点：
- 用
curl -I https://yoursite.com/xxx-abc，第一行必须是HTTP/1.1 404 Not Found - 在 Chrome DevTools → Network 面板里访问一个明显不存在的路径（如
/nonexistent），检查该请求的 Status 是否为404 Not Found - GitHub Pages 必须严格命名为小写
404.html并放在仓库根目录；写成404.htm或pages/404.html都不生效 - Nginx 用户要防重写规则覆盖：如果用了
try_files $uri $uri/ /index.html;（常见于 SPA），得加例外，否则所有 404 都被 fallback 成200的首页
HTML结构里哪些标签和文字不能省
搜索引擎和屏幕阅读器靠标签判断这是错误页，不是普通内容。硬性要求有三：
-
<title></title>必须含 “404”，例如<title>404 - 页面未找到</title>，否则 Google 可能把它当首页索引 -
<h1></h1>必须直写 “404 Not Found” 或 “页面未找到（404）”，不能是图片、SVG 文本或 JS 插入 - 核心内容必须包在
<main></main>里（可加role="main"），让辅助技术跳过导航直接读错误信息 - 返回链接用
<a href="/">回到首页</a>，别用<button onclick="location.href='/'"></button>——JS 关闭时就失效
为什么 CSS 必须内联且 ≤1KB
404 页面可能出现在资源路径出错时（比如 /css/style.css 本身 404），若再引用外部样式，极易白屏或只剩裸文字。实操要点：
立即学习“前端免费学习笔记（深入）”；
- 所有样式塞进
<style></style>，删空格、注释、@import，控制在 1KB 内 - 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 避免 Flex/Grid 布局——旧安卓 WebView 或 IE11 不一定支持，用
display: flex; height: 100vh;居中足够稳 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
搜索框和“回到上一页”怎么写才可靠
用户平均在 404 页面停留不到 8 秒，任何 JS 依赖都可能降级失败。所以：
- 搜索框用标准
<form method="GET" action="/search"></form>，<input name="q" autofocus required>，回车即提交，无需 JS - “回到上一页”按钮需先判断：
document.referrer同域且非空才显示，否则 href="#" 并置灰；别直接写history.back()——Service Worker 或跨域 referrer 下会静默失败 - 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)，它们会让状态码变成200，Google 明确归类为“软 404”
最常被忽略的点：状态码对不上，其他全白做；文件名大小写不对，平台直接无视；CSS 外链一断，页面变白纸。动手前先 curl 验证，比调样式重要十倍。
