纯HTML简历存在ATS解析失败、移动端适配差、PDF导出字体链接失效三大问题，根源在于未遵循语义化HTML、响应式CSS断点降级和打印样式回退规范。
纯 HTML 简历没法自动适配手机、没法一键导出 PDF、更没法让 HR 在 ATS（求职系统）里顺利解析——这不是技术不行，是选错了工具边界。
为什么直接写 index.html 容易被 ATS 过滤
多数企业用的招聘系统（比如 Workday、Greenhouse）依赖语义化结构识别姓名、职位、经历。手写 <div class="job-title"> 不如标准 <h2> 或 <section aria-label="Work Experience"> 可靠。常见错误是把所有内容塞进 <div> 堆砌样式，结果 ATS 读不出字段。
- 用
<h1>包姓名，<h2>包“工作经历”“教育背景”等一级模块 - 每段经历用
<article>或带role="region"的<section>，别只靠 CSS 类名区分 - 避免在关键信息里嵌套过多
<span>或<div>，ATS 不解析 display:none 或复杂 flex 布局
flexbox 布局做两栏简历时的断点陷阱
很多教程教用 display: flex 实现“左侧技能栏 + 右侧经历栏”，但在小屏上硬撑两栏会导致文字挤成一团或横向滚动——这不是屏幕尺寸问题，是没设 @media 主动降级。
- 桌面端用
flex-direction: row，移动端必须加@media (max-width: 768px) { flex-direction: column; } - 别依赖
flex: 1均分宽度，左侧栏（如技能、语言）内容少，应设固定min-width: 200px防压缩变形 - 用
flex-wrap: wrap替代强制换行，否则white-space: nowrap类样式会破坏响应式
导出 PDF 时字体和链接失效的真实原因
浏览器「打印为 PDF」功能不加载 Google Fonts 的网络字体，也不渲染 :hover 下划线或 SVG 图标——它只认本地可用字体和静态 DOM 结构。
立即学习“前端免费学习笔记（深入）”；
- 用
@import url('https://fonts.googleapis.com/css2?family=Inter');时，务必在@media print里 fallback 到font-family: 'Inter', 'Segoe UI', sans-serif; - 所有链接（邮箱、GitHub）必须带
href属性，且不能靠 JS 动态插入；PDF 导出时 JS 已停止执行 - 避免用
background-image做装饰线条，PDF 打印默认关闭背景图（需手动勾选「背景图形」，但 HR 不会这么干）
真正卡住人的不是写 HTML，而是搞清哪部分该由 HTML 负责（结构）、哪部分交给 CSS（视觉）、哪部分根本不该放前端（比如 ATS 兼容性校验得用 JSON-LD 标注）。写完记得用 W3C Validator 过一遍，比调半天颜色重要得多。
