404页面必须由服务器真实返回404状态码，否则搜索引擎误收录、用户无反馈；需用curl -I或DevTools Network面板验证状态码，GitHub Pages要求根目录小写404.html，Nginx需防try_files覆盖，HTML须含含“404”的title/h1/main，CSS内联且≤1KB，禁用JS跳转与meta刷新。
404页面不是“写个提示就行”，它必须被服务器真实返回 404 Not Found 状态码，否则搜索引擎当普通页收录、用户刷新没反馈、跳转按钮再漂亮也白搭。
怎么确认你的 404.html 真被服务器用了
本地双击打开 404.html 永远是 200 OK——file:// 协议压根没有 HTTP 状态码。验证只看两点：
- 用
curl -I https://yoursite.com/xxx-abc，第一行必须是HTTP/1.1 404 Not Found - 在 Chrome DevTools → Network 面板里访问一个明显不存在的路径（如
/nonexistent），检查该请求的 Status 是否为404 Not Found - GitHub Pages 必须严格命名为小写
404.html并放在仓库根目录；写成404.htm或pages/404.html都不生效 - Nginx 用户要防重写规则覆盖：如果用了
try_files $uri $uri/ /index.html;（常见于 SPA），得加例外，否则所有 404 都被 fallback 成200的首页
HTML结构里哪些标签和文字不能省
搜索引擎和屏幕阅读器靠标签判断这是错误页，不是普通内容。硬性要求有三：
-
404 - 页面未找到 -
必须直写 “404 Not Found” 或 “页面未找到（404）”，不能是图片、SVG 文本或 JS 插入 - 核心内容必须包在
里（可加role="main"），让辅助技术跳过导航直接读错误信息 - 返回链接用
@#@#@#@#@#@#@#@#@#@0，别用——JS 关闭时就失效
为什么 CSS 必须内联且 ≤1KB
404 页面可能出现在资源路径出错时（比如 /css/style.css 本身 404），若再引用外部样式，极易白屏或只剩裸文字。实操要点：
- 所有样式塞进
，删空格、注释、@import，控制在 1KB 内 - 字体栈用系统默认：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 避免 Flex/Grid 布局——旧安卓 WebView 或 IE11 不一定支持，用
display: flex; height: 100vh;居中足够稳 - 文字与背景对比度 ≥ 4.5:1，可用 webaim.org/contrastchecker 验证
搜索框和“回到上一页”怎么写才可靠
用户平均在 404 页面停留不到 8 秒，任何 JS 依赖都可能降级失败。所以：
- 搜索框用标准
，，回车即提交，无需 JS - “回到上一页”按钮需先判断：
document.referrer同域且非空才显示，否则 href="#" 并置灰；别直接写history.back()——Service Worker 或跨域 referrer 下会静默失败 - 禁用
和setTimeout(() => location.href = '/', 2000)，它们会让状态码变成200，Google 明确归类为“软 404”
最常被忽略的点：状态码对不上，其他全白做；文件名大小写不对，平台直接无视；CSS 外链一断，页面变白纸。动手前先 curl 验证，比调样式重要十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
