错误页面HTML结构必须极简，仅用内联样式和纯HTML，不依赖外部CSS/JS、不调用fetch、省略图片或用base64、强制声明<meta charset="utf-8">，状态码与提示语严格匹配，关键样式内嵌并保障响应式与可读性，部署时需正确配置Web服务器的error_page指令并设为internal。
错误页面的 HTML 结构要极简，避免依赖外部资源
浏览器在加载失败（比如 404、500）时，可能连 CSS 或 JS 都没机会加载。所以错误页必须用纯 HTML + 内联样式，不引用 style.css 或 script.js。
常见错误是把错误页做成和主站一样复杂——带导航、轮播图、字体图标，结果服务器挂了或路径错了，页面直接白屏或样式崩坏。
- 所有样式写在
<style>标签里，不用外部link - 不调用
fetch()、XMLHttpRequest或任何 JS 逻辑（JS 可能被禁用或未加载） - 图片尽量用 base64 内联或省略；若必须用，确保路径是绝对根路径，如
/img/warning.svg，而非./img/... - 字符集声明必须有：
<meta charset="utf-8">，否则中文可能乱码
用语和状态码要匹配真实错误类型
HTTP 状态码不是摆设。用户看到 500 Internal Server Error 却提示“页面找不到了”，会误判问题根源。模板得留出状态码占位，方便后端注入。
典型做法是在 HTML 中预留 <span id="status-code">500</span> 和 <span id="status-text">Internal Server Error</span>，由服务端渲染时替换（Nginx 的 error_page、Express 的 res.status(500).send(...)、或 PHP 的 http_response_code(500)）。
立即学习“前端免费学习笔记（深入）”；
-
404：强调“地址可能输错”“链接已失效”，可加一个返回首页的<a href="/">回到首页</a> -
500：避免说“请重试”，应提示“服务器暂时无法处理请求”，并建议稍后再访问 -
403：明确告知“无权限访问”，不要暴露路径细节（如别写“禁止访问 /admin/api/logs”）
响应式与可读性不能靠媒体查询堆砌
错误页常被手机用户第一时间打开，但又不能为兼容旧浏览器塞一堆 @media。核心策略是：用 viewport + 最小字号 + 垂直居中 + 宽度自适应。
关键样式就这几行，够用且稳定：
<style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; color: #333; text-align: center; }
.container { max-width: 600px; margin: 5vh auto; padding: 2rem; }
h1 { font-size: 2.5rem; margin: 0 0 0.5rem 0; }
.code { font-weight: bold; color: #d32f2f; font-size: 3rem; }
@media (max-width: 480px) {
h1 { font-size: 2rem; }
.code { font-size: 2.2rem; }
}
</style>
- 不用
rem或em做基础字号，防止用户修改浏览器默认字号导致文字过小不可读 - 垂直居中用
5vh auto而非flex，避免 Safari 旧版 flex 行为不一致 - 颜色选高对比度组合，比如
#d32f2f（Material Red 600）配黑字，比浅灰红更易识别
部署时注意 Nginx / Apache 的 error_page 指向是否生效
写完 HTML 模板，放对位置才真正起作用。很多团队把 500.html 放在 /public 目录下，却没告诉 Web 服务器“这个文件专用于错误响应”。
Nginx 示例配置（放在 server 块内）：
error_page 404 /404.html;
error_page 500 502 503 504 /500.html;
location = /404.html {
internal;
}
location = /500.html {
internal;
}
- 必须加
internal，否则用户直接访问/500.html会暴露错误页结构（甚至泄露路径线索） - Apache 用
ErrorDocument 404 /404.html，但需确保.htaccess允许覆盖，且文件在 DocumentRoot 下 - 静态托管平台（如 Vercel、Cloudflare Pages）通常只支持
404.html，500.html不生效——这时得靠构建时生成 fallback 页面或用函数兜底
最常被忽略的是：模板里写的相对路径（如 href="index.html"）在 error_page 机制下会相对于当前 URL 路径解析，不是网站根目录。一律用绝对路径 href="/"。
