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都依赖这个标签。

• 用<main>包裹错误说明和操作入口，比<section>或<div>更准确
• 返回首页用<a href="/">返回首页</a>，不用<button>——没JS也能跳，禁用JS时仍可用
• 避免内联样式或脚本，<style>写在<head>里可以，但外链styles.css更利于缓存

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

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

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 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>标签时，加display: inline-block和padding，别依赖width: 100%撑满

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

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

立即学习“前端免费学习笔记（深入）”；

• CSS写进<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页面。