HTML简历应使用语义化<section>划分模块，配<h2>标题，避免嵌套过深；<header>仅含姓名联系方式；日期用<time>，列表用<ul><li>，链接用mailto/tel；打印和移动端需针对性CSS优化。
用 <section> 划分模块，别堆 <div>
简历不是网页布局练习，而是结构化信息的线性呈现。用 <section> 明确划分“个人信息”“工作经历”“教育背景”等逻辑块，比全用 <div> 更可靠——浏览器、打印预览、ATS 系统和屏幕阅读器都能据此识别内容层级。
常见错误是把整个简历包在一个大 <div class="container"> 里，再塞一堆无语义的子 <div>。结果是：CSS 很难精准控制某一块的间距，打印时模块容易被截断，辅助工具读不出哪段属于“技能”。
- 每个
<section>必须配一个<h2>（不能是<h1>或<h3>），例如<section class="experience"><h2>工作经历</h2>...</section> - 避免嵌套超过三层：
<section> > <div> > <p>可以，但<section> > <div> > <div> > <div>就该重构 - 如需增强可访问性，给
<section>加aria-label，比如<section aria-label="工作经历">
<header> 只放顶部信息，别塞求职意向
<header> 在 HTML5 中语义明确：它代表整个页面的页眉，不是任意“标题区域”。把它用在简历顶部，只包裹姓名、联系方式、邮箱这些一眼要看到的内容，是最稳妥的做法。
很多人误把“求职意向”或“个人简介”也塞进 <header>，结果导致结构失衡——<header> 被当成导航区处理，某些 PDF 导出工具会把它单独提成封面页，正文从第二页开始。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<header><h1>张三</h1><p>138****1234 | zhangsan@example.com</p></header> - “个人简介”应放在独立
<section class="profile">里，用<h2>开头 - 邮箱链接必须用
<a href="mailto:zhangsan@example.com">，别用图片或 JS 加密，否则 ATS 无法提取
时间、列表、联系方式必须用语义标签
日期、技能条目、联系信息这些看似简单的内容，用错标签会直接破坏打印效果和可访问性。比如用纯文本写“2020.03–2022.08”，打印时可能被截断；用 <br> 模拟技能列表，小屏下会挤成一团。
核心原则：让浏览器知道“这是什么”，而不是“让它看起来像什么”。
- 日期统一用
<time datetime="2020-03">2020.03–2022.08</time>，datetime属性确保机器可读，显示文本可自由格式化 - 技能、职责、课程这类并列项，一律用
<ul><li>，别用<p>+<br>，否则响应式下换行不可控 - 电话号码加
<a href="tel:+86138****1234">，既支持手机点击拨打，也防止爬虫误判为普通文本
打印和移动端适配的关键 CSS 控制点
一份 HTML 简历，90% 的翻车发生在打印预览或手机打开时：文字撑出屏幕、背景色盖住文字、模块错位、页眉页脚乱入。这些问题不是 CSS 写得不够炫，而是忽略了两个媒体场景的默认行为差异。
最常被忽略的是：浏览器打印样式表会继承屏幕样式，而移动端视口解析依赖 <meta name="viewport"> 的精确配置。
- 必加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 默认缩放成一团 - 主容器设
max-width: 800px+margin: 0 auto，防止大屏拉伸变形 - 打印样式中禁用所有背景：
@media print { * { background: transparent !important; } }，否则黑白打印机印出大片灰块 - 小屏下强制换行：
word-break: break-word加在<p>和<section>上，专治长邮箱、GitHub 地址溢出
真正难的不是写出能看的简历，而是让同一份 HTML，在 Chrome 打印预览里不截断、在 iPhone Safari 里不缩放、在招聘系统 ATS 里被准确提取字段——这三点对齐了，结构才算真正“清晰”。
