标签不能嵌套，因HTML规范禁止块级元素嵌入段落中；浏览器会自动闭合生成结构，导致语义断裂、布局错乱和DOM异常。
标签不是换行符，也不是撑间距的工具；它只干一件事：标记一个语义完整的文本单元。用错就等于把整篇文章塞进一个“黑箱”，SEO、屏幕阅读器、CSS 控制全会失效。
为什么 p 标签必须闭合且不能嵌套块级元素
浏览器遇到 <p></p>
<div>内容</div>
<div> 前闭合 <code><p></p>，导致 DOM 结构意外截断——你写的 HTML 和实际渲染的 DOM 可能完全不一致。
- 常见错误：
<p></p> <h2>标题</h2>正文——<h2></h2>会被踢出<p></p>，变成兄弟节点，语义断裂 - 正确做法：标题和段落是平级关系，应写成
<h2>标题</h2> <p>正文</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 诗歌、地址等需强制保留换行的场景，用
<pre class="brush:php;toolbar:false;"></pre>或<br>，别硬塞进<p></p>
text-align 是唯一靠谱的对齐控制方式
align 属性在 <p></p> 上已彻底被 HTML5 废弃，Chrome 120+、Firefox 128、Safari 17+ 直接忽略，仅 quirks mode 下可能偶然生效——这不是兼容，是历史残留。
- 错误写法：
<p align="center">居中文字</p>，Lighthouse 扫描直接报错 - 正确写法：
<p style="text-align: center">居中文字</p>，或定义 CSS 类.text-center { text-align: center; } -
text-align: justify对中文默认无效，需加text-justify: inter-character（仅 Chromium 支持），且要求容器有明确宽度 + 文本足够长才能换行拉伸
段落间距和首行缩进必须用 CSS 控制
别用空 <p></p> 撑空白，也别靠 <br> 模拟段落分隔——这会让 CSS 无法精准控制，响应式断点也容易崩。
- 首行缩进统一用
text-indent: 2em，不是margin-left或全角空格 - 段落间距改
margin-top和margin-bottom，默认值是1em，删了再手动加反而更难维护 - 某段紧贴标题下方？明确设
margin-top: 0，别指望“不写就等于没” - 想批量控制一组段落？用容器包裹：
<div class="article-body"> <p>...</p> <p>...</p> </div>
最容易被忽略的其实是语义边界：一个 <p></p> 应该表达一个完整意思，而不是“我按了 Enter 键”或“刚好填满一行”。换行键 ≠ 段落分割符，这是从 Markdown 养成的习惯，在 HTML 里必须主动重构。
