必须重置默认样式并显式控制font-size、line-height、margin三组关系，用section划分逻辑模块，首行缩进用text-indent: 2em，中英文混排需分别设置letter-spacing和line-height。
为什么只用 <p> 和 <h2> 看不出层次
浏览器给 <h1> 到 <h6>、<p> 都加了默认样式，但它们的视觉差异很弱：比如 <h3> 可能只比 <p> 大 2px，行高还一样，人眼根本分不清哪是标题、哪是正文。更麻烦的是，这些默认值在不同浏览器里还不一致——Safari 的 <p> 默认 margin-bottom 是 1em，Firefox 是 1.12em，没统一重置就等于把排版权交给了浏览器。
必须显式控制三组关系：font-size、line-height、margin。不能只调字号，否则文字会“贴”在一起；也不能只调 line-height，否则段落之间没呼吸感。
-
<h2>和<h3>的字号差至少得 1.3 倍（比如 24px → 18px），才够人眼识别层级 -
<p>的margin-bottom推荐设为1.5em，而<h2>后面要加大到2em，制造视觉停顿 - 所有标题必须配
font-weight: bold或更强（如700），普通段落别用bold，否则语义混淆
<h1> 只能有一个，但 <section> 可以有很多
很多人以为“有多个 <h2> 就代表有多个子模块”，其实不对。<h2> 是逻辑上隶属于 <h1> 的一级子项，如果页面里出现两个不相关的主题（比如“产品介绍”和“客户评价”），它们不该共用一个 <h1>，而该各自包裹进 <section>，每个 <section> 内部再用独立的 <h2>。
这样做的好处不只是 SEO，更是让 CSS 控制更干净：你可以写 section h2 { margin-top: 2.5em; }，而不用全局污染所有 <h2>。
立即学习“前端免费学习笔记（深入）”；
- 不要把
<section>当成“美化用的 div”——它必须有可被提取的独立意义，比如能单独 RSS 订阅、或被语音助手识别为一个完整播报单元 -
<section>内部第一个子元素最好是标题（<h2>或更高），否则屏幕阅读器可能跳过它 - 避免嵌套太深：
<section> > <article> > <section>这种三层结构会让 CSS 选择器失控，两层足够
段落缩进和间距不能靠空格或 <br>
用全角空格、<span> </span> 或连续 <br> 实现首行缩进，短期看着像样，长期维护就是灾难：字体一换，缩进像素数就得重算；响应式断点一加，移动端缩进可能变成两行空白；复制文本时还会把多余空格一起带出去。
真正可控的方式只有 CSS：text-indent: 2em ——单位用 em 而不是 px，这样缩进会随字号等比缩放；同时配合 margin 控制段落间距，而不是靠 <p> 默认值硬扛。
-
text-indent只对块级元素生效，所以别给<span>加，也别指望它在display: inline下起作用 - 如果某段是列表项开头、引用块或代码说明，首行不该缩进——用 class 区分，比如
<p class="no-indent"> -
<br>仅适用于地址、诗行、签名这类「内容即格式」的极少数场景，其他时候都是信号：你该用<p>或<div>重构了
中英文混排时 letter-spacing 和 line-height 得分开调
中文段落常用 line-height: 1.6、letter-spacing: 0.05em，但直接套在含英文的句子上，西文字符会显得松散甚至断词。因为英文字母本身有字怀（counter）和字间距（kerning）设计，额外加 letter-spacing 容易破坏原生节奏。
解决方案是用属性选择器局部覆盖：p:lang(zh) { letter-spacing: 0.05em; }，或者给中英文分别加 class，比如 <span class="en">HTML</span> 再针对性设 .en { letter-spacing: 0; }。
- 别用
text-rendering: optimizeLegibility全局开启——它会让小字号英文渲染变糊，只在font-size > 18px的标题里启用 - 中英文混排的
line-height建议设为1.7起步，因为英文字母 ascender/descender 更长，需要更多垂直空间 - 竖排场景下，
letter-spacing对西文影响翻倍，必须关掉：writing-mode: vertical-rl; letter-spacing: 0;
层次感最易被忽略的点，其实是“留白的节奏感”。不是所有段落间距都该一样，也不是所有标题都要加粗。真正的控制力，藏在你敢不敢删掉一行看似“保险”的 CSS，以及愿不愿意为一段话单独写一个 class。
