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 必须内联全部样式，且 ≤1KB

深层路径如 /blog/2023/post-abc 触发 404 时，浏览器默认会尝试从同一路径加载 /blog/2023/style.css —— 这个请求大概率也 404，导致白屏或裸文本。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 所有 CSS 必须塞进 ，删空格、注释、@import
• 字体栈写死：font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
• 图片优先用内联 SVG 或 data URL；避免 ，路径易断
• 对比度实测 ≥ 4.5:1，例如 background: #1a1a1a 配 color: #f0f0f0 可行，配 #ccc 不行

和 必须含纯文本 “404”

搜索引擎和屏幕阅读器不解析 JS 动态插入、SVG 文本或 Canvas 渲染的内容。语义缺失 = SEO 失效 + 辅助技术不可读。

• —— 缺“404”字样，爬虫当普通页收录

• 404 Not Found

  —— 必须是纯文本，不能包裹 或靠 JS document.write() 插入
• 主内容用
  包裹，让屏幕阅读器跳过导航直读错误信息
• 加 ，防被误抓取

跳转链接必须是纯 @#@#@#@#@#@#@#@#@#@0，不能靠 JS 判断 document.referrer 或 history.back()

不要写 —— 点击后若 JS 未加载，链接无效

避免使用 window.location.replace() 或 fetch() 上报错误，这些在弱网或拦截环境下极易失败

最常被忽略的点：本地双击打开 404.html 永远是 200 OK，根本测不了真实行为。必须用 npx serve 启本地服务，或部署后通过真实 URL 访问不存在路径来验证状态码和资源加载是否正常。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！