响应式布局应优先用flex+100vh而非absolute，因absolute易致父容器塌陷、内容跑出视口，尤其Safari iOS；flex+100vh垂直居中稳定、无重排、全现代浏览器兼容。
响应式布局必须用 flex + 100vh，别碰 position: absolute
移动端弱网下，position: absolute 容易因父容器高度塌陷导致内容跑出视口，尤其在 Safari iOS 上更明显。用 display: flex 配合 height: 100vh 是目前最稳的垂直居中方案，不依赖 JS、不触发重排、兼容所有现代浏览器（包括 iOS 14+）。
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; }- 容器加
max-width: 600px和padding: 2rem，避免小屏文字挤成一团 - 禁用
transform: translateY(-50%)—— 屏幕阅读器可能跳过它包裹的内容 - 按钮用
inline-flex而非block，防止点击区域被截断
CSS 必须内联且 ≤1KB，否则 404 页面自己会触发二次 404
当用户访问 /blog/2023/post-abc 时触发 404，浏览器默认会从同一路径加载 /blog/2023/style.css —— 这个请求大概率也 404。外链 CSS 失败 = 白屏或裸文本。
- 把全部样式塞进
，删空格、注释、@import - 字体栈写死：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - 对比度实测 ≥ 4.5:1，比如
background: #1a1a1a配color: #f0f0f0可行，配#ccc不行 - 图片全用内联 SVG 或 data URL，
h1 和 title 必须含 “404” 文字，不能靠 JS 或图片渲染
搜索引擎和屏幕阅读器不解析视觉样式或 JS 动态内容。若 是 SVG 文本、Canvas 绘制或 document.write() 插入，辅助技术根本读不到错误类型。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
404 - 页面未找到 -
404 Not Found
- 主内容用
包裹，让屏幕阅读器跳过导航直读错误信息 - 加
，防被误抓取
跳转链接必须是纯 a 标签，JS 判断 referrer 是高危操作
用户进 404 页面平均停留不到 8 秒，任何 JS 加载延迟、CDN 失效、或脚本被广告拦截器屏蔽，都会让“返回上一页”按钮直接失灵。
- 首页链接写
@#@#@#@#@#@#@#@#@#@0，不是 - “回到上一页”需先判断：
if (document.referrer && new URL(document.referrer).origin === location.origin)，否则 href 设为#并置灰 - 禁用
和setTimeout(() => location.href = '/', 2000)—— 它们会让响应状态码变成 200 - 搜索框用
，不绑 submit 事件
真正难的不是写响应式，而是让这个页面在所有异常条件下都稳：没网络、没 CDN、JS 被禁、路径嵌套三层、甚至服务器返回的是 500 却 fallback 到 404.html —— 此时只有内联的几百字节 HTML + CSS 是用户能抓住的唯一确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
