可行但不推荐投递，因ATS无法解析语义结构，内容易被切碎丢弃；应导出语义清晰的PDF用于投递，HTML仅作个人网站或邮件预览。
直接用 HTML 做「求职信 + 简历一体页」可行，但关键不是“能不能做”，而是“要不要这么做”——多数招聘系统（如 ATS）无法解析单页 HTML 中的语义结构，innerHTML 里的 section 或 article 标签对机器来说只是文本块，简历内容大概率被切碎、错位或丢弃。真正投递时，务必另导出 PDF（且是语义清晰、无 JS 渲染依赖的 PDF），HTML 页只用于个人网站或邮件内嵌预览。
怎么让 HTML 页面同时承载求职信与简历结构？
核心是用语义化标签划分逻辑区块，而非视觉堆砌。求职信和简历不是“左右分栏”或“上下拼接”，而应有明确的 DOM 边界与可访问性标记：
-
<main></main>包裹全部内容，避免用<div id="content"> 这类无意义容器<li>求职信用 <code><section aria-labelledby="cover-letter-heading"></section>，顶部加<h2 id="cover-letter-heading">求职信</h2> - 简历用
<section aria-labelledby="resume-heading"></section>，同样配<h2 id="resume-heading">简历</h2> - 两者之间插入
<hr aria-hidden="true">（非装饰性分隔线需用role="separator"） - 打印样式表里，对所有
section显式设置break-inside: avoid - 禁用
position: fixed/absolute—— 打印时它们常消失或错位 - 用
@page { size: A4; margin: 0.5in; }控制纸张，但别依赖page-break-before，它在 Safari 和 Edge 中兼容性差 - 测试时用 Chrome 的“另存为 PDF”，而非“打印 → 保存为 PDF”，前者保留更多布局控制
- 所有关键信息（姓名、电话、邮箱、技能关键词、公司名、职位名）必须是纯文本节点，不能藏在
data-*属性、aria-label或 JS 动态插入的innerHTML中 - 避免用 SVG 图标代替“电话”“邮箱”文字，ATS 看不到
<text></text>以外的内容 - 教育经历、工作经历必须用有序/无序列表（
<ol></ol>/<ul></ul>），ATS 对列表项的解析稳定度远高于<div class="item"> <li>技能栏别写成 <code><span class="skill">React</span><span class="skill">TypeScript</span>，改用逗号分隔的段落：<p>JavaScript, TypeScript, React, Node.js</p>
为什么不能用 CSS Flex/Grid 强制“一页打印”？
浏览器打印时，display: flex 或 grid 容器极易触发跨页截断（尤其在 Chrome），导致求职信后半截和简历头部挤在同一张纸上，或者关键模块被切到第二页空白处。更糟的是，某些企业邮箱（如 Outlook Web）会剥离 @media print 规则，直接渲染屏幕样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
如何让 ATS 至少能读到文字内容？
ATS 不解析 CSS，也不执行 JS，但它会提取 textContent。这意味着：
最易被忽略的一点：字体。用 font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 这类系统字体栈，而不是自定义 Web Font（如 Google Fonts）。很多 ATS 在解析时会跳过 @import 或 <link rel="stylesheet">，导致文字回退成不可读的默认字体，甚至乱码。
