404页面必须由服务器返回真实HTTP 404状态码，且文件名严格为根目录下小写的404.html；Nginx/Apache需避免SPA fallback拦截，静态托管平台须确认文件正确提交；HTML须含语义化结构、可访问性标签、内联极简CSS及系统字体；搜索框需无JS可用并符合视觉逻辑。
404 页面不是“写个提示页就完事”，它必须由服务器返回真实的 HTTP 404 状态码，否则搜索引擎当普通页面收录，用户刷新也得不到正确反馈——本地双击打开 404.html 永远是 200 OK，毫无意义。
为什么你的 404.html 根本没被服务器识别
静态托管（GitHub Pages、Vercel、Netlify）只认根目录下严格小写的 404.html；写成 404.htm、pages/404.html、404.HTML 或带 BOM 的文件，全都不生效。Nginx/Apache 配置错误更常见：error_page 404 /404.html 写对了，但被 try_files $uri $uri/ /index.html 这类 SPA fallback 规则提前拦截，结果返回的是 200 的首页。
- GitHub Pages：用
git ls-files | grep 404确认文件已提交且无隐藏字符 - Nginx：必须加
location = /404.html { internal; }或确保该路径不被 rewrite 覆盖 - Apache：
ErrorDocument 404 /404.html中的路径必须以/开头，不能是./404.html - Jekyll 用户：需在
404.html开头加---\npermalink: /404.html\npublished: false\n---
HTML 结构必须满足语义与可访问性底线
里没 “404” 字样，搜索引擎和屏幕阅读器就无法识别这是错误页；用 SVG、图片或 JS 插入文字，等于放弃可访问性。所有核心内容必须包裹在 里，让辅助技术跳过导航直读错误信息。
-
404 - 页面未找到 -
404 Not Found
- 返回首页用
@#@#@#@#@#@#@#@#@#@0，别用 - 禁用
和自动跳转 JS，它们会让状态码变成200
CSS 必须内联且极简，字体用系统栈
外链 CSS 加载失败 → 白屏。移动端弱网下资源超时概率高，所有样式必须塞进 标签，控制在 1KB 以内（删空格、注释、@import）。字体必须用系统默认栈，比如 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif，不依赖 Web Font。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
rem单位，避免px在高 DPI 屏上过小 - 背景图、
@keyframes动画、阴影都可能触发额外请求或兼容问题，非必要不加 - 对比度必须 ≥ 4.5:1，深灰文字配浅灰背景（如
#666on#eee）不合格 - 居中用
display: flex; height: 100vh;，比position: absolute更稳
搜索框和跳转逻辑必须无 JS 可用
所谓“站内搜索”，只是把用户输入转发到 /search?q=xxx，不需要 fetch、history 或拦截表单。标准 就够了，input 必须带 name="q"，否则提交后 URL 里没参数。
- 搜索框放错误说明下方、返回首页上方，视觉流是：错误 → 解决入口 → 备选路径
- 给 input 加
autofocus，多数浏览器支持；不用额外 JS 实现回车提交 - 按钮文字写“找找相关内容”，别写“搜索”——更符合 404 场景的心理预期
- 如果用了 Service Worker，检查它是否缓存了
404.html并覆盖了跳转逻辑
真正难的不是写 HTML，而是让服务器在每一个不存在的路径上，精准返回这个 HTML + 404 Not Found 状态码——配置错一条规则，前面所有结构、样式、文案都白做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
