必须真实返回404状态码，否则搜索引擎误收录、用户无法识别死链；需通过HTTP服务（如npx serve）或curl验证状态码，HTML中title、h1须含“404”，main/role="main"保障可访问性，CSS内联、禁用JS跳转与外部资源。
不能只写一个 404.html 文件就完事——服务器必须真实返回 404 Not Found 状态码，否则搜索引擎当普通页面收录，用户点击搜索结果进来也意识不到自己进了死链。
怎么确认你的 404 页面真返回了 404 状态码
本地双击打开 404.html 完全无效，file:// 协议压根没有 HTTP 状态码。必须走真实 HTTP 服务验证：
- 用
npx serve -s或python3 -m http.server 8000启服务，访问http://localhost:8000/xxx-abc123 - 打开 DevTools → Network → 找该请求 → 看 Response Headers 里
Status是否为404 Not Found - 命令行更准：
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found
HTML 结构里哪些标签和内容不能省
404.html 不是普通网页，而是服务端注入的错误响应体，语义和可访问性必须硬保障：
-
<title>必须含 “404”，比如<title>404 - 页面未找到</title>，否则搜索结果点进来像进了首页 -
<h1>必须直写 “404 Not Found” 或 “页面未找到（404）”，不能是图片、SVG 文本或 JS 渲染内容 - 主内容用
<main>包裹，或加role="main"，让屏幕阅读器跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
CSS 和资源加载必须内联且精简
外部资源极大概率加载失败：CDN 挂了、GitHub Pages 拦截了 link、Nginx 配置把所有路径 fallback 到 index.html —— 导致页面白屏或只剩文字：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- CSS 必须写在
<style>标签里，控制在 1KB 以内；禁用<link rel="stylesheet"> - 所有图片用绝对根路径（如
/img/404-icon.svg）或 data URL，避免相对路径在深层 URL 下失效 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
- 禁用
<script src="https://cdn.example.com/analytics.js">这类第三方脚本，加载失败会拖慢首屏可交互时间
跳转逻辑必须不依赖 JavaScript
用户进 404 页面平均停留不到 8 秒，任何 JS 依赖都会导致“卡死”或降级失效：
- “返回首页”必须用
<a href="/">← 返回首页</a>，不是<button onclick="location.href='/'"> - 想显示“回到上一页”？先判断
document.referrer是否同域且非空，否则按钮href="#"并置灰 - 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)，它们会让状态码变成 200 - 搜索框必须是
<form action="/search" method="GET"><input name="q"></form>，后端需真实支持该路由，别调 fetch()
最常被忽略的是：你设计得再友好，如果服务端没记录原始 Referer 和 path，就无法区分是内部链接写错、还是爬虫在扫废弃路径——那所有优化都只是障眼法。
