所有语义上独立的文字段落都必须用 <p> 标签，如新闻稿每段、产品功能点、FAQ问答；禁止多短句塞入同一<p>或滥用<br>；<p>须有明确主题边界，不跨逻辑单元，且标题后直接跟<p>为自然节奏。
正文里哪些地方必须用 <p> 标签
不是所有换行都需要 <p>，但所有语义上独立的文字段落都必须用。比如新闻稿里每一段话、产品描述中每个功能点、FAQ 中每个问题回答——只要它能单独成句、表达完整意思，就该包一层 <p>。
常见错误是把多个短句塞进一个 <p> 里，或者用 <br> 模拟段落分隔。前者让屏幕阅读器无法准确播报停顿，后者会让 CSS 的 margin 控制失效。
- 每个
<p>应该有明确的主题边界，不跨逻辑单元 - 列表项（
<li>）、表格单元格（<td>）内部不用<p>，除非内容本身是多段文字 - 标题（
<h2>~<h6>）后直接跟<p>是自然节奏，但不要为了“对齐”而硬加空<p>
<div> 和 <section> 在正文中的分工怎么划
<div> 是无语义容器，只在没更合适标签时兜底；<section> 必须带主题，且通常紧跟一个 <h2> 或更高阶标题。正文里混用这两者，最容易导致结构模糊。
比如「用户评价」区块：用 <section class="reviews"> + <h2>真实用户反馈</h2> 是合理的；写成 <div class="reviews"> 就丢失了语义，CSS 和 JS 都得靠 class 硬匹配，可访问性也弱。
立即学习“前端免费学习笔记（深入）”；
-
<section>不等于“视觉上的一块”，它代表文档大纲里的一个章节 - 嵌套
<section>要有层级关系，比如「产品介绍」下再分「性能」「设计」「服务」三个子<section> - 纯布局包裹（如 flex 容器、栅格行）用
<div>，别强行套语义标签
空白行要不要写进 HTML 源码里
HTML 解析器会忽略源码中的多余空白和换行，所以空行纯粹是给人看的。但正因如此，它才关键——空行是视觉锚点，帮你一眼识别模块边界。
VS Code 里按 Ctrl+Shift+I 格式化后，工具默认会在 <header>、<main>、<footer> 之间加空行，也会在 <section> 前后留空行。但别让它在 <p> 内部或属性值中间插空行，那反而干扰扫描。
- 空行只加在逻辑区块之间：比如表单前后、评论区上下、两个
<article>之间 - 同一
<section>内的多个<p>之间不加空行（靠 CSS 的margin控制间距） - 如果用了 Prettier，确认已开启
html.format.wrapAttributes: "auto"，避免长属性被格式化成难以阅读的多行
class 名在正文标签里怎么分布才不乱
类名不是越多越好，正文里每个标签的 class 应该只表达它的**角色**，而不是样式或状态。比如 <p class="intro-text"> 比 <p class="text-lg font-bold mb-4"> 更可持续——后者一旦设计改版，class 就全得重写。
更麻烦的是 class 泛滥：一个 <p> 上堆 col-span-6 sm:col-span-4 text-gray-700 leading-relaxed，既难维护，又让 HTML 失去语义焦点。
- 正文段落优先用语义 class，如
lead-paragraph、callout-text、footnote - 避免在
<p>上写响应式类（如sm:text-sm），这类控制应交给 CSS 的媒体查询 - 如果某段文字需要特殊处理（比如首行缩进、引用样式），用独立 class，不要复用布局类
<p> 就该启动的习惯。空行位置、class 命名、标签选择，三者共同决定你三天后能不能快速定位到那段要改的正文——而不是靠 Ctrl+F 搜“用户反馈”再手动扒 DOM 结构。 
