404页面必须由服务器真实返回404状态码才生效，而非仅放置文件；需严格命名为小写404.html并置于根目录，配合服务器配置（如Nginx的error_page、Apache的ErrorDocument或静态平台特定规则），同时禁用fallback覆盖、内联样式、确保404语义明确。
404页面不是“写完放上去就生效”的静态文件，它必须由服务器真实返回 404 Not Found 状态码，否则搜索引擎当它是普通页，浏览器也无从触发正确行为。
确认服务器是否真返回 404 状态码
这是所有问题的前提。很多开发者把 404.html 放进根目录后就以为万事大吉，其实服务器默认根本不会拦截并重写状态码。
- 用
curl -I http://localhost/nonexistent-path检查响应头，必须看到HTTP/1.1 404 Not Found，而不是200 OK - GitHub Pages 只对仓库根目录下的
404.html自动返回 404 状态码（且仅限顶层路径，/docs/xxx不触发） - Netlify 需在
_redirects文件中写/* /404.html 404，或在netlify.toml中配status = 404 - Nginx 必须加
location = /404.html { internal; }，否则直连/404.html会返回 200
HTML 文件名和路径必须严格匹配
服务器找不到文件，从来不是因为“页面没写好”，而是路径对不上。大小写、扩展名、隐藏后缀、斜杠方向，全要抠准。
- 文件名必须是纯小写
404.html——404.htm、error404.html、404.HTML全部失效 - Windows 上注意系统可能隐藏扩展名，实际是
404.html.txt；需在文件夹选项中开启“显示文件扩展名”确认 - Linux/macOS 区分大小写：
About.html≠about.html，链接写错一个字母就 404 - 本地双击
file:///打开永远不触发 404 —— 必须走http://localhost/这类 HTTP 服务才有效
纯 HTML + CSS 实现可依赖的结构
别用 JS 渲染主文案或跳转逻辑。用户可能禁用 JS、网络中断、或页面加载到一半就失败——此时只有原生 HTML 能保证核心信息可见。
立即学习“前端免费学习笔记（深入）”；
-
<h1>404</h1>必须存在且为一级标题，不能是图片或 SVG 文本（除非加aria-label="404"） - 展示用户原本想访问的路径：
<script>document.write(location.pathname)</script>，帮助确认是否拼写错误 - 导航链接全部用
<a href="/">回到首页</a>，不用<button onclick="history.back()"></button>—— 外链进来的 404 点它会跳空页 - 搜索框用
<form action="/search" method="GET"><input name="q"></form>，不绑 JS，后端需真实支持/search?q=xxx
SPA 应用里 404.html 被 fallback 吞掉怎么办
React/Vue 等单页应用常用 try_files $uri $uri/ /index.html 做路由兜底，但它会把所有 404 请求都返回 200 OK 的 index.html，导致你的 404.html 完全不生效。
- 在 Nginx 中排除
404.html路径：try_files $uri $uri/ /index.html =404;不行，得改成try_files $uri $uri/ @fallback;，再定义location @fallback { if ($request_uri !~ ^/404\.html$) { rewrite ^(.*)$ /index.html break; } } - Apache 的
FallbackResource也要避开404.html，例如设为FallbackResource /index.html，再靠ErrorDocument 404 /404.html单独接管 - Vercel 用户需在
vercel.json中启用"errorPages": true，而非只靠rewrites
最容易被忽略的是：你改了服务器配置，但浏览器或 CDN 缓存了旧响应头；务必清缓存、用 curl -I 重新验证，而不是只看浏览器 Network 面板里渲染出来的页面。
