404.html必须严格小写并置于根目录，github pages等平台仅识别该命名；需返回真实http 404状态码，html中须含404且资源内联，禁用js跳转与外部请求。
404.html 文件必须严格命名为小写并放根目录
GitHub Pages、Netlify、Vercel、Cloudflare Pages 这些平台只识别 404.html 这个确切文件名，且必须位于项目根目录（和 index.html 同级）。写成 404.htm、error-404.html、/pages/404.html 或 404.HTML 都不会生效。
常见错误现象：上传了页面，但访问不存在路径时仍看到平台默认灰页（如 GitHub 的 “There isn’t a GitHub Pages site here.”）。
- 用
git ls-files | grep 404确认 Git 已提交该文件（Windows 记事本可能加 BOM 导致解析失败） - Jekyll 用户需在
404.html开头加---\npermalink: /404.html\npublished: false\n---，否则会被当作普通页面渲染 - 文件名不能带空格、中文、隐藏字符；大小写敏感，
404.HTML≠404.html
服务器必须返回真实 404 状态码，不能跳转
光有 404.html 文件毫无意义。关键在于服务器是否在资源不存在时，返回 HTTP 404 Not Found 状态码，同时响应体是你的 HTML —— 而不是用 302 重定向过去，更不能悄悄变成 200 OK。
常见错误现象：Network 面板里看到状态码是 200 OK，或 Google Search Console 把你的 404.html 当作普通页面收录。
- Apache：
.htaccess中写ErrorDocument 404 /404.html（注意开头斜杠，不能换行或加分号） - Nginx：server 块中加
error_page 404 /404.html;，并确保有location = /404.html { }允许直接访问，否则会被try_files $uri $uri/ /index.html;拦截 - SPA 应用（React/Vue）：路由 fallback 规则必须排除
/404.html，否则所有 404 都被吞成 200 的index.html
HTML 结构必须语义化且含明确“404”文字
搜索引擎和屏幕阅读器靠标签结构识别页面意图。<h1>404 Not Found</h1> 不只是样式需要，更是可访问性和 SEO 的硬性要求。用图片、SVG 文本或 JS 动态插入“404”都不可靠。
常见错误现象：页面看着像 404，但视障用户听到的是“网页标题”，而非“404 页面未找到”；Google 把它当普通页面索引。
- 必须用
<main></main>包裹核心内容 -
<h1></h1>是唯一且必需的顶级标题，内容必须包含 “404” 或 “Not Found” 字样 - 禁用
<meta http-equiv="refresh">和window.location.href = '/'类自动跳转——这会让状态码变成 200，破坏 SEO - 导航按钮用
@#@#@#@#@#@#@#@#@#@0，不用<button onclick="..."></button>，保证禁用 JS 时仍可用
所有样式和资源必须内联，禁用外部请求
404 页面可能出现在资源路径错误时（比如 /assets/main.css 本身 404），若页面再引用外部 CSS/JS 或图片，会触发更多失败请求，拖慢渲染甚至白屏。
常见错误现象：打开一个不存在路径后，页面空白几秒才显示，或部分样式丢失。
- CSS 必须用
<style></style>内联，字体优先用系统栈：font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 图片用内联 SVG 或 Data URI，避免
<img src="404-icon.png"> - 不依赖 JavaScript 交互；搜索框等纯前端逻辑可保留，但不能靠
fetch或非history.back()的 API - 测试必须走真实 HTTP 请求（如
http://localhost:8000/asdf123），双击打开file://协议无效
最易被忽略的点是：状态码是否真为 404。很多配置看似正确，但 Network 面板里一查，状态码仍是 200 或 302 —— 这说明服务器根本没把你的 404.html 当作错误响应体，而只是把它当普通文件返回了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
