HTML5语义化标签组织简历骨架：用<header>包姓名联系方式，<section>分模块，<h2>/<h3>标层级，<time datetime>规范标时间，<ul><li>列技能，避免<div>堆砌，确保ATS与屏幕阅读器准确解析。
用语义化标签组织内容骨架，别用 <div> 堆砌
简历不是视觉稿，浏览器和ATS（招聘系统）都依赖结构识别信息。用 <header> 包姓名和联系方式，<section> 拆分「教育背景」「工作经历」「项目经验」，每项用 <h2> 或 <h3> 标明层级。避免全篇 <div class="item">——这类写法会让屏幕阅读器读成“一堆没名字的盒子”，ATS也可能漏抓关键字段。
常见错误：把「技能」写成无序列表但没加 <ul>，或用 <p> 塞多行技能词，导致解析成一整段文本。正确做法是：
<section>
<h2>专业技能</h2>
<ul>
<li>JavaScript（ES6+）</li>
<li>React & Redux</li>
<li>Node.js（Express）</li>
</ul>
</section>
让时间线可读又可被机器提取，别只靠 CSS 对齐
工作经历和教育的时间字段（如“2021.09–2025.06”）必须独立成标签，不能和公司名挤在同一个 <p> 里。否则 ATS 可能无法分离时间与机构名，影响年限判断。
推荐结构：
立即学习“前端免费学习笔记（深入）”；
<article>
<h3>前端开发工程师</h3>
<p><time datetime="2022-07">2022.07–至今</time></p>
<p><strong>XX科技有限公司</strong></p>
<ul>
<li>重构用户中心模块，首屏加载耗时降低 40%</li>
</ul>
</article>
-
<time datetime>的值必须是标准格式（如2022-07），不能写2022.07，否则部分解析器会忽略 - 不要用
<span>或<div>替代<time>——语义丢失，且无datetime属性支持 - 如果经历跨年但月份不明确，写
2022即可，datetime="2022"仍合法
导出为 PDF 时样式断裂？优先用 print 媒体查询而非截图
直接右键“打印为 PDF”是最常用路径，但默认会丢掉背景色、浮动布局错乱、分页截断文字。别依赖浏览器“另存为 HTML”再转 PDF——那只是快照，不可维护。
实操建议：
- 在 CSS 中加
@media print规则，强制重置无关样式：body { background: #fff; color: #000; } - 用
page-break-inside: avoid防止<section>被截断，但仅对块级元素有效 - 避免用
position: fixed或transform，这些在多数打印引擎中不生效 - 字体尽量选系统自带安全字体（
font-family: "Helvetica Neue", Arial, sans-serif），避免嵌入失败导致回退成空白
移动端打开错位？别盲目套用响应式框架
简历页面不需要复杂栅格系统。真正影响阅读的是字号过小、链接点击区域太窄、横向滚动。核心控制点就三个：
- 顶部加
<meta name="viewport" content="width=device-width, initial-scale=1">，缺了这句，iOS Safari 会按 980px 渲染 - 正文文字用
rem或em，别锁死px；标题行高设为1.3以上，避免 iOS 字体渲染挤压 - 联系方式中的电话/邮箱，用
<a href="tel:xxx">和<a href="mailto:xxx">，否则手机上点不了
容易被忽略的是：某些安卓浏览器对 flex-wrap: wrap 支持不稳定，如果技能标签用了弹性布局换行，测试时务必真机打开，别只信 Chrome DevTools 的模拟器。
