专业简历应手写HTML+CSS：用语义化标签（header/section/ul/li/time）、系统字体链、Chrome精准打印设置导出PDF，确保跨设备显示完整、打印不切内容、链接可点击。
用纯 HTML + CSS 做出专业简历，别碰 Word 或在线生成器
Word 导出 PDF 会错行、在线生成器导出后字体糊、手机打开排版全乱——真正可控又体面的简历，就是手写 index.html + 一小段 style。它不是“炫技”，是确保 HR 在任意设备点开即见完整姓名、联系方式、项目模块，且打印出来不切标题、不丢边距。
关键结构：用语义化标签替代 堆砌很多人一上来就写一堆 ，结果 SEO 不友好、屏幕阅读器读不出重点、后期改版难定位。实际只需 4 类标签：
-
-
aria-label 提升可访问性
-
-
字体与排版：用系统字体链，别硬上 Google Fonts
加载外部字体可能卡在 DNS 或被企业内网拦截，导致简历空白几秒甚至文字回退成宋体。稳妥做法是用本地字体链：
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
}
注意：font-size 设为 16px（不是 1rem），避免某些邮件客户端重置根字号；letter-spacing 控制在 0.02em 内，过大会让中文显得松散；所有标题用 font-weight: 600，比 bold 更稳，兼容旧版 Safari。
导出为 PDF：Chrome 打印设置决定成败
直接右键“另存为 PDF”会带页眉页脚、自动分页切项目、缩放失真。必须手动调 Chrome 的打印设置：
- 取消勾选
Headers and footers
- 设
Page size 为 A4（不是“默认”）
-
Margin 选 None（靠 CSS 的 @page { margin: 0 } 控制更准）
- 勾选
Background graphics，否则你写的浅灰分割线会消失
- 导出前按
Ctrl+Shift+I → Ctrl+Shift+P → 输入 Rendering → 开启 Emulate CSS print media type，预览真实效果
最后检查 PDF 第一页是否满屏内容、最后一行没被截断、链接仍可点击（
真正麻烦的不是写代码，是每换一家公司就得微调“求职意向”字段和项目排序逻辑——这部分没法模板化，得留好注释，比如在
很多人一上来就写一堆 加载外部字体可能卡在 DNS 或被企业内网拦截，导致简历空白几秒甚至文字回退成宋体。稳妥做法是用本地字体链： 注意： 直接右键“另存为 PDF”会带页眉页脚、自动分页切项目、缩放失真。必须手动调 Chrome 的打印设置： 最后检查 PDF 第一页是否满屏内容、最后一行没被截断、链接仍可点击（ 真正麻烦的不是写代码，是每换一家公司就得微调“求职意向”字段和项目排序逻辑——这部分没法模板化，得留好注释，比如在
，那是给公司名/职位用的） 每块内容一个，比如“工作经历”“教育背景”“项目经验”，加 aria-label 提升可访问性 列工作职责或技术栈，别用换行符 标记时间范围，如 ，方便未来做时间筛选或自动化解析字体与排版：用系统字体链，别硬上 Google Fonts
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
}
font-size 设为 16px（不是 1rem），避免某些邮件客户端重置根字号；letter-spacing 控制在 0.02em 内，过大会让中文显得松散；所有标题用 font-weight: 600，比 bold 更稳，兼容旧版 Safari。导出为 PDF：Chrome 打印设置决定成败
Headers and footers
Page size 为 A4（不是“默认”）Margin 选 None（靠 CSS 的 @page { margin: 0 } 控制更准）Background graphics，否则你写的浅灰分割线会消失Ctrl+Shift+I → Ctrl+Shift+P → 输入 Rendering → 开启 Emulate CSS print media type，预览真实效果 和 在 PDF 中保留功能）。 这种地方标清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
