用划分语义段落，划分带标题的主题章节，禁用/模拟段落；用于独立语义单元，须含标题，仅适用于代码等需保留格式场景。
直接说结论：用 <p></p> 划分语义段落，用 <section></section> 划分主题章节，别用 <div> 或多个 <code><br> 代替 —— 否则结构混乱、可访问性差、后期改样式像拆雷。
什么时候该用 <p></p> 而不是 <div><p>核心判断标准就一条：这段文字是不是一个完整、独立的语义单元？比如一句话讲完一个观点、一段说明一个操作步骤、一句引文加出处 —— 这些都该套 <code><p></p>。它自带默认 margin，浏览器和屏幕阅读器都认它为“段落”。<div> 没语义，纯容器，适合装卡片、模块、广告位这类需要自定义布局的块，不是用来替代段落的。<p>常见错误现象：<br>
- 把整篇正文塞进一个 <code><div>，再靠 <code>text-align 或 margin 硬调对齐和间距
- 在 <p></p> 里嵌套 <div> 或另一个 <code><p></p>（HTML 验证会报错）
- 用多个 <br> 模拟段落空行，结果在响应式下错位、缩放时行距崩塌
实操建议：
- 每个自然段单独包一层 <p></p>，哪怕只有一句话
- 删除段首手动敲的空格或全角空格，用 CSS 的 text-indent 控制首行缩进
- 如果要统一控制段间距，写 p { margin: 1.4rem 0; }，别在每个 <p></p> 上加 style
<section></section> 的正确打开方式
<section></section> 不是“多套一层 div 更高级”，它必须满足两个条件：有独立主题 + 通常带标题。比如博客正文里的“安装步骤”“配置说明”“常见问题”，每个都可以是一个 <section></section>，且里面至少得有一个 <h2></h2> 或更高级别的标题。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 把所有 <div class="section"> 直接替换成 <code><section></section>，却不补标题 —— 这违反 W3C 语义规范，辅助技术无法识别
- 在 <section></section> 里只放几个 <p></p>，没标题也没上下文，变成“伪语义”
- 和 <article></article> 混用：单篇博客是 <article></article>，它里面的子章节才是 <section></section>
实操建议：
- 先写标题，再套 <section></section>：<h2>环境准备</h2>
<section>...</section>
- 用 section h2:first-child 统一设置章节标题样式，避免重复类名
- 不强制要求每个 <section></section> 都有 border 或 background，视觉隔离靠 margin 或 padding 就够
为什么别碰 <pre class="brush:php;toolbar:false;"></pre> 分段
<pre class="brush:php;toolbar:false;"></pre> 是为保留原始换行、空格、缩进而设计的，常用于代码块或 ASCII 艺术。它默认禁用自动换行（white-space: pre），一旦里面塞普通中文段落，超长句子会横向撑破容器，移动端直接滑出屏幕。
典型错误：
- 把长说明文本放进 <pre class="brush:php;toolbar:false;"></pre> 只为“看起来分段了”
- 用 <pre class="brush:php;toolbar:false;"><code></code> 套非代码内容，导致字体等宽、行高异常、SEO 无法提取正文<br>
- 依赖 <code><pre class="brush:php;toolbar:false;"></pre> 的默认缩进来模拟段落结构，结果字体一换、字号一调，排版全乱
实操建议：
- 普通段落永远走 <p></p> + CSS
- 真要保留格式（如日志、配置片段），才用 <pre class="brush:php;toolbar:false;"><code></code>，并加 <code>overflow-x: auto</code> 防溢出<br>
- 用 <code>word-break: break-word</code> 或 <code>overflow-wrap: break-word</code> 处理超长无空格字符串，而不是靠 <code><pre class="brush:php;toolbar:false;"></pre>
响应式段落间距怎么设才靠谱
固定像素值（如 margin-bottom: 20px）在不同设备上表现不稳定，尤其用户调大系统字体时，段距可能变得过大或过小。真正可控的是相对单位 + 逻辑组合。
关键点：
- 用 rem 或 em，不是 px：比如 p { margin-bottom: 1.5rem; }
- 连续段落间去冗余上边距：p + p { margin-top: 0; }，避免双倍空白
- 移动端可收紧间距：@media (max-width: 768px) { p { margin: 1rem 0; } }
- 别在 <p></p> 上设 padding 来“撑开”段落 —— padding 会干扰行高基准线，导致文字上浮或下沉
性能影响很小，但兼容性很实在：iOS Safari 对 rem 支持稳定，老 Android 浏览器也无压力；而硬写 px 加 media query，维护成本翻倍。
最易被忽略的其实是段落边界感 —— 很多人只调行高和字距，却忘了段与段之间需要明确的视觉停顿。这个停顿不是越大越好，而是要和字体大小、行高、容器宽度形成比例关系。调完记得用系统缩放（125%、150%）和窄屏预览，看段落是否还“呼吸”得自然。
