404页面必须返回真实http 404状态码，而非仅显示“404”文字；需通过本地服务或部署测试，正确配置服务器（如apache、nginx或静态托管平台），确保html语义化、路径准确、资源内联或相对引用，并避免js依赖。

404页面必须返回真实HTTP状态码，否则就不是404

浏览器和搜索引擎只认HTTP响应头里的404 Not Found，不是页面里写了“404”就行。本地双击打开404.html永远是200 OK，必须用本地服务（如npx serve）或部署后测试。

• Apache：在.htaccess加ErrorDocument 404 /404.html
• Nginx：配置error_page 404 /404.html，并确保该路径返回真实404（加add_header Status 404;或用try_files）
• 静态托管（Vercel/Cloudflare Pages/GitHub Pages）：只认根目录下的404.html，放错位置（比如/pages/404.html）就失效

HTML结构要语义化，别堆

<h1>404 Not Found</h1>必须存在且文字明确，不能用图片替代，也不能藏在<div>里。屏幕阅读器和SEO都依赖这个标签。 <ul><li>用<code><main></main>包裹错误说明和操作入口，比<section></section>或<div>更准确 <li>返回首页用<code>@#@#@#@#@#@#@#@#@#@0，不用<button></button>——没JS也能跳，禁用JS时仍可用

避免内联样式或脚本，<style></style>写在里可以，但外链styles.css更利于缓存

纯CSS实现居中+适配，不用JS也不用框架

垂直水平居中靠display: flex最稳，vh单位比px更可靠；小屏下字号和间距要放大，不是缩小。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• body { margin: 0; display: flex; min-height: 100vh; align-items: center; justify-content: center; }
• .container { text-align: center; max-width: 600px; padding: 2rem; }
• 字体至少1.5rem起，color: #333配background: #fff保证对比度，别用浅灰字配白底
• 按钮用<a></a>标签时，加display: inline-block和padding，别依赖width: 100%撑满

资源路径写死就容易404，base64或相对路径更安全

页面本身是404，再让里面的图片/CSS也404，用户看到的就是空白+报错，体验直接崩。

• CSS写进<style></style>里，或确保link href="styles.css"路径正确（推荐根相对路径：/styles.css）
• 图标用SVG内联或base64，比如<img src="data:image/svg+xml;base64,PHN2ZyB3...">，省去额外请求
• 所有路径检查大小写——Linux服务器区分Img和img，404.html和404.HTML不是同一个文件
• 别在HTML里写fetch()或XMLHttpRequest——页面出错时JS可能根本没加载，还可能触发二次错误

实际部署时最容易被忽略的，是状态码是否真发出去了——光有404.html文件没用，服务器没配对，它就只是个普通200页面。