纯HTML简历核心是语义化结构：用划分模块并配标题，确保姓名、联系方式、技能和最近经历3秒内可读；需支持手机缩放、打印不乱码、ATS可解析，禁用套壳、JS加密及固定宽度。
用纯HTML写一份标准网页简历，核心不是“多好看”，而是让姓名、联系方式、技能和最近一段经历在3秒内被准确读取——结构语义清晰、手机能正常缩放、打印不乱码、ATS系统能解析，这四点没做到，其他都是锦上添花。
用 <section></section> 划分模块，别用 <div> 套壳
<p>浏览器和ATS（如Workday、Greenhouse）靠语义标签识别内容类型。<code><div class="experience"> 在它们眼里就是空容器；而 <code><section id="experience"><h2>工作经历</h2></section> 才会被当作可索引的独立区块。
- 每个模块用一个
<section></section> 包裹，配唯一 id 或语义化 class（如 class="education"）
-
<h2></h2> 必须作为模块标题（“教育背景”“技能列表”），<h3></h3> 用于子项（学校名、公司名）
- 禁用嵌套式容器：
<div class="wrapper"><section>...</section></div> 会干扰打印分页和屏幕阅读器顺序
mailto: 和 tel: 链接必须显式写出，且不能依赖 CSS 样式
<section></section> 包裹，配唯一 id 或语义化 class（如 class="education"）<h2></h2> 必须作为模块标题（“教育背景”“技能列表”），<h3></h3> 用于子项（学校名、公司名）<div class="wrapper"><section>...</section></div> 会干扰打印分页和屏幕阅读器顺序mailto: 和 tel: 链接必须显式写出，且不能依赖 CSS 样式Gmail 会剥离所有 <style></style> 标签，并重置链接样式。如果邮箱只写 x@y.z，默认灰字+无下划线，HR 很可能直接忽略。
- 正确写法：
<a href="mailto:x@y.z">x@y.z</a>，电话同理：<a href="tel:+86181****5874">+86 181****5874</a> - 别用 JS 加密、图片替代或
<span></span>模拟链接——ATS 和屏幕阅读器都读不到 - 测试方法：把 HTML 发给自己 Gmail，看链接是否可点击、颜色是否可见
@media print 必须硬编码三件事，否则导出 PDF 就是灾难
Chrome “另存为 PDF” 使用独立渲染引擎，不支持 flex、rem 不稳定、中文字体 fallback 成方块——这不是你 HTML 写错了，是没告诉它“怎么印”。
立即学习“前端免费学习笔记（深入）”；
- 强制指定中文字体栈：
@media print { body { font-family: "Noto Sans CJK SC", "Source Han Sans CN", sans-serif; } } - 禁用弹性布局：
@media print section { display: block; margin-bottom: 16px; }（display: flex在 PDF 里基本失效） - 防跨页断裂：
@media print section { break-inside: avoid; }，尤其对“工作经历”这种长模块
移动端适配不是加一句 <meta name="viewport"> 就完事
真正起作用的是 HTML 结构本身是否允许收缩。很多人加了 viewport 却依然要左右滑动，问题出在宽度控制上。
- 删掉所有固定像素宽：
width: 800px、style="width:960px"这类写法必须清零 - 图片统一加
style="max-width: 100%; height: auto;"，别用width="200" - 用
<section></section>替代居中<div>，让文本自然折行；别用 <code>white-space: nowrap强制单行最常被忽略的一点：本地双击打开没问题，一上传 GitHub Pages 就变纯文字——90% 是 CSS 路径写死（比如
href="css/style.css"），剩下 10% 是文件名大小写不符（Windows 不敏感，Linux 敏感）。部署前务必检查index.html是否小写、是否在根目录、所有路径是否相对且全小写。
