纯html简历需适配邮件附件、招聘系统解析和手机浏览三场景，核心是语义结构（用替代）、内联极简css（禁用flex/grid/外部样式）、pdf导出设置（关闭页眉页脚、100%缩放、a4无边距）及附件规范（英文文件名、无bom utf-8）。
纯 HTML 简历不是“能打开就行”，而是要确保在邮件附件、招聘系统解析、HR 手机快速浏览这三类场景下不丢内容、不乱版、不被当成垃圾文件——关键在于语义结构 + 极简样式 + 零外部依赖。
用 <section></section> 而不是 <div> 组织核心模块
<p>招聘系统（如猎聘、BOSS 直聘后台）和部分 ATS（Applicant Tracking System）会解析 HTML 语义标签提取信息。<code><div> 是无意义容器，<code><section></section> 明确表示“一块独立内容”，配合 aria-label 可提升机器可读性。
-
<section aria-label="教育背景"></section> 比 <div class="edu"> 更可能被正确归类
<li>避免嵌套过深：最多两层 <code><section> → <article></article></section>（如“项目经历”下每个项目用 <article></article>）
- 不要用
<h1></h1> 做简历标题——多数 ATS 把它当职位名提取，建议用 <h2></h2> 开头，姓名用 <h2></h2>，联系方式用 <p></p> + class="contact"
内联 CSS 必须限制在 <style></style> 标签里，且禁用 @import 和外部链接
邮件客户端（Outlook、Apple Mail）和部分招聘系统会剥离 <link> 标签或屏蔽外部域名请求，导致样式全丢。所有样式必须写在 <style></style> 内，且只用最基础属性。
- 只允许使用：
font-family（限 Web 安全字体，如 "Helvetica Neue", Arial, sans-serif）、margin/padding（数值用 px 或 em，禁用 rem）、color、border-bottom（模拟分隔线）
- 禁用：
flex、grid、float、position: absolute（Outlook 渲染极不稳定）
- 行高统一用
line-height: 1.5，避免段落粘连
导出 PDF 时 Chrome 打印设置的关键三项
把 HTML 简历发给 HR，90% 场景需要转 PDF。Chrome 默认打印会裁掉页眉页脚、缩放失真、忽略某些 margin——必须手动关掉三个开关：
- 取消勾选
Headers and footers（否则自动加网址和页码）
- 将
Scale 改为 100%（默认是“适应”，导致字体糊、间距压缩）
- 在
More settings → Paper size 选 A4，并确认 Margins 是 None（避免白边吃掉左侧联系栏）
如果简历右侧有技能标签栏，建议用 display: inline-block + 固定宽度（如 width: 120px），比浮动更稳。
邮箱附件发送前必须做两件事
HTML 文件本身不能带空格或中文名，否则 Outlook 会识别失败；同时要防止 UTF-8 BOM 头引发乱码——这是被退回最隐蔽的原因。
- 文件名只能含英文、数字、下划线：
zhangsan_resume.html ✅，张三_简历.html ❌
- 用 VS Code 打开文件 → 右下角点击编码（如“UTF-8 with BOM”）→ 选
Save with Encoding → UTF-8（去掉 BOM）
- 发前用手机微信或 QQ 邮箱收一次自己测试：能否直接点开、电话号码是否可点击、PDF 导出后有没有断行错位
真正卡住人的不是写不出 HTML，而是某封投递后石沉大海，却不知道是 Outlook 把你的 flex 布局渲染成了一条竖线，或者 PDF 导出时默认缩放悄悄把联系方式挤出了页面右边界。
<section aria-label="教育背景"></section> 比 <div class="edu"> 更可能被正确归类
<li>避免嵌套过深：最多两层 <code><section> → <article></article></section>（如“项目经历”下每个项目用 <article></article>）<h1></h1> 做简历标题——多数 ATS 把它当职位名提取，建议用 <h2></h2> 开头，姓名用 <h2></h2>，联系方式用 <p></p> + class="contact"
内联 CSS 必须限制在 <style></style> 标签里，且禁用 @import 和外部链接
邮件客户端（Outlook、Apple Mail）和部分招聘系统会剥离 <link> 标签或屏蔽外部域名请求，导致样式全丢。所有样式必须写在 的 <style></style> 内，且只用最基础属性。
- 只允许使用：
font-family（限 Web 安全字体，如"Helvetica Neue", Arial, sans-serif）、margin/padding（数值用px或em，禁用rem）、color、border-bottom（模拟分隔线） - 禁用：
flex、grid、float、position: absolute（Outlook 渲染极不稳定） - 行高统一用
line-height: 1.5，避免段落粘连
导出 PDF 时 Chrome 打印设置的关键三项
把 HTML 简历发给 HR，90% 场景需要转 PDF。Chrome 默认打印会裁掉页眉页脚、缩放失真、忽略某些 margin——必须手动关掉三个开关：
- 取消勾选
Headers and footers（否则自动加网址和页码） - 将
Scale改为100%（默认是“适应”，导致字体糊、间距压缩） - 在
More settings → Paper size选A4，并确认Margins是None（避免白边吃掉左侧联系栏）
如果简历右侧有技能标签栏，建议用 display: inline-block + 固定宽度（如 width: 120px），比浮动更稳。
邮箱附件发送前必须做两件事
HTML 文件本身不能带空格或中文名，否则 Outlook 会识别失败；同时要防止 UTF-8 BOM 头引发乱码——这是被退回最隐蔽的原因。
- 文件名只能含英文、数字、下划线：
zhangsan_resume.html✅，张三_简历.html❌ - 用 VS Code 打开文件 → 右下角点击编码（如“UTF-8 with BOM”）→ 选
Save with Encoding → UTF-8（去掉 BOM） - 发前用手机微信或 QQ 邮箱收一次自己测试：能否直接点开、电话号码是否可点击、PDF 导出后有没有断行错位
真正卡住人的不是写不出 HTML，而是某封投递后石沉大海，却不知道是 Outlook 把你的 flex 布局渲染成了一条竖线，或者 PDF 导出时默认缩放悄悄把联系方式挤出了页面右边界。
