404页面必须由服务器返回真实404状态码，否则失去语义基础；需通过HTTP验证（如curl -I）、静态托管严格命名、SPA配置排除、内联CSS/字体/图片、保留语义化HTML结构、禁用自动跳转或确保合规跳转。
404页面不是“写个带404字样的HTML就行”，它必须由服务器返回真实 404 Not Found 状态码，否则搜索引擎当普通页收录、用户无法识别死链、爬虫不理解上下文——所有后续样式和文案都白搭。
怎么确认你的 404.html 真被服务器用了
本地双击打开 404.html 永远是 200 OK，毫无意义。必须走 HTTP 协议验证：
- 用
npx serve -s启服务，访问http://localhost:5000/xxx-abc，打开 DevTools → Network → 找该请求 → 看Status是否为404 Not Found - 命令行更准：
curl -I http://localhost:5000/xxx-abc，第一行必须是HTTP/1.1 404 Not Found - 静态托管（GitHub Pages / Vercel / Netlify）只认根目录下严格小写的
404.html；放成pages/404.html或404.htm就失效 - SPA 应用（React/Vue）常见陷阱：
location / { try_files $uri $uri/ /index.html; }会把所有 404 吞掉并返回200，需排除：try_files $uri $uri/ /index.html =404;
为什么 CSS 必须内联、不能用 link
404 页面可能发生在任意子路径（比如 /blog/post/2024/missing.css），此时外部资源加载路径极易错乱或失败，导致白屏或只剩文字。
- 所有样式必须写在
<style></style>里，控制在 1KB 以内 - 禁用
<link rel="stylesheet">、@import、Web Font 加载（系统字体栈更稳：font-family: -apple-system, BlinkMacSystemFont, sans-serif） - 图片优先用内联 SVG 或 data URI；若用
<img src="/img/404.svg" alt="HTML搭建404页面代码详解" >，路径必须是根相对路径（开头带/），否则深层 URL 下会 404 嵌套 - 避免背景图、阴影、flex/grid 复杂布局——IE11 和旧安卓 WebView 不一定支持，且增加渲染阻塞风险
HTML 结构里哪些标签和内容不能省
这不是审美问题，而是可访问性与 SEO 的硬性要求。屏幕阅读器、Googlebot 都靠这些结构判断页面意图。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<title></title>必须含 “404”，如<title>404 - 页面未找到</title>，否则搜索结果点进来像进了首页 -
<h1></h1>必须直写 “404 Not Found” 或 “页面未找到(404)”，不能是图片、SVG 文本或 JS 渲染内容 - 主内容必须包裹在
<main></main>或加role="main"，让辅助技术跳过导航直接读错误信息 - 返回入口必须是
<a href="/">← 返回首页</a>，不是<button onclick="..."></button>—— JS 被禁用时仍要可用 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录
自动跳转要不要加？怎么加才合规
加可以，但必须守住两个底线：用户能看清这是 404，且有手动操作入口。Google 明确把无提示自动跳转视为“软 404”，影响收录。
- 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000)—— 它们干扰后退、对无障碍不友好 - 如果加动画跳转，CSS 动画结束时间必须和 JS 跳转严格同步（如动画 0.6s，则
setTimeout(..., 600)） - 推荐用
location.replace("/")而非location.href，避免用户点「返回」又回到错误页 - 动画只是锦上添花，
<h1>404</h1> <p>找不到你要的页面</p>这类核心文案必须始终可见、无需 JS 渲染
最容易被忽略的一点：状态码和 HTML 内容必须一致。哪怕你写了最炫的 SVG 动画、最全的跳转按钮，只要服务器返回的是 200 OK，整个页面就失去了作为 404 的语义基础——它只是一个普通网页，而已。
