必须返回真实404状态码，否则页面再简洁也无效：本地双击打开404.html走file://协议无http状态码；需用curl或chrome devtools验证响应头为“http/1.1 404 not found”；github pages须严格命名为小写404.html并置于根目录；nginx/apache配置需避免被重写规则拦截；html须语义化、无js依赖、title含“404”、h1直述错误、main包裹核心内容、首页链接为纯a标签；css必须内联且≤1kb，字体用系统栈，对比度≥4.5:1；禁用meta刷新和自动跳转js；图片路径确保存在；js若必须使用，须settimeout≥10秒兜底且不依赖fetch/history等不可靠api；第三方脚本一律禁用；最终目标是服务器对每个不存在路径精准返回该html及404状态码。
必须返回真实404状态码，否则页面再简洁也没用
本地双击打开 404.html 文件，浏览器走 file:// 协议，压根没有 HTTP 状态码——这根本不是 404 页面。验证只看两点：curl -I https://yoursite.com/nonexistent 返回第一行是 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，但路径写成./404.html或带域名，服务器找不到文件就退回到默认页
HTML结构要语义化且无 JS 依赖
用户点进 404 页面平均停留不到 8 秒，任何 JS 加载失败、被拦截、或禁用，都会让按钮失灵、文字错位、甚至白屏。所以结构底线很明确：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<title></title>必须含 “404” 字样，例如<title>404 - 页面未找到</title>，否则搜索引擎当普通页收录 -
<h1></h1>直给事实，如<h1>404 Not Found</h1>，不能用图片、SVG 文本或 JS 动态插入 - 核心内容用
<main></main>包裹，加role="main"提升可访问性，让屏幕阅读器跳过导航直读错误信息 - 返回首页用
@#@#@#@#@#@#@#@#@#@0，不用<button onclick="location.href='/'"></button>—— JS 关闭时仍要可用 - 禁用
<meta http-equiv="refresh">和自动跳转 JS，它们会让状态码变成 200，破坏 SEO
CSS 必须内联，字体与对比度保底
外链 CSS 加载失败 = 白屏。移动端弱网下资源超时概率高，所有样式必须塞进 <style></style> 标签，控制在 1KB 以内（删空格、注释、@import）。
- 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;，不依赖 Web Font - 文字与背景对比度 ≥ 4.5:1，例如
#333配#fff可以，配#eee不行；用 webaim.org/contrastchecker 实测 - 居中用
display: flex; height: 100vh;，比position: absolute更稳；<h1></h1>字号建议clamp(2.5rem, 5vw, 4rem)自适应 - 图片用相对路径且确保部署后存在，
<img src="404-icon.svg">就真得有这个文件，否则又触发一次 404 请求
别加 JS，除非你真需要且设了 10 秒兜底
CDN（如 Cloudflare 免费版）、GitHub Pages、甚至部分 Nginx 配置会拦截并替换你的 HTML，导致 JS 不运行、CSS 不加载。所以优先保证纯 HTML + 内联 CSS 能独立渲染。
- 如果非要用 JS（比如自动跳首页），必须用
setTimeout包一层，且延迟 ≥ 10 秒，给用户留出点击「回到首页」的时间 - 禁用
fetch()、history.back()、window.location.replace()等操作——它们在错误上下文中不可靠 - 不要在 404 页面嵌入第三方脚本（如统计、广告、CDN 字体），加载失败会拖慢首屏可交互时间，而用户此时已经受挫
- 若用
<script></script>，务必放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
