精美HTML简历需语义化标签、精准排版、打印适配与零JavaScript：用<section><h2><time><address>构建结构，line-height:1.6/letter-spacing微调字体，@media print定制打印样式，内联SVG、mailto/tel协议及静态打点确保稳定呈现。
纯 HTML 简历页做出来容易，但“精美”二字卡在细节里：字体不统一、响应式失效、打印时空白、SEO 无痕迹——这些不是靠多写几行 <div> 能解决的。
用语义化标签替代 <div> 堆砌
很多人一上来就 <div class="section"><div class="title">教育背景</div></div>，结果结构松散、屏幕阅读器读不出层级、搜索引擎也抓不到重点。
- 用
<section>包裹每个大模块（如“工作经历”），而非<div> - 用
<h2>作为模块标题（<h1>只用于姓名/主标题），保证大纲层级清晰 - 用
<time>标记日期（如<time datetime="2020-09">2020.09–2023.06</time>），方便机器解析 - 用
<address>包邮箱/电话，而非普通<p>
字体与排版必须手动控制 line-height 和 letter-spacing
浏览器默认的 line-height: normal 在简历里常导致行距过紧，中文尤其拥挤；letter-spacing 不设值会让英文职位名（如 “Frontend Engineer”）显得粘连。
- 正文推荐
line-height: 1.6（非 1.5 或 1.7），兼顾可读性与紧凑感 - 标题加
letter-spacing: -0.02em，轻微收紧更稳重；英文内容可设letter-spacing: 0.03em微调呼吸感 - 避免用 Google Fonts 的
display=swap——字体闪动会破坏第一印象；改用display=block或本地托管关键字体文件
打印样式不是“加个 @media print 就完事”
直接打印 HTML 页面，常出现页眉页脚遮挡、链接变蓝、背景色盖住文字、分页撕裂经历条目——这些得提前干预。
立即学习“前端免费学习笔记（深入）”；
- 强制移除所有背景色：
@media print { * { background: transparent !important; } } - 隐藏非必要元素：
@media print { .no-print, .social-link { display: none; } } - 确保链接可识别：
@media print a::after { content: " (" attr(href) ")"; } - 用
page-break-inside: avoid包住每段工作经历的<article>，防止被截断
不加 JavaScript 才是简历页的底线
简历页的核心诉求是“稳定呈现”，任何依赖 JS 渲染的内容（比如动态加载技能图标、滚动动画、表单提交）都会带来风险：JS 报错 → 空白页；CDN 失效 → 字体/样式丢失；爬虫不执行 JS → 招聘系统抓不到关键信息。
- 技能图标用 SVG 内联（不是
<img src="icon.svg">），确保离线可用 - 联系方式用
mailto:和tel:协议，不套按钮组件 - 若需统计访问量，只用静态图片打点（如
<img src="https://stat.example.com/pixel.gif?r=resume">），不执行 JS
真正难的不是写出 HTML，而是克制住“再加个交互动画”“再接个 GitHub API”的冲动——简历页不是作品集首页，它只需要在任意设备、任意网络、任意打印机上，安静、准确、完整地把自己说清楚。
