<p>标签只允许嵌套行内元素，禁止嵌套<div><h2><ul>等块级元素；浏览器会自动修正非法嵌套，将<p>强制闭合，导致DOM结构变为<p></p><div>内容</div><p></p>，引发样式失效、JS选择器失配等问题。
直接用 <p> 包裹每一段独立文字，浏览器会自动加间距——这是最稳妥、语义最清晰的做法，别试图用 <br> 或空格硬凑段落。
为什么不能用多个 <br> 代替 <p>
视觉上可能看起来一样，但语义完全不同：<br> 只是换行，<p> 表示一个完整语义段落。屏幕阅读器、搜索引擎、SEO 工具都依赖这个区别。比如一段新闻正文里混着地址或作者信息，硬塞进 <p> 会导致结构误判；反过来，该用 <p> 的地方只写 <br>，辅助技术就无法识别段落边界。
- 错误写法：
<p>第一行<br>第二行<br>第三行</p>→ 实际只有一个段落，三行只是强行换行 - 正确写法：
<p>第一段内容</p><p>第二段内容</p>→ 两个独立段落，各自有语义和默认 margin - 地址、签名、诗句等非自然语言块，应考虑用
<address>、<blockquote>或纯<div>，而非滥用<p>
<p> 里能嵌套什么？不能嵌套什么？
<p> 是块级元素，但内容模型严格：只允许嵌套行内元素（如 <strong>、<em>、<a>、<code>），禁止嵌套任何块级元素（包括 <div>、<h2>、<ul>、甚至另一个 <p>）。
- 浏览器会“修复”非法嵌套：遇到
<p><div>xxx</div></p>，实际解析为<p></p><div>xxx</div><p></p>，导致意外空白和样式断裂 - 想包裹多段内容？用
<div class="article">或语义化容器（如<article>）包住多个<p>，而不是反向操作 -
<code>这类行内元素可以安全放在<p>里，比如解释代码逻辑的段落：<p>调用 <code>fetch()时需处理404状态码。</p>
怎么改段落间距？只动 margin，别碰 padding 和 line-height
浏览器默认给 <p> 加的是 margin-top 和 margin-bottom（通常是 1em），这是段距的唯一合法来源。用 padding 会让内容“撑开”段落内部，用 line-height 是调行高，不是段距。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 统一调整：
p { margin: 1.2em 0; }—— 上下各 1.2em，左右无边距 - 首尾去边距：
.content p:first-child { margin-top: 0; } .content p:last-child { margin-bottom: 0; } - 避免只设
margin-top：相邻段落的margin-top和margin-bottom会合并（margin collapsing），只设一个容易出错 - 中文首行缩进用
text-indent: 2em，不是32px—— em 随字体缩放，更健壮
HTML5 中废弃了哪些 <p> 属性？现在怎么控制对齐？
align 属性在 HTML4 就被标记为废弃，HTML5 完全移除。所有样式控制必须走 CSS。
- 水平对齐：
text-align: left | center | right | justify，可写在style里或外部 CSS 中 - 错误示范：
<p align="center">xxx</p>—— 浏览器可能忽略，且校验不通过 - 响应式场景下，
text-align可配合媒体查询动态切换，比如小屏左对齐、大屏居中 - 注意：
text-align只影响行内内容对齐，不影响<p>自身在父容器中的位置（那得用margin或 Flex/Grid）
真正容易被忽略的点在于：段落不是“视觉占一行的东西”，而是“自然语言中的一组完整陈述”。语义错位比样式错位更难调试，也更影响长期维护。写完检查一遍——每个 <p> 是否真的表达一个独立语义单元，比调完 margin 更关键。
