404.html 必须严格置于根目录、全小写命名且无BOM,服务器返回真实404状态码,HTML需硬编码“404”文字、内联CSS、禁用JS,并用根相对路径确保任意路径下稳定生效。

404.html 文件名和位置必须严格匹配平台规则
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些静态托管服务,只识别根目录下名为 404.html 的文件——全小写、无空格、无扩展名变体(如 404.htm 或 not-found.html)。放错位置(比如 /pages/404.html)或命名带大写(404.HTML),服务器根本不会接管 404 请求。
常见错误现象:git status 显示已提交,但访问不存在路径仍看到平台默认灰页。原因可能是:
- Windows 记事本保存时悄悄加了 BOM 头,用
git ls-files | grep 404确认是否真被 Git 跟踪 - Jekyll 用户没在
404.html开头加---\npermalink: /404.html\npublished: false\n---,导致被当作普通文章渲染 - macOS 本地测试不区分大小写,但部署到 Linux 服务器后
404.HTML就失效
服务器必须返回真实 404 状态码,前端无法补救
HTML 再漂亮,如果响应头里不是 HTTP/1.1 404 Not Found,对 SEO 和用户体验就是负向影响:搜索引擎会把它当正常页面收录,用户刷新也得不到重试提示。
验证方式只有两种可靠:
- 浏览器 DevTools → Network → 访问一个肯定不存在的路径(如
/xyz123)→ 查看该请求的Status字段是否为404 - 命令行执行
curl -I https://yoursite.com/xyz123,第一行必须是HTTP/1.1 404 Not Found
本地双击打开 404.html 是 file:// 协议,压根没有 HTTP 状态码,完全无效。必须用 npx serve -s 或 python3 -m http.server 8000 启服务测试。
HTML 结构要语义化且“404”文字必须硬编码在
标签里必须直接包含 “404” 或 “404 Not Found” 字样,不能靠 CSS 伪元素、SVG 文本、JS 动态插入,否则屏幕阅读器读不到,搜索引擎也识别不了意图。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
结构建议精简但完整:
-
写成,方便搜索结果识别404 - 页面未找到 - 主体用
包裹,或加role="main",让辅助技术跳过导航直读错误信息 - 提供明确出口:
@#@#@#@#@#@#@#@#@#@0,不用或 JS 跳转 - 加
,避免被搜索引擎误收录
CSS 必须内联,禁用外部资源和 JavaScript
404 页面加载失败的最常见原因,是依赖的外部 CSS、JS 或图片路径出错。深层 URL(如 /blog/post/xxx)下相对路径会失效,CDN 挂掉或安全策略拦截也会导致白屏。
实操底线:
- CSS 全部写进
标签,控制在 1KB 以内;禁用 - 所有资源用根相对路径:
/css/style.css、/img/404-icon.svg,别用./img/或../img/ - 禁用
<script></script>标签,包括分析脚本、灯光开关交互逻辑、document.referrer判断等——用户平均停留不到 8 秒,JS 加载失败就卡死 - 字体栈用
-apple-system, sans-serif,不引入 Web Font;单位优先用rem,避免高 DPI 屏显示异常
真正难的不是写 HTML,而是确保它在任意路径、任意网络条件下,都能以 404 状态码稳定呈现——每个环节都可能断链,得一个个堵住。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










