纯HTML简历应以语义化标签（header/section/h2/ul/dl）构建信息层级，配合Inter字体栈、line-height:1.5、断层字号与打印适配CSS，禁用装饰性效果。
纯 HTML 简历不需要框架或构建工具，关键在于语义化结构 + 极简 CSS 控制视觉节奏——不是“怎么写 HTML”，而是“怎么用 <section>、<h2>、<ul> 把信息分层，再用几行 font-family 和 line-height 压住杂乱感。
用语义标签代替 <div> 堆砌
浏览器和屏幕阅读器靠标签理解内容优先级。简历里没理由用一堆 <div class="section">：
-
<header>包姓名、联系方式，别塞进<div id="top"> - 教育、工作、项目统一用
<section>，每段开头用<h2>（不是<h3>或<span class="title">） - 每条经历用
<ul>+<li>，避免用<p>换行模拟列表 - 技能栏用
<dl><dt>（类别）+<dd>（具体项），比“HTML, CSS, JavaScript”一串文字更易扫读
字体与行高比配色更重要
多数人花半小时调颜色，结果简历在打印时全糊成灰块。先稳住基础排版：
- 全局设
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;（免费可商用） -
line-height: 1.5是安全值；1.4显紧凑但小屏易挤，1.6显松散不利单页控制 - 字号层级要断层：姓名
2rem，<h2>1.375rem，正文1rem，别用1.125rem这种暧昧值 - 禁用
font-weight: 300或200——多数系统渲染发虚，正文用400，标题用600足够
响应式不是“加个 @media”就完事
手机端简历最常崩在三处：
立即学习“前端免费学习笔记（深入）”；
- 邮箱/电话被 iOS 自动识别为可点击链接，但默认蓝色下划线破坏简洁感 → 加
text-decoration: none和color: inherit -
<section>内左右浮动的日期+公司名，在小屏上必须垂直堆叠 → 用display: flex; flex-wrap: wrap;+flex-basis: 100%强制换行 - 技能
<dl>在窄屏上<dt>和<dd>横排会挤压文字 → 改为display: block，<dt>加font-weight: 600视觉区分 - 打印时背景色、阴影、图标全得消失 → 用
@media print { * { background: transparent !important; box-shadow: none !important; } }
导出 PDF 别依赖浏览器“另存为”
Chrome 的“另存为 PDF”会吃掉部分 vh 单位、CSS 变量，且页边距不可控：
- 把页面高度设为
A4: 297mm × 210mm，用@page { size: A4; margin: 0.8in; } - 关键区域（如姓名区）加
break-inside: avoid;防止跨页撕裂 - 字体确保嵌入：本地用
@font-face引入 Inter，或直接用系统字体栈（更稳妥） - 最终用
chrome --headless --print-to-pdf=resume.pdf resume.html命令行生成，比手动点更一致
真正难的不是写多少代码，是删掉那些“看起来高级”的渐变、动画、图标字体——简历的留白和对齐精度，比任何特效都更消耗时间。
