真正的404页面需服务器配置返回http 404状态码，而非仅存在404.html文件；须验证状态码为404 not found，配置apache用errordocument 404 /404.html、nginx用error_page 404 /404.html并避免被try_files拦截，html中title和h1须含“404”，禁用跳转，css内联，资源路径有效。
光有 404.html 文件，不配服务器，就不是真正的 404 页面——用户看到的可能是空白、跳转首页，或搜索引擎收录成普通页面。
怎么确认你的 404.html 真被当错误页用了
本地双击打开 404.html 完全无效，file:// 协议根本没有 HTTP 状态码。必须走真实 HTTP 请求验证：
- 用
npx serve或python3 -m http.server 8000启服务，访问http://localhost:8000/asdf123 - 打开浏览器开发者工具 → Network 标签 → 刷新 → 找到该请求 → 看
Status是否为404 Not Found - 命令行更准：
curl -I http://localhost:8000/asdf123，第一行必须是HTTP/1.1 404 Not Found
如果看到状态码是 200 或地址栏跳转了，说明服务器根本没认你这个文件。
Apache 和 Nginx 必须写的配置行
不同环境生效逻辑完全不同，写错一个字符就白忙：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- Apache（
.htaccess或虚拟主机配置）：ErrorDocument 404 /404.html—— 注意开头斜杠不能少，也不能写成./404.html或404.html - Nginx（
server块内）：error_page 404 /404.html;—— 必须加分号；还要加location = /404.html { }或确保它不被try_files $uri $uri/ /index.html;拦截，否则返回的是200 - GitHub Pages：只认根目录下的
404.html，且 Jekyll 用户得在文件开头加permalink: /404.html和published: false，否则会被渲染成博客文章
HTML 文件里最容易被删掉的关键元素
很多“好看”的 404 页面其实不合规，因为砍掉了机器可读的信号：
-
<title></title>必须含 “404” 字样，比如<title>404 - 页面未找到</title>，否则搜索引擎和屏幕阅读器无法识别这是错误页 -
<h1></h1>必须直写 “404 Not Found” 或类似明确文案，不能是图片、SVG 文本，也不能靠 JS 插入 - 主内容必须包在
<main></main>或带role="main"的容器里，让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被当成普通页面收录 - 禁用
<meta http-equiv="refresh">和任何自动跳转 JS，否则状态码会变成200，SEO 权重全丢给首页
CSS 和资源路径的硬约束
404 是异常路径，加载失败不能导致页面不可用：
- CSS 最好内联进
<style></style>，控制在 1KB 内；外链styles.css加载失败，页面就只剩白屏 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证；
#333配#eee不合格，得配#fff或加文字阴影 - 所有图片、图标路径必须是相对路径且真实存在，比如引用
/img/404-icon.svg，部署后就得有这个文件，否则又触发一次 404 - 按钮用
@#@#@#@#@#@#@#@#@#@1，别用<button onclick="location.href='/'"></button>—— JS 禁用时仍要能点
真正难的不是写 HTML，而是让服务器在资源不存在时，精准地返回那个文件 + 正确的状态码 + 不干扰爬虫和辅助技术——这三个条件缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
