404页面是否显示不由本地404.html文件决定，而由服务器或托管平台配置控制；本地双击打开无法触发HTTP状态码；GitHub Pages需根目录404.html，Netlify支持\_redirects，Vercel需vercel.json配置。
404页面不是HTML文件名决定的
浏览器访问一个不存在的路径（比如 /aboutt.html）时，是否显示你的“404页面”，**不由你本地的 404.html 文件是否存在决定**，而由服务器配置或托管平台规则控制。你在本地双击打开 index.html，然后手动改地址栏为 http://localhost:8000/xxx，根本不会触发 404 页面——因为没走 Web 服务器，连 HTTP 状态码都发不出来。
静态托管平台（如 GitHub Pages、Vercel、Netlify）怎么加 404 页面
这些平台支持约定式 404 页面，但规则各不相同：
-
GitHub Pages：必须把自定义页面命名为
404.html，放在仓库根目录（和index.html同级），且路径必须是/404.html；它不会执行 JavaScript 路由（如 React Router 的BrowserRouter），所以单页应用要额外配置404.html回退到index.html -
Netlify：识别
404.html，也支持在_redirects文件里写/* /404.html 404；更推荐用后者，能确保所有未命中路径都返回 404 状态码（而不仅是渲染页面） -
Vercel：默认不自动识别
404.html；需在vercel.json中显式配置：{"rewrites": [{"source": "/(.*)", "destination": "/404.html"}]}，但这会覆盖所有路径——实际应配合routes或使用notFound: true（Next.js 场景）
纯 HTML 页面如何让 404 页面看起来“像真的”
即使没有后端，也能让 404.html 更友好，关键是两点：状态码靠服务器返回，视觉靠你写清楚。别指望用 window.location.href = '404.html' 模拟——那只是跳转，HTTP 状态仍是 200。
- 页面顶部加清晰标题：
<h1>404 Not Found</h1>，别只写“页面走丢了” - 提供返回入口：
<a href="/">← 返回首页</a>，避免用户卡死 - 可加简单样式避免裸奔：内联
<style>控制字体、居中、颜色，别依赖外部 CSS（可能 404） - 如果用了前端路由（如 Vue Router 的
history模式），404.html必须包含重定向逻辑：<script>if (window.location.pathname !== '/404.html') { window.location.href = '/'; }</script>
自己搭本地服务器测试 404 页面
开发阶段验证是否生效，不能靠双击打开，得起一个最小 HTTP 服务：
立即学习“前端免费学习笔记（深入）”；
- Node.js 用户：全局装
serve，运行npx serve -s .（-s表示单页应用模式，会把所有路径 fallback 到index.html；如需真实 404，去掉该参数并确保有404.html） - Python 3 用户：终端进项目目录，运行
python3 -m http.server 8000——但注意，这个服务器**不支持自定义 404 页面**，所有缺失路径都返回 404 状态码 + 默认文本，无法渲染你的404.html - 真正需要完整控制？用
lite-server或live-server，它们支持--404=404.html参数
最易被忽略的一点：很多教程让你在 404.html 里写 <meta http-equiv="refresh" content="3;url=/">，这不仅 UX 差，还可能被搜索引擎当成软重定向，稀释权重。真要跳转，用 JS 控制更可控，且留出取消机会。
