纯HTML前端简历核心是结构准、导出稳、手机可读、ATS友好：用包姓名职位及mailto/tel链接，每段经历用模块名公司/职位时间，技能用，项目用，加设line-height、max-width、break-inside: avoid及@media print适配。
纯 HTML 制作前端简历，核心不是“写得多”，而是“结构准、导出稳、手机能点开、ATS 不拒收”——这四条没踩实，加再多 CSS 动画也没用。
怎么用语义化标签搭出 ATS 友好结构
ATS（简历筛选系统）本质是文本提取器，它靠标签层级和顺序判断信息类型。用一堆 <div> 套 <code><p></p>，等于把姓名、公司、时间全扔进一锅粥里煮，ATS 很可能漏掉关键字段。
-
<header></header>必须只包一次：姓名 + 职位 +<a href="mailto:xxx"></a>和<a href="tel:+86..."></a>，别塞其他内容 - 每段经历用
<section></section>包裹，<h2></h2>写模块名（如“工作经历”），<h3></h3>写公司/职位，<p></p>写时间范围（别用<small></small>或<span></span>包日期） - 技能列表必须用
<ul></ul>，每项一个<li>；别写成 “React, Vue, TypeScript” 一行字符串——ATS 无法拆分，屏幕阅读器也读不出项数 - 项目经验优先用
<dl></dl>：<dt></dt>放项目名，<dd></dd>放技术栈+简述，比<h3>+</h3> <p></p>更易被解析
为什么不能只靠浏览器默认样式
Chrome 默认 <h2></h2> 行高约 1.2，打印时两段经历容易被页眉压住；Firefox 对 <ul></ul> 的缩进是 40px，手机横屏直接溢出。不加最小干预，等于把排版权交给浏览器随机发挥。
- 必须在
里加<style></style>块（别外链），至少包含：body { line-height: 1.6; max-width: 800px; margin: 0 auto; } -
<a></a>标签要显式设text-decoration: none，否则打印 PDF 时邮箱链接带下划线，HR 可能误以为是强调重点而非可点击项 - 所有图片加
style="max-width: 100%; height: auto;"，否则本地双击打开正常，GitHub Pages 上因路径或大小写问题变成 404 占位图 - 禁用
font-size: 16px这类绝对值，改用1rem或1.1em，否则 iOS Safari 缩放逻辑会把文字缩到看不清
导出 PDF 时内容被截断的真正原因
不是 HTML 写错了，是 Chrome 打印引擎默认按“页面流”切分，遇到长 <ul></ul> 或未闭合的 <section></section> 就硬砍。你看到的“第二页只剩半行”，其实是它把整个 <section></section> 拆到了两页。
立即学习“前端免费学习笔记（深入）”；
- 给每个
<section></section>加style="break-inside: avoid;"，强制整块内容留在同一页 - 在
<style></style>里加@page { size: A4; margin: 0.5in; }，否则默认页边距为 0，联系方式紧贴纸边，打印机可能直接切掉 - 测试前务必用 Chrome DevTools → Rendering → Emulate CSS media type: print，比反复“另存为 PDF”快十倍
- 删掉所有
background-color和box-shadow，PDF 导出默认不渲染背景色，留着只会让代码变重、无实际效果
GitHub Pages 部署后样式丢失怎么办
本地双击 index.html 正常，上传到 github.io 变纯文字——90% 是路径问题，剩下 10% 是大小写敏感惹的祸。Windows 文件系统不区分 Style.css 和 style.css，Linux（GitHub Pages 底层）会 404。
- CSS 必须写在
<style></style>标签内，单文件即用，彻底规避路径风险 - 如果坚持外链 CSS，引用路径必须是相对路径：
<link rel="stylesheet" href="style.css">，且文件名全小写、无空格 - 检查
<meta charset="UTF-8">是否存在，缺失会导致中文乱码，看起来像样式失效 - 部署后右键 → 查看页面源代码，搜索
<style></style>是否被完整加载，而不是被 GitHub Pages 的 Jekyll 自动过滤掉
最常被忽略的一点：前端简历不是作品集，不需要展示 Flex 布局或 CSS Grid 动画。重点是让 HR 在 3 秒内扫到你的技术栈和最近一段经历——所有结构、样式、导出逻辑，都该为这个目标服务，而不是为“看起来像前端工程师”服务。
