应届生用HTML写简历是为了规避Word错乱、PDF低效、模板千篇一律三大问题；须用语义化标签（如）、精简CSS、Chrome本地导出PDF、确保ATS可解析。
应届生用 HTML 写简历，不是为了炫技，而是为了避开 Word 排版错乱、PDF 修改低效、在线生成器千篇一律这三类硬伤。只要结构清晰、语义正确、导出稳定，哪怕只用原生 <div> 和 <code><p></p>，也比套一个带 20 层嵌套表格的“高级模板”更靠谱。
HTML 简历必须用语义化标签，别瞎套 <div>
<p>很多同学一上手就全用 <code><div> + class 堆样式，结果导出 PDF 或被 ATS 解析时信息丢失严重。浏览器和简历解析系统靠的是语义，不是 class 名。比如教育背景该用 <code><section></section> 包裹，学校名称用 <h2></h2>，专业和时间用 <time></time> 标签（<time datetime="2022-09">2022.09–2026.06</time>），课程列表用 <ul></ul> 而非手动加破折号。
常见错误现象：
• 导出 PDF 后时间变成乱码或被截断
• ATS 抓不到“2024.09–2025.06”这类纯文本时间，但能识别 <time></time> 的 datetime 属性
• 手机端打开后标题层级塌陷，所有内容挤成一团
实操建议：
• 用 <header></header> 放姓名/求职意向/联系方式
• 用 <article></article> 包每段经历（实习/项目/校园活动）
• 每段经历里用 <h3></h3> 写公司/组织名，<h4></h4> 写岗位/角色
• 避免用 <table> 做简历排版——ATS 几乎无法解析表格内文字顺序<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<h3>CSS 只做三件事：字体、间距、响应式</h3>
<p>应届生 HTML 简历不需要动画、渐变、阴影。真正影响 HR 阅读体验的，是中文字体是否可读、行距是否呼吸感足、手机上能否不横向滚动。WPS 或 Word 模板里常见的“微软雅黑+10.5pt+单倍行距”，在网页里直接等效于：</p>
<pre class="brush:php;toolbar:false;">body {
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
line-height: 1.6;
margin: 0 auto;
max-width: 800px;
padding: 2rem 1.5rem;
}</pre>
<p>性能与兼容性影响：<br>• 不要 @import 外部字体（如 Google Fonts），国内加载慢且可能被拦截<br>• 不要用 rem 做全局字号基准，iOS Safari 对小字号 rem 渲染不稳定<br>• 手机端必须加 <code><meta name="viewport" content="width=device-width, initial-scale=1">，否则默认缩放为桌面视口
容易踩的坑：
• 用 Flex 布局强行对齐“技能标签”，结果在旧版微信内置浏览器里全部换行
• 给 <h2></h2> 加 text-transform: uppercase，导致中文也被转大写（实际无效但浪费 CSS 规则）
• 用 background-image 做分割线，导出 PDF 时消失
导出 PDF 必须本地生成，别信在线转换
Chrome 浏览器自带的“打印 → 另存为 PDF”是最稳方案。所有在线 PDF 转换工具都会重排版、丢字体、吞 <time></time> 属性，甚至把中文标点替换成西文符号。
实操步骤：
• 用 Chrome 打开本地 HTML 文件（不要双击，用 file:/// 协议）
• Ctrl+P → 选择“另存为 PDF” → 勾选“背景图形”（确保浅灰底色保留）
• 页面尺寸选“A4”，边距设为“最小”，避免内容被裁切
• 导出前先在 Chrome DevTools 里切到手机模拟模式，确认关键信息没被折叠或遮挡
为什么这样做：
• Chrome 的 PDF 导出引擎基于 Blink，与页面渲染一致，无二次解析偏差
• 本地生成不依赖网络，不上传你的教育经历和实习公司名
• 文件名必须含姓名和岗位，例如 张三_前端开发实习生.pdf，HR 下载后不会和其他 200 份“简历.pdf”混淆
投递前必须检查三处 ATS 友好细节
校招系统普遍用 ATS 初筛，它不是人，它只认结构化文本。一份 HTML 简历再好看，如果以下三点没处理，可能连初筛都过不了。
检查清单：
• <title></title> 标签里写明“张三_XX大学_前端开发应聘简历”，而非默认的“index.html”
• 所有图片（如证件照）必须带 alt 属性，例如 <img src="photo.jpg" alt="张三证件照">；无 alt 的图会被 ATS 当作空白块跳过
• 简历正文禁止使用 SVG 图标代替文字（如用 SVG 画“邮箱”图标而不写“邮箱：xxx@xxx.com”），ATS 读不到 SVG 内容
最容易被忽略的地方：很多人把“熟练掌握 JavaScript”写成带颜色标签的 <span class="skill-tag">JavaScript</span>，但 ATS 只扫描纯文本流——只要文字还在 DOM 里、没被 display: none 或 JS 动态注入，就一定能抓到。重点从来不是“怎么高亮”，而是“怎么确保它在那儿”。
