404.html需放根目录且命名严格小写，静态托管平台（如GitHub Pages）自动识别，但必须返回真实HTTP 404状态码；Nginx/Apache须配置error_page，本地file://协议无法触发；禁用外部依赖，内联样式与脚本，并用curl -I验证响应头。
直接放一个 404.html 文件到网站根目录，大多数静态托管服务（如 GitHub Pages、Vercel、Cloudflare Pages、MCP）会自动识别并响应 404 状态，但前提是服务器配置没覆盖或干扰它——这点很多人忽略，结果页面写了却从不显示。
为什么写了 404.html 却压根不触发
根本原因不是 HTML 写得不对，而是 HTTP 状态码没真正返回 404。浏览器只看响应头里的 Status: 404 Not Found，不是看文件名。
- GitHub Pages 默认支持：只要文件名是
404.html且放在仓库根目录，访问任意不存在路径就会返回该页 + 正确状态码 - Vercel / Netlify 需要显式配置：在
vercel.json或_redirects里加 fallback 规则，否则默认返回平台自己的 404 页 - 自己用 Nginx / Apache 托管时：必须在配置中指定
error_page 404 /404.html，且确保/404.html路径可被匿名访问（不能被 location 块拦截） - 本地用
file://协议打开测试：永远看不到效果——HTTP 状态码只存在于服务器响应中，本地双击 HTML 不走 HTTP 协议
404 页面里不能依赖哪些东西
它本质是“兜底页”，加载环境不可控，所以所有外部依赖都可能失败。
- 别用 CDN 上的字体或 JS：
https://fonts.googleapis.com/...或https://unpkg.com/...在网络异常或跨域策略收紧时会白屏或报错 - 避免调用 API：
fetch('/api/hit')这类埋点在 404 场景下意义不大，还可能因 CORS 或超时拖慢渲染 - 不要依赖 localStorage 或 IndexedDB：部分浏览器在非 200 页面会限制存储访问，尤其 Safari 的隐私模式
- 内联关键 CSS 和 JS：把样式和跳转逻辑写进
<style></style>和<script></script>标签里，确保离线也能跑
最简可用的 404 页面结构怎么写
不需要动画、不用框架，三段式足够：状态提示 + 可靠导航 + 搜索入口。重点是让访客 2 秒内知道“这是 404”且有路可退。
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面没找到｜404</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; margin: 8vh auto; max-width: 600px; padding: 0 1rem; }
h1 { font-size: 2.5rem; color: #e74c3c; }
.back-home { display: inline-block; margin-top: 1.5rem; padding: 0.5rem 1.2rem; background: #3498db; color: white; text-decoration: none; border-radius: 4px; }
</style>
</head>
<body>
<h1>404</h1>
<p>你访问的页面不存在了</p>
<p><a href="/" class="back-home">回到首页</a></p>
<script>
// 防止用户误粘贴带 trailing slash 的 URL（如 /about/ → /about）
if (window.location.pathname.endsWith('/') && window.location.pathname !== '/') {
const cleanPath = window.location.pathname.slice(0, -1);
history.replaceState(null, '', cleanPath);
}
</script>
</body>
</html>
这个版本没用任何外部资源，history.replaceState 是为了修正常见路径错误，避免用户刷新后卡在无效斜杠结尾地址上。
部署后必须验证的三个点
写完上传不等于生效，必须手动确认这三项：
- 用 curl 测状态码：
curl -I https://your-site.com/nonexistent-path，看返回头是否含HTTP/2 404 - 在浏览器打开一个明显不存在的路径（如
/this-page-does-not-exist），检查 Network 面板里响应状态是否为 404，且预览内容是你写的 HTML - 禁用 JavaScript 后再试一次：确保核心信息（文字、链接）仍可读可点，不能依赖 JS 渲染主体内容
很多团队上线后才发现 404 页面其实是 200 状态码返回的“伪 404”，搜索引擎会把它当正常页面收录，反而稀释主站权重——这事没法靠肉眼判断，必须看响应头。
