纯HTML单页简历应内联样式、语义化结构、四块布局（人→经历→技能→联系），响应式仅用一条媒体查询，PDF导出需验证链接与字体。
用纯 HTML 搭建单页简历，够用就行
不需要框架、不引入 CSS 文件也能跑起来——index.html 一个文件搞定，浏览器双击即开。关键不是“多好看”，而是“信息清晰、加载快、手机能看”。所有样式用 <style> 内联，避免外部依赖和路径错误。
结构按「人→经历→技能→联系」四块组织
这是 HR 扫视简历的自然动线，别搞「作品集前置」或「教育背景放最底」。用语义化标签但不过度：<header> 放姓名和职业标签，<section> 分四块，每块用 <h2> 标题。避免嵌套过深，<div> 超过三层就容易失控。
常见错误：把联系方式塞进 footer 里，结果手机上要滚到底部才看到；或者用 <table> 排版经历，反而破坏可读性。建议：
- 用
<ul>列工作经历，每项含<strong>公司名 +<time>时间（如<time datetime="2022-03">2022.03–2024.06</time>） - 技能栏用
<span>包关键词，加简单背景色即可，别画进度条 - 联系方式用
<a href="mailto:xxx">和<a href="tel:+86...">，真能点开
响应式靠 viewport + 最小媒体查询
不写 5 套断点，只加一条 @media (max-width: 768px) 处理手机端。重点调三处：
立即学习“前端免费学习笔记（深入）”；
-
body字号从16px改为14px，行高保持1.5 - 所有
<section>的padding减半，左右留白缩到1rem - 联系方式横向排列改竖排，删掉
display: flex，让<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 里中文标点可能挤在一起，如果用了「全角空格」或「中文顿号」，导出后间距异常——统一用英文标点加空格更省事。
