404.html必须放在根目录且严格命名为小写,github pages、vercel、netlify、cloudflare pages仅识别该文件名;需确保服务器返回真实http 404状态码而非200或302,spa应用须排除404.html路径避免路由fallback覆盖,html结构中必须用明确包含“404”字样以满足seo与可访问性要求。

404.html 文件必须放根目录,且命名严格为小写
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些静态托管平台,只认 404.html 这个确切文件名,放在仓库或项目根目录下。写成 404.htm、error404.html、pages/404.html 或 404.HTML 都会失效——服务器根本不会把它当作错误页接管。
常见错误现象:404.html 放对了位置,但访问一个不存在路径时,仍看到平台默认的灰色错误页(比如 GitHub 的 “404 There isn’t a GitHub Pages site here.”)。
- 确认文件名是纯小写
404.html,无空格、无隐藏字符 - 用
git ls-files | grep 404检查 Git 是否真提交了该文件(Windows 记事本有时会加 BOM) - Jekyll 用户需在
404.html开头加---\npermalink: /404.html\npublished: false\n---,否则会被渲染为普通页面
服务器配置必须返回真实 404 状态码,不能跳转
光有 404.html 文件毫无意义。关键是要让服务器在资源不存在时,返回 HTTP 状态码 404 Not Found,同时响应体是你写的 HTML —— 而不是用 302 或 301 重定向过去,更不能让它悄悄变成 200 OK。
常见错误现象:浏览器控制台显示 Failed to load resource: the server responded with a status of 200 OK,但 URL 是 /xxx/xxx;或者 Google Search Console 把你的 404.html 当作普通页面收录。
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
- Apache:在
.htaccess中写ErrorDocument 404 /404.html,路径必须以/开头 - Nginx:在
server块中加error_page 404 /404.html;,并确保location = /404.html存在且未被 rewrite 规则覆盖 - SPA 应用(如 React/Vue)要特别注意:
location / { try_files $uri $uri/ /index.html; }这类 fallback 规则会把所有 404 吞掉,返回200的index.html,必须排除404.html路径
HTML 结构必须语义化,里得有“404”文字
搜索引擎和屏幕阅读器靠标签结构识别页面意图。<h1>404 Not Found</h1> 不只是样式需要,更是可访问性和 SEO 的硬性要求。用图片、SVG 文本或 JS 动态插入“404”字样的方式,都不可靠。
常见错误现象:页面看着像 404,但 Google 把它当普通页面索引;视障用户听到的是“网页标题”,而非“404 页面未找到”。
- 必须用
<main></main>包裹核心内容,<h1></h1>是唯一且必需的顶级标题 -
<title></title>和<h1></h1>都必须包含 “404”、“Not Found” 或 “页面未找到” 字样 - 导航按钮用
@#@#@#@#@#@#@#@#@#@0,别用<button onclick="location.href='/'"></button>—— JS 可能被拦截或禁用 - 避免在
里写<meta http-equiv="refresh">,这会让状态码变成200
本地测试必须走 HTTP 协议,双击打开无效
用文件管理器双击打开 404.html,浏览器地址栏是 file:// 协议 —— 此时根本没有 HTTP 状态码概念,也测不出任何配置是否生效。你看到的只是个普通 HTML 文件。
验证是否真生效,唯一可靠方式是启动一个本地 HTTP 服务,再手动访问一个不存在的路径(如 http://localhost:5000/this-path-does-not-exist)。
- 推荐命令:
npx serve -s(自动找404.html)、python3 -m http.server(需自己配 Nginx/Apache 规则) - 打开浏览器开发者工具 → Network 标签页 → 刷新后看第一个请求的状态码是不是
404 - 检查 Response Headers 里有没有
Status: 404 Not Found,而不是200 OK或缺失 - 如果用了 CDN(如 Cloudflare 免费版),它可能拦截并替换你的 HTML,此时要关掉“Always Online”或改用 Pro 版
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










