html5语义化标签组织简历骨架：用包姓名联系方式，分模块，/标层级，规范标时间，列技能，避免堆砌，确保ats与屏幕阅读器准确解析。
用语义化标签组织内容骨架，别用 <div> 堆砌
<p><a style="color:#f60; text-decoration:underline;" title="简历" href="https://m.php.cn/zt/23893.html" target="_blank">简历</a>不是视觉稿，浏览器和ATS（招聘系统）都依赖结构识别信息。用 <code><header></header> 包姓名和联系方式，<section></section> 拆分「教育背景」「工作经历」「项目经验」，每项用 <h2></h2> 或 <h3></h3> 标明层级。避免全篇 <div class="item">——这类写法会让屏幕阅读器读成“一堆没名字的盒子”，ATS也可能漏抓关键字段。
<p>常见错误：把「技能」写成无序列表但没加 <code><ul></ul>，或用 <p></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></p> 里。否则 ATS 可能无法分离时间与机构名，影响年限判断。
推荐结构：
<article><h3>前端开发工程师</h3> <p><time datetime="2022-07">2022.07–至今</time></p> <p><strong>XX科技有限公司</strong></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/2249" title="超级简历WonderCV"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175679998691134.png" alt="超级简历WonderCV" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/2249" title="超级简历WonderCV" class="overflowclass">超级简历WonderCV</a> <p class="overflowclass">一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。</p> </div> <a rel="nofollow" href="/ai/2249" title="超级简历WonderCV" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>重构用户中心模块，首屏加载耗时降低 40%</li> </ul></article>
-
<time datetime></time>的值必须是标准格式（如2022-07），不能写2022.07，否则部分解析器会忽略 - 不要用
<span></span>或<div> 替代 <code><time></time>——语义丢失，且无datetime属性支持 - 如果经历跨年但月份不明确，写
2022即可，datetime="2022"仍合法 - 在 CSS 中加
@media print规则，强制重置无关样式：body { background: #fff; color: #000; } - 用
page-break-inside: avoid防止<section></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>和<a href="mailto:xxx"></a>，否则手机上点不了
导出为 PDF 时样式断裂？优先用 print 媒体查询而非截图
直接右键“打印为 PDF”是最常用路径，但默认会丢掉背景色、浮动布局错乱、分页截断文字。别依赖浏览器“另存为 HTML”再转 PDF——那只是快照，不可维护。
实操建议：
移动端打开错位？别盲目套用响应式框架
简历页面不需要复杂栅格系统。真正影响阅读的是字号过小、链接点击区域太窄、横向滚动。核心控制点就三个：
容易被忽略的是：某些安卓浏览器对 flex-wrap: wrap 支持不稳定，如果技能标签用了弹性布局换行，测试时务必真机打开，别只信 Chrome DevTools 的模拟器。
