层次分明的关键在于语义结构准确、CSS克制、内容权重清晰：用等语义标签替代套娃，配合outline+margin控制视觉层级，响应式设计适配移动端，删减冗余信息突出关键内容。
纯 HTML 制作的求职简历，层次分明的关键不在于用多少标签，而在于语义结构是否准确、CSS 控制是否克制、内容权重是否清晰——否则很容易变成一堆 <div> 堆出来的“看起来像简历”的页面。
<h3>用语义化标签代替 <div> 套娃
<p>浏览器和屏幕阅读器靠标签含义理解内容层级，不是靠缩进或字体大小。比如：</p>
<ul><li>
<code><header></header> 放姓名、联系方式（不是 <div class="top">）
<li>
<code><section></section> 包裹“教育背景”“工作经历”等主模块（每个 <section></section> 应有 <h2></h2>）
<article></article> 用于每段独立工作经历（可含自己的 <h3></h3> + <time></time>）<ul></ul> 和 <li> 表达职责条目，别用 <p></p> + 换行模拟错误示例：<div class="job-item">
<div class="title">前端工程师</div>...</div> —— 这会让辅助工具无法识别标题层级，也增加 CSS 维护成本。
用 CSS 的 outline + margin 控制视觉层级，而非仅靠 font-size
字号差异太小看不出层次，太大又破坏节奏。更可靠的是组合使用：
立即学习“前端免费学习笔记（深入）”；
-
h1：姓名（font-size: 2.25rem，加粗，顶部居中） -
h2：模块标题（font-size: 1.5rem，border-bottom: 2px solid #333，上下留margin: 1.8rem 0 1rem） -
h3：公司/学校名（font-size: 1.25rem，margin: 0.5rem 0 0.25rem） -
time：日期（font-size: 0.9em，color: #666，紧跟h3后面，不换行）
注意：别用 padding-top 推开上一个模块——用 margin-bottom 作用于当前模块更可控，避免外边距合并（margin collapse）导致意外空白。
避免“简历即简历 PDF”的思维陷阱
HTML 简历不是 PDF 的翻版。它天然支持交互与响应式，但很多人硬套 A4 尺寸、固定像素排版，结果在手机上要左右拖拽。实际应：
- 用
max-width: 800px限制主体宽度，居中显示（margin: 0 auto） - 关键信息（如姓名、邮箱、GitHub）在移动端优先展示，用
@media (max-width: 600px)调整flex-direction或隐藏次要字段（如“熟练掌握 Webpack”可收进折叠区域） - 禁用
user-select: none—— 招聘方可能想复制你的邮箱或电话 - 所有链接（LinkedIn、作品集）必须加
rel="noopener noreferrer"，否则存在安全风险
测试时直接在 Chrome DevTools 里切到 iPhone SE 尺寸，看联系方式是否一屏可见、时间是否挤成一团——这才是真实场景。
真正难的不是写完，而是删减：每多一个“精通 React”，就要少一个具体项目里的技术细节；每加一种字体，就多一分加载失败的风险。层次分明的本质，是让招聘方 3 秒内找到他关心的信息，而不是让你的代码看起来很“专业”。
