纯html+内联css可制作可靠404页：必须返回真实404状态码、使用语义化标签（如404和）、内联css确保快速加载、高对比度文字适配手机，禁用js和自动跳转。
直接用纯 HTML + 内联 CSS 就能做出既有趣又可靠的报错页面，不需要框架、不依赖构建工具，也不必调用外部 CDN。关键不是“多炫”，而是「状态码正确」「文案清晰」「跳转可靠」「适配手机」。
怎么让 404 页面返回真实 HTTP 状态码
光有好看的 HTML 文件没用——404.html 放在根目录，不代表服务器真返回了 404 Not Found。用户和搜索引擎看到的仍是 200 OK，SEO 权重全丢，辅助技术也识别不了这是错误页。
- Apache 用户：在
.htaccess里加一行ErrorDocument 404 /404.html - Nginx 用户：在
server块里写error_page 404 /404.html;，并确保该location不带200状态（可用add_header Status 404;强制） - 静态托管（Vercel / Cloudflare Pages / GitHub Pages）：默认支持，但必须确认文件路径是
/404.html（不是/pages/404.html或子目录） - 本地测试别双击打开：
file://协议没有 HTTP 状态码。要用npx serve或python3 -m http.server启服务，再访问http://localhost:3000/nonexistent - 验证方式：浏览器开发者工具 → Network → 刷新 → 查看响应头里是否有
Status: 404 Not Found；或命令行运行curl -I https://yoursite.com/nonexistent
HTML 结构里哪些标签和属性不能少
不是堆标签，而是让机器和人都能立刻识别“这是个错误页”。语义化结构直接影响 SEO 和可访问性。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<title></title>必须含 “404” 字样，例如<title>404 - 页面未找到</title>，否则搜索结果点进来用户以为进了首页 -
<h1></h1>必须直给事实，如<h1>页面未找到（404）</h1>，别写“哎呀出错了”，屏幕阅读器靠这个判断上下文 - 主内容区用
<main></main>包裹，或加role="main"的容器，让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录 - 所有跳转按钮用
@#@#@#@#@#@#@#@#@#@0 验证 - 按钮用
inline-flex或display: inline-block，避免块级元素占满整行；padding和border-radius控制在合理范围（如0.75em） - 禁用
@import、外链styles.css、fetch()或任何 JS 加载逻辑——后端已失联，前端补救纯属徒劳
为什么别在报错页加 JS 交互或自动跳转
用户进 404 页平均停留不到 8 秒，任何延迟、跳转、依赖 JS 的操作都在赶人。
- 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)—— 这会让状态码变成200，SEO 权重全丢给首页 - 想加“回到上一页”？先判断
document.referrer是否同域且非空，否则按钮href设为#并置灰 - 别在 404 页调
fetch()查推荐文章、站内搜索或上报错误——这些请求大概率失败，还可能触发二次错误 - 如果真要收集错误数据，用
navigator.sendBeacon()发送轻量日志，它不阻塞页面卸载，且兼容性好
最容易被忽略的是：所有图片路径必须是相对路径且真实存在，比如 <img src="/img/404-icon.svg">，就真得有这个文件；否则又触发一次 404，形成错误嵌套。状态码、路径、对比度、语义标签——这四件事没做对，再有趣的插画和动画都只是装饰品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
