纯html单页简历应内联样式、语义化结构、四块布局（人→经历→技能→联系），响应式仅用一条媒体查询，pdf导出需验证链接与字体。
用纯 HTML 搭建单页简历，够用就行
不需要框架、不引入 CSS 文件也能跑起来——index.html 一个文件搞定，浏览器双击即开。关键不是“多好看”，而是“信息清晰、加载快、手机能看”。所有样式用 <style></style> 内联，避免外部依赖和路径错误。
结构按「人→经历→技能→联系」四块组织
这是 HR 扫视简历的自然动线，别搞「作品集前置」或「教育背景放最底」。用语义化标签但不过度：<header></header> 放姓名和职业标签，<section></section> 分四块，每块用 <h2></h2> 标题。避免嵌套过深，<div> 超过三层就容易失控。
<p>常见错误：把联系方式塞进 footer 里，结果手机上要滚到底部才看到；或者用 <code><table> 排版经历，反而破坏可读性。建议：
<ul>
<li>用 <code><ul></ul> 列工作经历，每项含 <strong></strong> 公司名 + <time></time> 时间（如 <time datetime="2022-03">2022.03–2024.06</time>）
<span></span> 包关键词，加简单背景色即可，别画进度条<a href="mailto:xxx"></a> 和 <a href="tel:+86..."></a>，真能点开响应式靠 viewport + 最小媒体查询
不写 5 套断点，只加一条 @media (max-width: 768px) 处理手机端。重点调三处：
-
body字号从16px改为14px，行高保持1.5 - 所有
<section></section>的padding减半，左右留白缩到1rem - 联系方式横向排列改竖排，删掉
display: flex，让<a></a>自然换行
别碰 rem 或 vh 单位——它们在 iOS Safari 里容易计算错。用 px 和 % 更稳。
导出 PDF 时字体和链接要提前验证
Chrome「打印为 PDF」是多数人最终交付方式，但默认会丢掉背景色、裁掉超长邮箱、把 tel: 链接变成死文本。实操要点：
- 给关键文字加
color: #000（别依赖继承黑），PDF 默认不渲染灰色 - 联系方式区块加
white-space: nowrap防邮箱被折行 - 测试时打开 Chrome 打印预览 → 选「另存为 PDF」→ 检查链接是否可点击（PDF 中仅
mailto:和https://有效） - 字体只用系统安全字体：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
真正麻烦的是 PDF 里中文标点可能挤在一起，如果用了「全角空格」或「中文顿号」，导出后间距异常——统一用英文标点加空格更省事。
