真正便携的网页简历需纯html+内联css，零外部依赖：图片转base64、禁用网络字体、用语义化标签（header/h1/section/h2/dl）、viewport声明、print媒体查询、避免flex布局。
为什么本地双击打不开？查这三处
常见现象：自己电脑上好好的，发给 HR 后双击打开是空白或只有文字。
-
index.html里引用了style.css或fonts.woff2，但没把它们一起发过去——必须全部塞进一个 HTML 文件里 - 用了
background-image: url("photo.jpg")，但图片没转成 base64；正确做法是：<img src="data:image/jpeg;base64,/9j/4AAQ..."> - 写了
@import url("https://fonts.googleapis.com/css2...")，离线即失效；换成系统安全字体栈：font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
怎么让一份 HTML 在手机、Chrome 打印、PDF 查看器里都靠谱？
核心是靠两段不可删的声明 + 一套克制的样式逻辑。
- 必须在
里加：<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 会缩放成小字 - 所有 CSS 必须写在
<style></style>标签内（别外链），且包含@media print规则 - 打印时最常崩的是分页和背景图：
@media print { body { background: white !important; color: black !important; } nav, .social-links { display: none; } section { break-inside: avoid; } } - 别用
flex做主布局——某些 PDF 引擎（如 wkhtmltopdf）对flex-wrap支持极差；用display: block+margin控制间距更稳
语义结构错位，ATS 和屏幕阅读器就全读歪了
招聘系统（ATS）和盲人辅助工具不是靠视觉识别内容，而是解析标签层级。用一堆 <div> 套 <code><span></span>，等于主动屏蔽自己。
- 姓名和联系方式必须包在
<header></header>里，且用<h1></h1>包姓名（<h1>张三</h1>），这是 ATS 抓取“候选人姓名”的唯一可靠信号 - 每块内容（教育、工作、技能）必须用
<section></section>，标题用<h2></h2>；内部条目用<dl> <dt></dt> <dd></dd> </dl>而非<table> 或浮动 <code><div> <li>邮箱和电话必须用标准协议链接：<code>@#@#@#@#@#@#@#@#@#@0和@#@#@#@#@#@#@#@#@#@1，否则手机点不开，ATS 也提取不到
真正难的不是写出来，是让同一份 HTML 文件，在 Windows 双击、Mac 预览、Android Chrome、HR 的 Adobe Acrobat 里，都保持姓名可见、联系方式可点、经历不分页、打印不丢头像——这些细节没压平，再好看的动效都是摆设。
