纯html简历需兼顾ats解析、小屏适配与pdf打印：用语义化标签（section/h2）、dl/dt/dd结构化内容；添加viewport meta和相对字号；css用小写相对路径；避免固定定位与视口单位；print媒体查询重置样式。
纯 HTML 搭建简历不需要框架、不依赖构建工具，一个 index.html 文件就能跑起来——关键不是“炫酷”，而是让 HR 或 ATS（简历筛选系统）3 秒内抓取到你的姓名、联系方式、核心技能和最近一段经历。
用语义化标签划分模块，别堆 div
把简历内容按逻辑切分成独立区块，直接用 section + h2，而不是一堆嵌套 div。ATS 和屏幕阅读器能准确识别这些结构，手写 CSS 也更易定位。
-
header包个人信息：姓名、职位、邮箱、电话，避免用图片或 JS 加密——ATS 读不到 - 每块内容用
section，并加语义类名，比如<section class="experience"></section>、<section class="education"></section> - 每个
section内必须有h2标题，不能用div+font-weight: bold替代 - 时间线类内容（如工作/教育经历）优先用
dl/dt/dd，比table更稳、更小屏友好
导出 PDF 时排版错乱？先查 @media print
Chrome “另存为 PDF” 默认会忽略背景色、截断长内容、丢掉部分 margin——这不是你代码写错了，是没适配打印样式。
- 在
<style></style>里加@media print规则：强制background: #fff、color: #000、去掉box-shadow和border - 禁用
position: fixed或float布局——PDF 引擎对它们支持极差，容易导致内容重叠或消失 - 给每个
section加break-inside: avoid，防止某段经历被硬生生切到两页中间 - 避免用
vh/vmax等视口单位控制高度，PDF 导出时无法正确计算
移动端文字太小？缺了这行 meta 就白调
本地双击打开没问题，但手机 Safari 或 Chrome 里文字极小——99% 是因为没写 viewport 声明。这不是 CSS 问题，是 HTML 头部配置缺失。
- 必须在
里加：<meta name="viewport" content="width=device-width, initial-scale=1"> - 字号别用
px，改用相对单位：font-size: 1.1rem或1.2em，配合body { line-height: 1.6; } - 别用
table排技能标签或时间轴——小屏会横向溢出；用display: flex; flex-wrap: wrap;更可靠 - 邮箱链接必须用
@#@#@#@#@#@#@#@#@#@0，别写成纯文本或图片
部署到 GitHub Pages 后样式丢失？路径和大小写是主因
本地正常，上传后变纯文字——不是代码有问题，是资源引用方式错了。GitHub Pages 服务器区分大小写，且路径解析和本地双击完全不同。
- CSS 如果外链，引用必须用相对路径：
<link rel="stylesheet" href="style.css">，不要写./style.css或/style.css - 检查文件名：Windows 下
Style.CSS和style.css是同一个文件，Linux 服务器里完全不一样 - 所有路径都用小写命名，包括文件夹名（如
css/、img/），避免后期踩坑 - 图标字体（如 Font Awesome）优先用 CDN，别本地下载后引用——减少路径依赖
真正难的不是写完，而是让每一段 HTML 都经得起 ATS 解析、小屏缩放、PDF 打印和跨平台部署——这些细节不显眼，但漏掉一个，就可能让简历卡在第一关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
