404页面需纯html+css实现，必须命名为404.html并置于根目录，用根相对路径引用资源，内联极简css，语义化结构，确保服务器返回真实404状态码。
404页面不需要JavaScript或后端逻辑
纯HTML + CSS就能搞定，浏览器在找不到资源时会自动渲染你提供的404.html（前提是服务器配置支持）。关键不是“怎么写”，而是“放哪”和“怎么让服务器认出来”。静态托管服务（如GitHub Pages、Vercel、Netlify）通常默认识别404.html放在根目录；Nginx/Apache则需显式配置error_page 404指向该文件。
- 文件名必须是
404.html（全小写），不能叫not-found.html或404.htm - 必须放在网站根目录（即跟
index.html同级），否则服务器找不到 - 不要依赖
./css/style.css这类相对路径——404可能发生在任意子路径下（比如/blog/post/xxx），应使用根相对路径：/css/style.css - 避免内联JS：部分CDN或安全策略会拦截未声明
integrity的脚本，导致页面空白
用语义化HTML结构表达“资源不存在”
别堆砌
，浏览器和爬虫都靠标签理解内容。标题用
<h1></h1>明确告诉用户这是错误页，而不是普通内容页；用<main></main>包裹主体，<a href="/"></a>提供返回首页的明确出口。无障碍访问也依赖这些基础结构。
-
<h1>404</h1>后面紧跟<p>页面未找到</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，比“Oops!”更清晰 - 链接文字写
返回首页，别写Click here——屏幕阅读器用户需要知道目标 - 加
rel="nofollow"到返回链接（非必需但推荐），避免搜索引擎误认为这是有效导航
CSS要极简且内联
外部CSS文件加载失败会让404页变白屏。把样式写进<style></style>标签里，控制在1KB以内。只保留字体、间距、居中、颜色四类规则，不用Flex/Grid复杂布局——IE11甚至旧安卓WebView都不一定支持。
<style>
body { margin: 0; font-family: -apple-system, sans-serif; text-align: center; padding: 4rem 1rem; }
h1 { font-size: 4rem; font-weight: 700; color: #333; }
p { font-size: 1.25rem; color: #666; margin: 1rem 0; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
- 字体栈里放
-apple-system和sans-serif兜底，不依赖Web Font - 用
rem单位，避免px在高DPI屏上显示过小 - 别加背景图或
@import——它们会触发额外HTTP请求，增加失败概率
别忽略HTTP状态码本身
HTML内容再漂亮，如果服务器返回的是200状态码，搜索引擎会把它当正常页面收录，后续可能影响SEO。确保服务器实际返回404 Not Found响应头，而不是“假装404”（比如用302跳转到404.html）。
- 用
curl -I https://yoursite.com/nonexistent检查响应头，确认含HTTP/2 404 - GitHub Pages自动处理；Vercel需在
vercel.json中设"rewrites": [{"source": "/(.*)", "destination": "/404.html"}]并配合headers规则 - 本地测试时，直接用
file://协议打不开404效果——必须走HTTP服务（如npx serve）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
