优质HTML简历关键在结构决策与内容校准，而非编码：用语义化标签（h1唯一姓名、address/contact section、time datetime、ul技能列表）确保ATS解析；CSS仅需重置、打印适配（@media print）、响应式底线；导出PDF须用系统字体栈、rem单位、line-height无单位值，并预留30分钟打磨内容。
从零开始写一份能过技术岗初筛的 HTML 简历，实际编码+调试时间可以压缩到 90 分钟以内；但真正“优质”的关键不在写，而在结构决策和内容校准——这两步省不得，否则会反复返工。
用什么 HTML 结构才不被 ATS 拒绝
很多简历挂掉不是因为样式丑，而是语义混乱导致 ATS（招聘系统）解析失败。核心原则是：用语义化标签表达信息层级，而非靠 <div> 堆砌。
<ul>
<li>姓名必须用 <code><h1></h1>，且全文唯一；联系方式放 <address></address> 或带 aria-label="contact" 的 <section></section>
<section></section> 包裹，每段职位用 <h2></h2>，公司名用 <h3></h3>，时间用 <time datetime="2022-03">Mar 2022–Present</time>
<div> + CSS Grid/Flex 来“模拟列表”——ATS 可能直接跳过
<li>技能栏用 <code><ul></ul> 或 <dl></dl>，每个技能项用 <li> 或 <dt></dt>，别写成逗号分隔的一整段文本CSS 写多少才够用又不出错
简历不是作品集，CSS 目标是“清晰可读 + 打印友好”，不是炫技。重点控制三类样式：
- 重置默认：只加
*, *::before, *::after { box-sizing: border-box; }和body { line-height: 1.5; font-family: system-ui, -apple-system, sans-serif; } - 打印适配：用
@media print隐藏.no-print类、移除背景色、强制链接显示 URL（a::after { content: " (" attr(href) ")"; }） - 响应式底线：对屏幕宽度
的设备，把 <code><section></section>设为display: block并取消左右 margin，避免横向滚动 - 别碰
position: fixed、transform、复杂动画——PDF 导出或打印时大概率错位或消失
导出 PDF 时字体/排版崩了怎么办
Chrome 浏览器“另存为 PDF”是最可靠路径，但崩得最狠的永远是中文字体和行高。
立即学习“前端免费学习笔记（深入）”；
- 字体栈必须 fallback 到系统字体：
font-family: "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;—— 不要只写"Noto Sans CJK"或自定义 Web Font - 所有字号用
rem或em，禁用px（PDF 导出时 px 渲染不一致） - 行高统一设为无单位数值（如
line-height: 1.4;），别用px或% - 导出前手动触发一次打印预览（
Ctrl+P），检查分页是否切在标题中间——若出现，给<section></section>加break-inside: avoid;
真正卡时间的从来不是敲代码，而是反复确认“这段经历到底该突出技术细节还是业务影响”“这个项目要不要写 GitHub 链接”——这些判断没法自动化，但一旦定下来，HTML + CSS 就只是体力活。留出至少 30 分钟纯内容打磨，比多调 20 分钟 margin 更值。
