404页面核心是服务器必须返回真实404状态码且HTML不依赖外部资源；文件须严格命名为小写404.html并置于根目录，CSS内联≤1KB、标题与h1含纯文本“404”、禁用JS跳转、加noindex meta。
404页面不是“写个HTML放上去就行”，核心是：服务器必须返回真实 404 Not Found 状态码，且 HTML 本身不能依赖外部资源加载——否则它自己就会触发二次 404。
404.html 文件名和位置必须严格匹配平台要求
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些主流静态托管平台，只识别根目录下名为 404.html 的文件（全小写、无空格、无 BOM、无扩展名变体）。
- 写成
404.htm、error-404.html、pages/404.html或404.HTML→ 完全无效 - Git 提交前用
git ls-files | grep 404确认文件名是否正确（Windows 记事本可能悄悄加 BOM） - Jekyll 用户需在
404.html开头加 YAML front matter：---\npermalink: /404.html\npublished: false\n---，否则会被当作普通页面渲染
HTML 必须内联全部样式，且 <style></style> ≤1KB
深层路径如 /blog/2023/post-abc 触发 404 时，浏览器默认会尝试从同一路径加载 /blog/2023/style.css —— 这个请求大概率也 404，导致白屏或裸文本。
- 所有 CSS 必须塞进
<style></style>，删空格、注释、@import - 字体栈写死：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - 图片优先用内联 SVG 或 data URL；避免
<img src="/img/404.svg" alt="HTML搭建404页面的通用模板做法" >，路径易断 - 对比度实测 ≥ 4.5:1，例如
background: #1a1a1a配color: #f0f0f0可行，配#ccc不行
<h1></h1> 和 <title></title> 必须含纯文本 “404”
搜索引擎和屏幕阅读器不解析 JS 动态插入、SVG 文本或 Canvas 渲染的内容。语义缺失 = SEO 失效 + 辅助技术不可读。
立即学习“前端免费学习笔记（深入）”；
-
<title>404 - 页面未找到</title>—— 缺“404”字样，爬虫当普通页收录 -
<h1>404 Not Found</h1>—— 必须是纯文本，不能包裹<svg></svg>或靠 JSdocument.write()插入 - 主内容用
<main role="main"></main>包裹，让屏幕阅读器跳过导航直读错误信息 - 加
<meta name="robots" content="noindex">，防被误抓取
跳转链接必须是纯 <a></a> 标签，禁用 JS fallback
用户在 404 页面平均停留不到 8 秒。任何 JS 加载延迟、CDN 失效、或广告拦截器屏蔽脚本，都会让“返回首页”按钮直接失灵。
- “Go Home” 按钮必须是
<a href="https://yoursite.com/">回到首页</a>，不能靠 JS 判断document.referrer或history.back() - 不要写
<a href="#" onclick="history.back()"></a>—— 点击后若 JS 未加载，链接无效 - 避免使用
window.location.replace()或fetch()上报错误，这些在弱网或拦截环境下极易失败
最常被忽略的点：本地双击打开 404.html 永远是 200 OK，根本测不了真实行为。必须用 npx serve 启本地服务，或部署后通过真实 URL 访问不存在路径来验证状态码和资源加载是否正常。
