404.html必须置于网站根目录且服务器需返回真实404状态码。文件须为/404.html，配置Apache的ErrorDocument或Nginx的error_page，并确保HTML中<h1>和<title>含“404”纯文本，导航用标签，资源用绝对路径。
404.html 必须放在网站根目录
光写好页面没用，404.html 文件必须直接丢在域名根路径下，比如 https://example.com/404.html 能被直接访问。放错位置（如 /pages/404.html 或子目录）会导致服务器根本找不到它——Nginx 和 Apache 都默认只查根目录下的错误页，Vercel/Netlify 也只认根目录的 404.html，GitHub Pages 更严格：连 404.htm 或带大小写混用（如 404.HTML）都不识别。
常见错误现象：curl -I https://example.com/404.html 返回 404（文件本身不存在），说明路径不对；返回 200 但点开失效链接仍看到默认服务器页，说明配置没生效。
- 本地测试别双击打开
404.html——file://协议没有 HTTP 状态码，永远测不出真实效果 - 用
npx serve或python3 -m http.server启个本地服务再测 - Jekyll 用户记得在
404.html头部加permalink: /404.html和published: false，否则会被渲染成普通文章页
服务器配置必须返回真实 404 状态码
页面存在 ≠ 状态码正确。404.html 是个普通 HTML 文件，浏览器加载它时默认发 200 OK。真正让搜索引擎和爬虫信任它的，是服务器在资源缺失时主动返回 404 Not Found 状态，并把 404.html 当作响应体。
Apache：在 .htaccess 里写 ErrorDocument 404 /404.html，注意路径以 / 开头，且确保 .htaccess 生效（AllowOverride All）
立即学习“前端免费学习笔记（深入）”；
Nginx：在 server 块里加 error_page 404 /404.html;，并配一个 location = /404.html 块，里面加 add_header Status 404; 或用 try_files /404.html =404; 避免误返回 200
- Vercel/Netlify 通常自动处理，但得确认构建日志里有 “Using custom 404 page” 提示
- 配置完务必用
curl -I https://example.com/this-does-not-exist验证响应头含Status: 404 Not Found - 别用
<meta http-equiv="refresh">或 JS 跳转——它们会让状态码变成 200，Google 会当真页面收录
<h1> 和 <title> 必须含 “404” 文字
屏幕阅读器、SEO 工具、甚至部分浏览器标签页预览，都靠 <h1> 和 <title> 判断页面语义。写成 <h1>Oops!</h1> 或 <title>Welcome</title>，等于告诉所有人“这不是错误页”。
正确写法：<h1>404 Not Found</h1>（不能是图片、SVG 文本或 CSS 伪元素生成的内容），<title>404 Not Found | Your Site Name</title>
-
<h1>必须是纯文本，若要用图标+文字，得加aria-label="404 Not Found" - 避免在
<main>外套多余<div>——语义结构混乱会影响可访问性评分 - 文案别写“页面走丢了”，而要明确：“您请求的页面不存在”——减少歧义，方便翻译和爬虫理解
导航按钮必须用 <a href>，禁用 JS 跳转
用户点进 404 页面平均停留不到 8 秒，第一反应就是找“回家的路”。这时候如果按钮依赖 JS 才能跳转，对禁用 JS 的用户、爬虫、或网络异常场景直接失效。
核心操作就三件事：<a href="/">回到首页</a>、<a href="javascript:history.back()">返回上一页</a>（需同域判断）、<form action="/search"><input name="q"></form>
-
history.back()在跨域 referrer 下会静默失败，建议加 JS 判断：if (document.referrer && new URL(document.referrer).origin === location.origin) - 搜索表单
action必须指向真实可用的站内搜索接口，别写action="https://www.baidu.com/s" - 按钮样式用
display: inline-block或inline-flex，避免块级元素撑满整行导致小屏溢出
最易被忽略的点：所有静态资源路径（CSS、图片、字体）必须用绝对路径或根相对路径，比如 /css/style.css，而不是 css/style.css——因为 404 页面可能从任意 URL 被触发，相对路径会指向错误目录。
