本地双击html文件不会触发真实404，因file://协议无http状态码；必须用本地http服务（如npx serve）测试，静态托管平台对404页面路径有严格约定，离线404页需内联资源、保障可访问性。
本地双击打开HTML文件时根本不会触发404
浏览器用 file:// 协议打开本地 HTML，压根没有 HTTP 状态码概念。所谓“404”只是服务器对未命中路径的响应，本地文件系统不参与这个过程。你看到的任何“404 页面”，都是前端 JS 模拟出来的假状态，对 SEO、爬虫、浏览器重试机制完全无效。
实操建议：
- 必须用本地 HTTP 服务测试：比如
npx serve或python3 -m http.server 8000，再访问http://localhost:8000/nonexistent - 用
curl -I http://localhost:8000/nonexistent检查响应头第一行是否为HTTP/1.1 404 Not Found - 如果返回
200，说明你还没配置服务器或托管平台，当前所有“404 页面”都只是装饰品
静态托管平台（GitHub Pages / Netlify / Vercel）的404路径规则不同
这些平台不自动识别任意命名的错误页，必须按约定路径部署，否则即使文件存在，也只会返回默认 404 或 200 状态。
常见配置差异：
-
GitHub Pages：必须把文件命名为
404.html，放在仓库根目录（和index.html同级），且路径必须是/404.html；子路径如/pages/404.html无效 -
Netlify：支持两种方式——直接放
404.html根目录（会自动返回 404 状态），或更可靠地写_redirects文件：/* /404.html 404 -
Vercel：默认不识别
404.html；需在vercel.json中配置"errorPages": true，或用routes显式重写，例如：{"src":"/.*","dest":"/404.html","status":404}
离线应用里404页面不能依赖外部资源
用户访问一个不存在路径时，很可能已断网或资源加载失败。若你的 404.html 还引用了 /css/main.css 或 /js/app.js，就会触发二次 404，造成白屏或样式崩溃。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
必须做到：
- CSS 全部内联进
<style></style>，控制在 1KB 以内；禁用@import和外链 - 图标用内联 SVG 或 Data URI，别写
<img src="404-icon.png"> - 字体用系统默认栈：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 所有文字对比度 ≥ 4.5:1（可用 webaim.org/contrastchecker 验证）
离线场景下可访问性容易被忽略的关键点
屏幕阅读器不会主动告诉你“这是 404”，除非你明确告诉它。而很多开发者只加了视觉标题，漏掉语义层声明，导致辅助技术跳过核心错误信息。
必须补全的三项：
- 主标题用
<h1>404</h1>，并加role="heading" aria-level="1"（尤其当它不是<h1></h1>时） -
<code>404这类数字元素加aria-hidden="true"，避免读成“四零四” - 顶部加一个不可见但可朗读的提示：
<div aria-live="assertive" aria-atomic="true" class="sr-only">您请求的页面未找到</div>，配合.sr-onlyCSS 类（不用display: none）
最后提醒一句：如果你的 404 页面里有“回到上一页”按钮，请先检查 document.referrer 是否同域且非空——否则点击后可能跳到 about:blank 或报错，比不提供链接还糟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
