404.html必须严格置于网站根目录且全小写命名，静态托管平台仅识别该确切路径与名称；须返回真实HTTP 404状态码，HTML中需含语义化404并内联样式，禁用跳转与外部依赖。
404.html 必须放在网站根目录且命名严格为小写
静态托管平台（GitHub Pages、Vercel、Netlify、Cloudflare Pages）只识别根目录下名为 404.html 的文件，其他任何变体都会被忽略。写成 404.htm、error404.html、pages/404.html 或 404.HTML 都无效——服务器压根不会把它当作错误页接管。
常见错误现象：文件看着放对了，但访问不存在路径时仍看到平台默认灰页（如 GitHub 的 “404 There isn’t a GitHub Pages site here.”）。
- 用
git ls-files | grep 404检查 Git 是否真提交了该文件（Windows 记事本可能悄悄加 BOM） - Jekyll 用户需在
404.html开头加---\npermalink: /404.html\npublished: false\n---，否则会被当普通页面渲染 - 确认文件名无空格、无隐藏字符，大小写全小写
HTML 结构必须含语义化标签与明确“404”文字
搜索引擎和屏幕阅读器依赖 HTML 标签结构识别页面意图。<h1>404 Not Found</h1> 不是装饰，而是可访问性与 SEO 的硬性要求。用图片、SVG 文本或 JS 动态插入“404”字样的方式不可靠。
常见错误现象：页面视觉上像 404，但 Google 把它当普通页面索引；视障用户听到的是“网页标题”，而非“404 页面未找到”。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<main></main>包裹核心内容 -
<h1></h1>是唯一且必需的顶级标题，且必须包含“404”字样（如<h1>404 Not Found</h1>） - 说明文案放进
<main></main>内的<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a> <p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur</p> </div> <a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，别用<div> 模拟段落 <li>返回操作按钮用 <code><a href="/">回到首页</a>，不用<button></button>—— 纯跳转更语义、无需 JS、禁用 JS 时仍可用 - Apache：在
.htaccess中写ErrorDocument 404 /404.html，路径必须以/开头 - Nginx：在
server块中加error_page 404 /404.html;，并确保location = /404.html存在且未被 rewrite 规则覆盖 - SPA 应用（React/Vue）要特别注意：
location / { try_files $uri $uri/ /index.html; }这类 fallback 规则会把所有 404 吞掉，返回 200 的index.html，必须排除/404.html路径 - 所有样式写在
<style></style>标签里，别依赖外部main.css - 用系统字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - 若加自动跳转，用
setTimeout(() => { location.replace('/'); }, 600);并确保动画结束后再触发 - 禁用
<meta http-equiv="refresh">—— Google 视其为软 404，影响收录
服务器必须返回真实 HTTP 404 状态码
光有 404.html 文件毫无意义。关键是要让服务器在资源不存在时，返回 HTTP 状态码 404 Not Found，同时响应体是你写的 HTML —— 而不是用 302/301 重定向过去，更不能让它悄悄变成 200 OK。
常见错误现象：浏览器控制台显示 Failed to load resource: the server responded with a status of 200 OK，但 URL 是 /xxx/xxx；Google Search Console 把你的 404.html 当普通页面收录。
纯 HTML + 内联 CSS 是最可靠的基础组合
很多 CDN（如 Cloudflare 免费版）、GitHub Pages 或 Nginx 默认配置会拦截并替换你写的 HTML，直接注入自己的错误页，导致外部 CSS/JS 不加载、JS 不执行。所以优先保证页面能独立渲染。
不要指望 Web Font 加载成功，也别依赖 JS 实现核心功能 —— 用户看到白屏或错位文字，第一反应就是关掉页面。
最容易被忽略的一点：本地双击打开 404.html 测试完全无效 —— file:// 协议下根本没有 HTTP 状态码概念。必须用本地服务（如 npx serve）预览，才能验证状态码是否真实返回 404。
