404.html必须严格命名为小写、置于网站根目录，服务器需返回真实http 404状态码；html中须含404、禁用跳转与外部资源，本地双击无效，须通过http环境测试。
404.html 文件放哪、叫什么、怎么写才有效
光有 HTML 文件不等于真 404 页面——它必须被服务器在资源不存在时主动返回，且响应头里得是 Status: 404 Not Found。本地双击 404.html 打开，浏览器走的是 file:// 协议，压根没 HTTP 状态码这回事，测试完全无效。
实操建议：
- 文件名必须严格为
404.html（小写，.html 后缀），放在网站根目录（如https://example.com/404.html） - GitHub Pages 只认根目录下的
404.html；若用 Jekyll，需加permalink: /404.html和published: false防止被渲染 - HTML 内容要精简：
<h1>404 Not Found</h1>必须出现，<title></title>也要含 “404” 或 “Not Found”，否则屏幕阅读器和爬虫无法识别 - 禁用
<meta http-equiv="refresh">和自动 JS 跳转（如window.location.href = '/'），它们会让状态码变成 200
Apache / Nginx 怎么让服务器真正返回 404 状态码
配置错一步，你的 404.html 就只是个普通 200 页面。关键不是“显示什么”，而是“服务器发了什么状态码”。打开 DevTools → Network → 刷新一个明显不存在的路径（如 /nonexistent-abc），看响应头里 Status 是否为 404 Not Found。
常见配置方式：
- Apache：在
.htaccess中写ErrorDocument 404 /404.html；若用 PHP 动态生成，开头必须加http_response_code(404) - Nginx：在
server块中加error_page 404 /404.html;，并确保location = /404.html存在且不触发重定向（比如别写成/404.html?ref=xxx） - 静态托管（Vercel/Netlify）：通常自动识别，但 Netlify 需确认
netlify.toml中有[[redirects]] from = "/*" to = "/404.html" status = 404
HTML 结构与样式为什么不能依赖外部资源
用户访问 /assets/main.css 失败时，可能就触发了 404；如果此时你的 404.html 还试图加载 /css/style.css 或 /js/analytics.js，会引发二次失败请求，页面可能白屏或卡住。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 所有 CSS 必须内联进
<style></style>标签，字体用系统栈：font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif - 图片优先用内联 SVG 或 Data URI，避免
<img src="icon.png"> - 不要引入第三方脚本（如 CDN 上的 analytics.js），禁用
<script></script>逻辑依赖（document.referrer可用，但别 fetch 搜索接口） - 按钮用
@#@#@#@#@#@#@#@#@#@0，不用<button onclick="..."></button>，保证无 JS 时仍可跳转
SPA 应用（React/Vue）里为什么不能只靠前端路由模拟 404
<navigate to="/404"></navigate> 或 this.$router.push('/404') 只改了 URL 和渲染内容，HTTP 状态码仍是 200。搜索引擎当它是正常页面，用户点刷新会回到这个“假 404”，点浏览器返回键也回不到上一页——因为历史记录里没有真实 404。
真正合规的做法只有两种：
- 服务端 fallback 配置（如 Nginx 的
try_files $uri $uri/ /index.html;）后，在 JS 里手动判断路径，调用history.replaceState(null, '', '/404')+ 渲染组件 —— 但这仍无法改变状态码，仅作视觉补救 - 后端动态路由兜底：Express 中用
app.use('*', (req, res) => res.status(404).sendFile('404.html'))，Next.js 则直接用pages/404.js（注意：若在getServerSideProps中抛错或重定向，可能被降级为 200）
最易被忽略的点：404 页面本身是一个“已失败”的上下文，任何额外请求（哪怕是字体、图标、统计脚本）都在放大用户的挫败感。它不该是炫技舞台，而应是轻量、可靠、一次加载就到位的逃生出口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
