纯HTML简历在加载速度、SEO、打印适配和可维护性上优于JS渲染简历，关键在于语义化结构（如用<section>替代<div>）、精准CSS控制、禁用背景色、强制分页、使用data-属性存储机器可读信息及完整字体回退链。
纯 HTML 简历不是“够用就行”的凑合方案——它在加载速度、SEO 可读性、打印适配和长期可维护性上，反而比多数模板网站生成的 JS 渲染简历更可靠。关键在于结构语义化、CSS 控制精准、不依赖外部服务。
用 <section> 而不是 <div> 组织内容模块
搜索引擎和屏幕阅读器靠语义标签理解内容层级。<div> 是无意义的容器，而 <section> 明确表示一个独立主题区块（如“工作经历”“教育背景”）。误用 <div> 会导致简历在 ATS（招聘系统）中被降权或解析失败。
- 每个核心板块用
<section>包裹，加aria-labelledby指向对应标题 - 避免嵌套过深：最多三层（
<section>→<article>→<time>），否则影响打印时分页 - 技能列表用
<dl>（定义列表）而非<ul>，<dt>写技能名，<dd>写掌握程度，语义更准
print 媒体查询里必须重置 font-size 和 margin
浏览器默认打印样式会让简历缩成一团或断行错乱。很多开发者只加 @media print { display: none } 隐藏广告位，却忘了重设基础排版。
- 打印前统一设
body { font-size: 12pt; margin: 0.5in }，避免字号忽大忽小 - 禁用背景色：
* { background: transparent !important }，否则黑白打印机可能把整页涂黑 - 强制分页：
.section-experience { page-break-inside: avoid }，防止工作经历被截断在两页之间
用 data- 属性存机器可读信息，而不是藏在注释里
想让简历被 LinkedIn 或招聘系统自动提取关键字段？注释（<!-- -->）不会被解析。只有 data- 属性能被 JS 和爬虫读取，且不破坏视觉。
立即学习“前端免费学习笔记（深入）”；
- 公司名加
data-org="Google LLC"，职位加data-title="Senior Frontend Engineer" - 日期用 ISO 格式：
data-start="2020-03"、data-end="2023-11"，方便排序和计算工龄 - 避免写
data-skill="React, TypeScript, Webpack"这种逗号拼接字符串——拆成多个data-skill="react"更利于后续结构化处理
最常被忽略的其实是字体回退链：font-family: "Inter", -apple-system, system-ui, sans-serif 里缺了 sans-serif 末尾兜底，某些 Linux 系统会直接 fallback 到等宽字体，整页变丑。还有就是所有 <time> 标签必须带 datetime 属性，否则语义残缺——这些细节不报错，但一打印或一爬就露馅。
