404页面必须返回真实404状态码,验证需检查状态码、响应头Content-Type及内容一致性;文件须为根目录下严格小写的404.html;HTML须内联CSS、语义化结构且禁用JS跳转。

404 页面不是“写个提示就行”,它必须被服务器返回真实 404 Not Found 状态码,否则搜索引擎当普通页收录,用户刷新也得不到正确反馈。
如何验证 404 页面是否真正生效
别信页面上写的“404”文字,只看三样东西:状态码、响应头、内容是否一致。
- 在 Chrome DevTools 的
Network标签页里访问一个明显不存在的路径(比如/xyz-abc),确认Status是404 Not Found - 检查响应头中是否有
Content-Type: text/html,没有就可能被当成纯文本或下载 - 用
curl -I https://yoursite.com/xyz-abc看第一行是不是HTTP/1.1 404 Not Found - 本地双击打开
404.html文件永远是200 OK,毫无验证价值——必须走 HTTP 协议
文件命名与存放位置的硬性要求
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认一个名字、一个位置。
- 文件名必须是严格小写的
404.html,不能是404.htm、error404.html、404.HTML或带空格 - 必须放在网站根目录(和
index.html同级),不能在/pages/404.html或/errors/下 - Git 用户建议执行
git ls-files | grep 404,确认仓库里真提交了这个文件(Windows 记事本可能加 BOM 导致失效) - Jekyll 用户需在
404.html开头加 YAML front matter:---\npermalink: /404.html\npublished: false\n---
HTML 结构与内联 CSS 的底线规则
所有样式必须塞进 <style></style> 标签,不能外链;结构必须语义化,禁用 JS 依赖。
生成可在 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”,不能用图片、SVG 文本或 JS 插入 - 核心内容用
<main></main>包裹,加role="main"提升可访问性 - CSS 内联且 ≤1KB:删空格、注释、
@import,字体栈用-apple-system, sans-serif,不用 Web Font - 禁用
<meta http-equiv="refresh">和自动跳转 JS,它们会让状态码变成200
服务器配置常见踩坑点
静态托管平台通常默认支持,但自建服务器或 SPA 应用极易出错。
- Apache:在
.htaccess中写ErrorDocument 404 /404.html,路径必须以/开头,不能是./404.html - Nginx:在
server块中加error_page 404 /404.html;,并确保location = /404.html存在且未被try_files规则覆盖 - React/Vue SPA:
location / { try_files $uri $uri/ /index.html; }会吞掉所有 404,必须排除/404.html路径 - Node.js/Express:末尾路由必须显式调用
res.status(404).sendFile(...),不能只res.sendFile
最常被忽略的是:状态码由服务器决定,前端无法伪造;所有“看起来像 404”的页面,只要 Network 里不是 404 Not Found,就不算真正生效。


















