最可靠方案是将404.html放根目录并配置服务器返回真实404状态码；apache用errordocument，nginx用error_page，vercel/netlify自动识别但需命名规范，github pages仅支持根目录404.html且jekyll需禁用渲染。
直接放一个 404.html 文件到网站根目录，再确保服务器返回真实 404 Not Found 状态码——这是唯一能被搜索引擎、爬虫和辅助技术识别的方案。其他所有“看起来像404”的做法（比如 JS 跳转、meta 刷新、双击打开）都不算数。
404.html 文件必须放对位置且命名严格规范
静态托管平台只认一个路径和文件名：/404.html，小写、无空格、无 BOM、无重定向别名。
- GitHub Pages、Vercel、Netlify、Cloudflare Pages 都只扫描项目根目录下的
404.html；写成404.htm、pages/404.html、ERROR404.HTML全部失效 - Git 提交前用
git ls-files | grep 404确认文件真在索引里（Windows 记事本可能偷偷加 BOM，导致渲染异常） - Jekyll 用户必须在
404.html开头加 front matter：---\npermalink: /404.html\npublished: false\n---，否则会被当成普通页面生成
服务器必须返回真实 404 状态码，不能是 200 或 302
本地双击打开 404.html 永远看不到效果——file:// 协议根本没有 HTTP 状态码。必须用 HTTP 服务验证。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 本地测试：运行
npx serve -s .（注意-s会 fallback 到index.html，要测真实 404 得去掉该参数，或手动访问一个不存在路径如/xxx） - 线上验证：用
curl -I https://yoursite.com/nonexistent，第一行必须是HTTP/1.1 404 Not Found - 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，必须显式排除/404.html
HTML 结构里这四样不能少
404.html 不是炫技场，而是语义锚点——屏幕阅读器靠它判断上下文，Google 靠它决定是否索引。
-
<title></title>必须含 “404” 字样，例如<title>404 - 页面未找到</title>，否则搜索结果里点进来用户以为进了首页 -
<h1></h1>必须直给事实，如<h1>404 Not Found</h1>，禁用图片/SVG 文本替代，也不要用 JS 动态插入 - 主内容区必须用
<main></main>包裹，或加role="main"，让辅助技术跳过导航直接读错误信息 - 加
<meta name="robots" content="noindex">，防止被搜索引擎误收录为普通页面
CSS 和跳转必须零依赖、高可用
404 是异常路径，任何外部资源加载失败都可能导致页面空白或不可操作。
- CSS 最好内联进
<style></style>，控制在 1KB 内；避免外链styles.css失败后只剩白屏 - 所有按钮用
@#@#@#@#@#@#@#@#@#@0，不是<button onclick="location.href='/'"></button>—— 禁用 JS 时仍要可用 - 想加“回到上一页”？先判断
document.referrer是否同域且非空，否则按钮href设为#并置灰 - 文字与背景对比度 ≥ 4.5:1（比如
#333配#fff可以，配#eee不行），用 webaim.org/contrastchecker 验证
最容易被忽略的是：状态码永远由服务器决定，HTML 文件只是响应体。哪怕你把页面做得再漂亮，只要服务器没配 error_page 或 ErrorDocument，用户看到的仍是平台默认页，Google 也会把它当普通页面收录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
