html简历的核心是语义化结构、打印适配与ats兼容：用section+id划分模块，article嵌套单段经历，dl展示技能，禁用display:none和background-image，字体栈以系统字体开头，line-height设为1.4。
HR平均只看7.4秒简历，用HTML做简历不是为了炫技，而是让关键信息在3秒内被准确捕获——这要求结构语义清晰、打印稳定、ATS系统可解析，而非堆砌动画或响应式断点。
为什么比更能通过HR系统筛选
主流ATS（如Moka、北森）会基于HTML语义标签提取结构化字段。“教育背景”“工作经历”这些区块若用
包裹，系统大概率识别为普通文本块，导致“2022.09–2026.06 清华大学”被切碎成孤立日期和校名；而用配合教育背景
，则能触发字段映射逻辑，提升信息召回率。
-
section必须配id属性（如id="experience"），部分ATS靠ID定位模块
- 每个
section内只嵌一层article表示单段经历，避免多层嵌套干扰解析
- 禁用
display: none隐藏内容——ATS不执行JS，但会读取所有HTML文本，隐藏字段仍可能被误判为垃圾信息
@media print 必须覆盖的三个破坏性默认行为
Chrome“另存为PDF”时，默认会把导航栏、链接下划线、背景图全塞进PDF，造成HR打印时浪费纸张、关键信息被遮挡、头像消失。仅靠“勾选背景图形”不够，必须用CSS主动压制。
-
a[href]::after必须设display: none，否则每个链接后自动加 (https://...)字样
-
nav, .sidebar, .contact-link需统一display: none，避免侧边栏或社交图标进PDF
-
img不能依赖background-image——打印默认关闭背景图，头像直接变空白块
技能展示别用
progress元素视觉上好看，但ATS无法识别其value值，且部分PDF导出工具（如wkhtmltopdf）会渲染成空框或报错。真正能被机器读取+人眼快速扫描的，是语义明确的定义列表。
正确写法：
- JavaScript
- ES6+, React, Webpack
- CSS
- Flexbox, CSS-in-JS, 响应式断点
-
dt作为技能主干，dd承载技术栈细节，ATS可分别提取
- 避免用
span模拟进度条（如<span class="bar"></span>），纯样式无语义，对ATS和屏幕阅读器均不可见
- 若坚持可视化，可用
aria-valuenow="85"附加到progress上，但需同步提供dt/dd冗余文本
字体与行高：PDF渲染稳定的底线参数
自定义Web Font在PDF中极易回退失败，导致整页文字变成Times New Roman；而line-height过小会让HR打印后文字挤在一起，影响可读性。
- 字体栈必须以系统安全字体开头：
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif
- 正文
font-size设为12pt（非px），PDF渲染更一致
-
line-height固定为1.4，比浏览器默认1.2更宽松，避免打印时行间粘连
最难的部分从来不是写出HTML，而是确保同一份代码在Chrome开发者工具里看到的结构，在HR双击打开的PDF里、ATS后台解析出的字段里、以及面试官用iPhone Safari扫一眼时，都指向同一组准确信息——语义标签、打印规则、字体控制，三者缺一不可。
更能通过HR系统筛选
主流ATS（如Moka、北森）会基于HTML语义标签提取结构化字段。“教育背景”“工作经历”这些区块若用
包裹，系统大概率识别为普通文本块，导致“2022.09–2026.06 清华大学”被切碎成孤立日期和校名；而用配合
教育背景
，则能触发字段映射逻辑，提升信息召回率。-
section必须配id属性（如id="experience"），部分ATS靠ID定位模块 - 每个
section内只嵌一层article表示单段经历，避免多层嵌套干扰解析 - 禁用
display: none隐藏内容——ATS不执行JS，但会读取所有HTML文本，隐藏字段仍可能被误判为垃圾信息
@media print 必须覆盖的三个破坏性默认行为
Chrome“另存为PDF”时，默认会把导航栏、链接下划线、背景图全塞进PDF，造成HR打印时浪费纸张、关键信息被遮挡、头像消失。仅靠“勾选背景图形”不够，必须用CSS主动压制。
-
a[href]::after必须设display: none，否则每个链接后自动加(https://...)字样 -
nav, .sidebar, .contact-link需统一display: none，避免侧边栏或社交图标进PDF -
img不能依赖background-image——打印默认关闭背景图，头像直接变空白块
技能展示别用
progress元素视觉上好看，但ATS无法识别其value值，且部分PDF导出工具（如wkhtmltopdf）会渲染成空框或报错。真正能被机器读取+人眼快速扫描的，是语义明确的定义列表。
正确写法：
- JavaScript
- ES6+, React, Webpack
- CSS
- Flexbox, CSS-in-JS, 响应式断点
-
dt作为技能主干，dd承载技术栈细节，ATS可分别提取 - 避免用
span模拟进度条（如<span class="bar"></span>），纯样式无语义，对ATS和屏幕阅读器均不可见 - 若坚持可视化，可用
aria-valuenow="85"附加到progress上，但需同步提供dt/dd冗余文本
字体与行高：PDF渲染稳定的底线参数
自定义Web Font在PDF中极易回退失败，导致整页文字变成Times New Roman；而line-height过小会让HR打印后文字挤在一起，影响可读性。
- 字体栈必须以系统安全字体开头：
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif - 正文
font-size设为12pt（非px），PDF渲染更一致 -
line-height固定为1.4，比浏览器默认1.2更宽松，避免打印时行间粘连
最难的部分从来不是写出HTML，而是确保同一份代码在Chrome开发者工具里看到的结构，在HR双击打开的PDF里、ATS后台解析出的字段里、以及面试官用iPhone Safari扫一眼时，都指向同一组准确信息——语义标签、打印规则、字体控制，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
