必须真实返回404状态码，否则页面无效；需用curl -I或Chrome Network面板验证响应头为“HTTP/1.1 404 Not Found”，并确保HTML中title和h1直写“404”、CSS内联、链接用根相对路径。
单文件 HTML 能做出全兼容的 404 页面，但前提是它必须被服务器**真实返回 404 状态码**——否则再精妙的结构、动画、搜索框都白搭，搜索引擎当它是普通页，用户也意识不到链接已失效。
怎么确认服务器真返回了 404 状态码
本地双击打开 404.html 完全无效，file:// 协议压根没有 HTTP 状态码。验证只看两点：
- 命令行执行
curl -I https://yoursite.com/xyz-abc，第一行必须是HTTP/1.1 404 Not Found - Chrome DevTools → Network → 访问一个明显不存在的路径（如
/nonexistent）→ 点开该请求 → Response Headers 中Status显示404 Not Found
常见失效场景：
- GitHub Pages：文件名必须严格为小写
404.html，且放在仓库根目录；写成404.htm或pages/404.html都不生效 - Nginx：
error_page 404 /404.html;后，必须加location = /404.html { internal; }，否则外部直连会返回 200 - SPA 应用（React/Vue）：
try_files $uri $uri/ /index.html;会吞掉所有 404，需显式排除：try_files $uri $uri/ /index.html =404;
HTML 结构必须满足可访问性与 SEO 硬要求
<h1></h1> 和 <title></title> 必须直写 “404” 字样，不能靠图片、SVG 文本或 JS 插入——否则屏幕阅读器读不出，Google 也不识别这是错误页。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<title></title>写成<title>404 - 页面未找到</title>，不能是<title>Oops!</title> -
<h1></h1>必须是纯文本，如<h1>404 Not Found</h1>，且是页面唯一<h1></h1> - 核心内容用
<main role="main"></main>包裹，让辅助技术跳过导航直读错误信息 - 返回首页用
<a href="/">← 返回首页</a>，别用<button onclick="location.href='/'"></button>—— JS 关闭时仍要可用
CSS 必须内联且 ≤1KB，禁用任何外部依赖
外链 CSS 加载失败 = 白屏。移动端弱网下资源超时概率高，所有样式必须塞进 <style></style> 标签，删空格、注释、@import，控制在 1KB 内。
- 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; - 避免 Flex/Grid 布局（IE11、旧安卓 WebView 不支持），用
display: flex; height: 100vh;居中足够稳 - 文字与背景对比度 ≥ 4.5:1（可用 webaim.org/contrastchecker 验证）
- 禁用
background-image、@font-face、data:image/svg+xml（base64 SVG 可接受，但体积敏感）
要不要加搜索框？怎么加才不翻车
可以加，但必须用纯 HTML 表单，不依赖 JS。它的作用不是“查数据库”，而是把用户输入转发到你已有的站内搜索页（如 /search?q=xxx）。
- 写法：
<form method="GET" action="/search"><input name="q" autofocus required></form> -
action必须是完整路径（如/blog/search就不能简写为search） - 不要加
onsubmit="return false"或event.preventDefault()，否则表单彻底失效 - 按钮文字别写“搜索”，推荐“找找相关内容”或“试试换个关键词”，更符合 404 场景心理
- 提交后若跳转到另一个 404，检查后端是否对
/search路径也配置了 fallback 规则
最易被忽略的一点：404 页面本身可能出现在深层路径下（如 /docs/api/v2/endpoint），所有资源引用（包括 form action、a href）必须用根相对路径（/search，不是 search 或 ../search），否则会 404 套 404。
