必须真实返回404状态码,否则搜索引擎误收录、用户无法识别死链;需通过HTTP服务(如npx serve)或curl -I验证响应头,404.html须小写、置于根目录,title和h1含“404”,main/role="main"保障可访问性,CSS内联、禁用JS跳转与外部资源。

不能只写一个 404.html 文件就完事——服务器必须真实返回 404 Not Found 状态码,否则搜索引擎当普通页面收录,用户刷新也得不到重试提示。
怎么确认你的 404 页面真返回了 404 状态码
本地双击打开 404.html 完全无效,file:// 协议压根没有 HTTP 状态码。必须走真实 HTTP 服务验证:
- 用
npx serve -s或python3 -m http.server 8000启服务,访问http://localhost:8000/xxx-abc123 - 打开 DevTools → Network → 找该请求 → 看 Response Headers 里
Status是否为404 Not Found - 命令行更准:
curl -I https://yoursite.com/nonexistent,第一行必须是HTTP/1.1 404 Not Found
404.html 必须放哪、叫什么、怎么写结构
文件名必须是纯小写 404.html,且放在网站根目录(跟 index.html 同级)。任何变体如 404.htm、pages/404.html、404.HTML 都不会被识别。
-
<title></title>必须含 “404”,例如<title>404 - 页面未找到</title> -
<h1></h1>必须直写 “404 Not Found” 或 “页面未找到(404)”,不能是图片、SVG 文本或 JS 渲染内容 - 主内容用
<main></main>包裹,或加role="main",让屏幕阅读器跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">,防止被搜索引擎误收录
为什么所有 CSS 必须内联、禁用外部资源
404 页面可能出现在资源路径错误时(比如 /assets/main.css 本身 404),若再引用外部样式或脚本,会触发更多失败请求,拖慢渲染甚至白屏。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记(深入)”;
- CSS 必须写在
<style></style>标签里,控制在 1KB 以内;禁用<link rel="stylesheet"> - 字体优先用系统默认栈:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 图片用根相对路径(如
/img/404-icon.svg)或 data URL,避免相对路径在深层 URL 下失效 - 文字与背景对比度 ≥ 4.5:1,可用 webaim.org/contrastchecker 验证
哪些跳转逻辑绝对不能写
用户进 404 页面平均停留不到 8 秒,任何 JS 依赖都会导致“卡死”或降级失效:
- “返回首页”必须用
<a href="/"></a>,不是<button onclick="location.href='/'"></button> - 禁用
<meta http-equiv="refresh">和setTimeout(() => location.href = '/', 2000),它们会返回 200 状态,且对无障碍不友好 - 想显示“回到上一页”?先判断
document.referrer是否同域且非空,否则按钮href="#"并置灰 - 搜索框必须用标准
<form method="GET" action="/search"></form>,input带name="q",不拦截 submit
最易被忽略的点:SPA 应用(React/Vue)的 try_files $uri $uri/ /index.html 会把所有 404 吞掉,返回 200 的 index.html —— 必须显式排除 /404.html 路径。


















