语义化标签天然建立信息优先级，如用于姓名与岗位、公司名、职位名、时间，并配合@media print优化分页与字体兼容性，确保HR 3秒内抓取关键信息。
用语义化标签天然建立信息优先级
浏览器默认样式对 <h1></h1> 到 <h6></h6>、<strong></strong>、<small></small> 都有明确的视觉权重，程序员简历不需要靠加粗/放大字体“硬突出”，而是让结构本身说话。比如求职意向写在 <header></header> 里用 <h1></h1>，公司名用 <h2></h2>，职位名用 <h3></h3>，时间用 <small></small> —— 这套层级一写完，重点就自动浮出来了。
常见错误是把所有标题都塞进 <div> + 自定义 class，结果打印时字号全一样，HR 扫一眼根本抓不住“腾讯 - 高级前端工程师”这个关键信息。<ul>
<li>
<code><h1></h1> 只用于姓名+求职岗位（如 <h1>李四 - 全栈开发工程师</h1>），全文唯一
<section></section> 包裹，内部用 <h2></h2> 写公司，<h3></h3> 写职位，<p></p> 描述职责<ul></ul>，关键词如 React、Node.js 用 <strong></strong> 包裹，不加 class 也能被识别为强调打印 PDF 时关键信息被截断？检查 @media print 三件事
Chrome “另存为 PDF” 默认会按屏幕视口缩放，又不处理分页逻辑，导致“项目经验”模块被切成两半、“联系方式”压在页脚上——这不是代码写错了，是没告诉浏览器“打印时该怎么布局”。
必须在 <style></style> 里加 @media print 规则，最小干预就能稳住输出：
立即学习“前端免费学习笔记（深入）”；
- 加
page-break-inside: avoid到每个<section></section>，防止工作经历被跨页切断 - 给
<h2></h2>加margin-bottom: 0.5em，避免标题孤零零挂在页尾 - 用
display: none隐藏非必要链接（比如 GitHub 图标旁的“Fork me”横幅），它们在 PDF 里既无用又占空间
测试前先在 Chrome DevTools 按 Ctrl+Shift+P → 输入 Rendering → 勾选 Emulate CSS media type: print，比反复导出快得多。
字体和颜色失控？放弃自定义字体，用系统安全字体栈
本地预览看着很酷的 font-family: 'Inter', 'SF Pro Display', sans-serif，换台电脑或导出 PDF 就变成默认宋体，甚至中文乱码。程序员简历不是设计稿，重点是信息准确抵达，不是视觉一致性。
直接用系统级安全字体栈，兼容性拉满：
- 中文字体优先用
"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif - 英文用
"Segoe UI", system-ui, sans-serif，Windows/macOS/Linux 全覆盖 - 颜色别超三种：正文
#333，标题#222，链接/强调色选一种冷色如#007acc（蓝色系在黑白打印时灰度最稳）
别碰 @font-face 或 Google Fonts —— 它们在离线 PDF 导出时大概率失效，且增加首屏加载不确定性。
简历里放项目链接，但手机点不开？必须用 <a href="mailto:"></a> 和 <a href="https://"></a>
写成 邮箱：xxx@xxx.com 纯文本，iOS/Android 都不会识别为可点击链接；写成 <a>xxx@xxx.com</a> 又缺 href 属性，点不动还报错。
正确写法只有一种：
- 邮箱必须用
<a href="mailto:xxx@xxx.com">xxx@xxx.com</a> - GitHub、个人博客等外部链接必须带完整协议：
<a href="https://github.com/xxx">GitHub</a>，不能省略https:// - 项目演示链接如果部署在 GitHub Pages，确保用
https://xxx.github.io/xxx而不是http://，否则现代浏览器会拦截
这些不是细节，是简历能否被快速联系上的临界点。一个点不开的邮箱，等于没有联系方式。
真正难的不是写多少 CSS，而是克制住“我想让它更好看”的冲动，把每个标签、每行样式都锚定在“HR 3 秒内能抓住什么”这个目标上。结构清晰了，重点自然突出；打印稳了，内容才真正可控。
