标签必须包裹完整语义单元，仅允许嵌套行内元素，段距用margin控制，首行缩进用text-indent: 2em；滥用会导致dom断裂、样式错位与可访问性问题。
段落必须用 <p></p> 包裹完整语义单元
不是换行工具，也不是样式占位符。只要内容构成一个逻辑上独立、可被单独理解的文本块，就该用 <p></p> 包裹——比如“用户提交后，系统将在 5 秒内返回结果。”就是一个合格段落；而“点击”“确认”“完成”这种碎片词，不该各自套 <p></p>。
常见错误是 CMS 或富文本编辑器把回车直接转成空 <p></p>，它会渲染出带默认 margin 的空白块，导致布局偏移。检查源码时看到连续多个 <p></p>，基本可以判定语义失控。
- ✅ 正确：
<p>注册成功，您现在可以登录账户。</p> - ❌ 错误：
<p>注册成功，</p> <p>您现在可以登录账户。</p>（语义割裂） - ⚠️ 危险：
<p></p> <div class="alert">警告信息</div>（浏览器自动截断为<p></p> <div>...</div> <p></p>）
<p></p> 内只能嵌套行内元素
HTML 规范明确限制 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 的内容模型：只允许文本节点、<strong></strong>、<em></em>、<a></a>、<img>、<code> 等行内级元素。一旦出现 <div>、<code><h3></h3>、<ul></ul> 或另一个 <p></p>，解析器会立即闭合当前 <p></p>，造成 DOM 结构意外断裂。
比如写 <p>说明如下：</p>
<ul><li>支持 JSON 格式</li></ul>
<p>说明如下：</p>
- 支持 JSON 格式
这会导致样式错位、选择器失效，甚至影响屏幕阅读器播报顺序。
段落间距必须靠 margin 控制，而非 line-height 或 padding
浏览器默认给 <p></p> 加的是 margin-top 和 margin-bottom（通常各 1em），这是段落间“呼吸感”的来源。想调整间距，就直接覆盖这两个值：
- 全局微调：
p { margin: 0.75em 0; } - 首段去顶边距：
.article p:first-child { margin-top: 0; } - 末段去底边距：
.article p:last-child { margin-bottom: 0; }
用 line-height 拉高来“凑”段距，会让段内行距异常；用 padding 则是在段落内部撑开空间，不解决块级分隔问题，还可能触发不必要的滚动条或盒模型溢出。
首行缩进必须用 text-indent，且优先选 2em
中文排版要求首行缩进两个汉字宽度，text-indent: 2em 是唯一可靠方案。它基于当前字体大小计算，用户放大字号、切换系统 DPI 或启用强制缩放时仍能保持比例一致。
写成 text-indent: 32px 表面看一样，但一旦用户将浏览器缩放设为 150%，或在 2K 屏上使用系统级字体缩放，缩进就会失准——要么太窄像没缩进，要么太宽挤占正文。
注意：text-indent 只作用于首行，不影响后续换行；而用空格或全角空格实现缩进，既不可访问，又容易被 CMS 清洗掉，也不响应字体变化。
<p></p>，而是守住它的语义边界：当富文本编辑器粘贴进来一堆 <div> 块、当设计师要求“这里多空一行”，当后端模板拼接时忽略闭合标签——这些时刻，<code><p></p> 往往第一个被牺牲。它不显眼，但一旦松动，可访问性、SEO、CSS 可维护性都会连锁塌方。
