纯代码排版简历是用html语义化标签（h1–h6、time、ul等）结合css精确控制视觉节奏，避免div滥用；white-space: pre-line和line-height无单位值保障呼吸感；打印需重置a、background及page-break-inside。
纯代码排版的简历，本质是用 HTML + CSS 手写静态页面，不依赖模板引擎、框架或生成工具——它不是“用 HTML 写个简历”，而是把 HTML 当作排版语言来用，像写 Markdown 一样写结构，再靠 CSS 精确控制视觉节奏和留白。
为什么不用 div 套来套去，而要选语义化标签
浏览器默认样式对 h1–h6、ul、ol、section、time 都有合理间距和层级暗示。用 div 从头包起，等于放弃这些默认排版红利，后续全靠 margin 手动调，容易错行、漏空、响应错乱。
实操建议：
- 用
h1放姓名，h2放「教育」「工作经历」等主模块，h3放公司名或学位名 - 时间信息统一用
time标签包裹，比如<time datetime="2020-09">2020.09–2023.06</time>，便于未来加微数据或自动化提取 - 技能列表用
ul，不换行的技能项用display: inline或flex控制，避免手动加
white-space 和 line-height 是控制“代码感排版”的关键
所谓“纯代码排版”，不是指用等宽字体就完事，而是让段落呼吸感像读源码注释：紧凑但不粘连，对齐清晰，换行可控。这时候 white-space: pre-line 比 pre 更实用——它保留换行符和空格语义，又允许自动折行；而 line-height: 1.4 这类无单位值，比 px 或 em 更稳定，不受父级字体大小干扰。
常见错误现象：
- 用
br强制换行 → 导致打印时断行异常、屏幕缩放后错位 - 给
p设固定height→ 文字变大时被截断 - 用
font-family: monospace却没配letter-spacing→ 中文挤在一起，英文过松
打印适配不是加个 @media print 就完事
很多简历 HTML 在浏览器里看着干净，一按 Ctrl+P 就崩：页眉页脚乱入、链接变蓝底、分页撕裂在句子中间。根本原因是没切断浏览器默认打印样式链。
实操建议：
- 在
@media print里重置关键样式：a { color: inherit; text-decoration: none; }、* { background: transparent !important; } - 用
page-break-inside: avoid加在section上，防止“教育背景”标题在一页末尾、内容被切到下一页 - 避免用
vh/vmax单位做高度控制——打印时这些单位无意义，会塌成 0
最易被忽略的一点：纯代码简历的“可维护性”不在 HTML 结构里，而在 CSS 的命名克制程度。别用 class="section-title-red-bold" 这类描述样式的类名，换成 class="section-header"，否则改一次字体颜色就得全局搜替换。毕竟你不是在写界面，是在排一份会反复更新的文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
