纯HTML制作清新淡雅求职简历的关键在于语义化结构与CSS气质把控：用<header><section><article><ul>等标签构建可访问骨架，hsl()配色（如hsl(200,8%,20%)）、rem响应式排版、打印专用@media规则共同实现克制留白与专业质感。
纯 HTML 制作“清新淡雅”的求职简历，关键不在花哨样式，而在克制排版、合理留白、低饱和配色与语义化结构——CSS 才是决定气质的核心，HTML 只负责搭好骨架。
用语义化标签组织内容结构，别用 <div> 堆砌
浏览器和屏幕阅读器靠标签含义理解内容。用错标签，再好看的 CSS 也撑不起专业感。
-
<header>放姓名、职位、联系方式，别塞进<div class="title"> - 教育经历、工作经历用
<section>包裹，每段经历用<article>（语义上它是独立内容单元） - 技能列表用
<ul>，别用<div>+ 换行模拟，否则无法被辅助技术识别 - 避免嵌套过深：
<div><div><div><p>…</p></div></div></div>这类写法会让 CSS 维护成本陡增
配色控制在 3 种以内，主色用 hsl() 更易调出“淡雅”感
RGB 或十六进制容易选得过艳；hsl() 直接调控色相（H）、饱和度（S）、明度（L），比如 hsl(210, 12%, 88%) 是带灰调的浅蓝，比 #e6f2ff 更耐看。
- 推荐组合：
hsl(200, 8%, 20%)（深灰文字）、hsl(200, 10%, 95%)（背景）、hsl(180, 20%, 60%)（链接/强调色） - 所有颜色统一用
hsl()或统一用rgb()，混用会导致暗色模式适配困难 - 别给
<a>加下划线（破坏干净感），改用border-bottom: 1px dotted或悬停变色
字体大小和行高用 rem，禁用 px 固定值
“清新”感来自呼吸感，而呼吸感依赖可变的空白节奏。固定 px 在不同设备上会挤压留白，显得局促。
立即学习“前端免费学习笔记（深入）”；
-
html { font-size: 16px; }是默认基准，但建议设为100%以尊重用户系统设置 - 正文用
1rem（≈16px），小标题用1.25rem，段落间距用1.5rem，行高统一设1.6 - 避免
font-size: 14px;这类硬编码——iOS 用户缩放字体时，px不会响应
打印时样式崩溃？加 @media print 专用规则
很多“清新简历”一打印就变黑块、断页、链接乱码——因为没处理打印上下文。
- 移除背景色：
@media print { * { background: transparent !important; } } - 隐藏非必要元素：
@media print { .contact-icon, .social-link { display: none; } } - 强制黑字：
@media print { color: #000 !important; text-shadow: none !important; } - 禁用分页符断裂段落：
p { orphans: 3; widows: 3; }
真正难的不是做出“淡”，而是守住“雅”：删掉一个动效、少用一种字体、压低一行高度，往往比加东西更费判断力。简历里每个像素都在替你说话，安静点，反而听得清。
