真正的404页面必须由服务器返回HTTP 404状态码，而非仅存在404.html文件；HTML需语义化、含明确“404”文字、内联CSS≤1KB、表单不依赖JS、禁用自动跳转，确保可访问性与搜索引擎识别。
必须先确认服务器返回真实 404 状态码
光写一个 404.html 文件，浏览器双击打开或本地 file:// 访问，状态码永远是 200 —— 这根本不是 404 页面。验证只看两点：curl -I https://yoursite.com/xxx 返回第一行必须是 HTTP/1.1 404 Not Found；或者 Chrome DevTools 的 Network 面板里，访问一个明显不存在的路径（如 /xyz-abc），Status 明确显示 404 Not Found。
常见失效原因：
- GitHub Pages 没把文件命名为严格小写的
404.html，写成404.htm或pages/404.html都不生效 - Nginx 的
error_page 404 /404.html;被try_files $uri $uri/ /index.html;拦截，结果返回 200 OK 的首页 - Apache 的
.htaccess写了ErrorDocument 404 ./404.html，路径带点或相对路径，服务器找不到就退回到默认页
HTML 结构必须语义化且含明确“404”文字
<h1></h1> 和 <title></title> 必须直写 “404”，不能靠图片、SVG 文本或 JS 插入。搜索引擎和屏幕阅读器靠这个识别错误意图，否则会当普通页面收录或跳过关键信息。
底线结构示例：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>404 - 页面未找到</title>
<meta name="robots" content="noindex">
</head>
<body>
<main role="main">
<h1>404 Not Found</h1>
<p>你要访问的页面不存在</p>
<a href="/">← 返回首页</a>
</main>
</body>
</html>关键点：
-
<main></main>必须包裹核心内容，加role="main"提升可访问性 - 返回首页用纯
<a href="/"></a>，别用<button onclick="location.href='/'"></button>—— JS 关闭时仍要可用 - 禁用
<meta http-equiv="refresh">和自动跳转 JS，它们会让状态码变成 200
CSS 必须内联且控制在 1KB 以内
404 页面常出现在资源路径出错时（比如 /assets/main.css 本身 404），若再依赖外部 CSS，极可能白屏或只剩文字。所有样式必须写在 <style></style> 里。
实操建议：
- 字体用系统栈：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
- 避免
@import、url()引用外部字体或图片；图标优先用内联 SVG 或 data URL - 响应式居中用
display: flex; justify-content: center; align-items: center;，别依赖 JS 计算
搜索框和跳转逻辑必须不依赖 JavaScript
用户平均停留不到 8 秒，JS 加载失败、被拦截、或禁用，都会让搜索框失灵或按钮消失。搜索本质只是转发到站内搜索页，不需要 fetch 或 history API。
正确写法：
<form method="GET" action="/search"> <input type="text" name="q" placeholder="试试换个关键词..." required autofocus> <button type="submit">找找相关内容</button> </form>
注意：
-
action必须写完整路径（如/search），不能写search或./search -
input必须带name="q"（或你后端约定的参数名），否则提交后 URL 不带查询参数 - 不要加
onsubmit="return false"，这会让表单完全失效 - 想支持“回到上一页”？用
<a href="javascript:history.back()"></a>是危险的 ——document.referrer可能为空或跨域，稳妥做法是只提供首页链接
最易被忽略的点：即使加了动画或趣味跳转，也必须确保 <h1>404</h1> 和文字说明始终可见、可读、无需 JS 渲染 —— 否则对爬虫、屏幕阅读器和弱网用户，它就不是真正的 404 页面。
