HTML5 允许 <li> 内嵌 <p>，但需注意样式控制与语义清晰：避免默认 margin 不一致、外边距塌陷及行高错位，短内容或代码块等场景不宜使用 <p>。
有序列表里直接写 <p> 会出什么问题
浏览器会自动闭合 <ol>，导致后续列表项变成普通文本。比如写成这样：
<ol> <li><p>第一段说明文字</p></li> <li><p>第二段说明文字</p></li> </ol>
看似合理，但部分旧版浏览器（如 IE8）或严格解析的 HTML 验证器会报错：「<p> 不允许作为 <li> 的子元素」——其实这是误解，<p> 完全合法，真正的问题是：如果 <p> 内部还有换行、空格或内联元素混排，容易触发意外的 margin 折叠或行高错位。
<li> 里嵌套段落的正确写法
HTML5 明确允许 <li> 包含流内容（flow content），<p> 就是其中之一。关键在于控制样式和语义清晰度：
- 始终用
<p>包裹纯段落文本，别用<br>模拟换行 - 如果一段里要混排链接、强调词，
<p>内可直接放<a>、<em>等内联元素 - 避免在
<li>里同时塞多个<p>+<div>+ 文本节点，易造成垂直间距不可控
示例（安全、语义明确）：
立即学习“前端免费学习笔记（深入）”；
<ol> <li><p>初始化配置需在 <code><script></code> 标签加载完成后执行。</p></li> <li><p>调用 <code>init()</code> 前请确保 DOM 已就绪，否则可能返回 <code>null</code>。</p></li> </ol>
用 CSS 控制段落间距比依赖默认 margin 更可靠
不同浏览器对 <p> 在 <li> 中的默认 margin 处理不一致，尤其在移动端。与其猜，不如显式重置：
- 给
ol li p设置margin: 0.5em 0，比默认1em更紧凑 - 若想让整个列表项垂直居中对齐编号，用
display: flex; align-items: flex-start包裹<p> - 禁用
<p>首尾外边距塌陷：给li加overflow: hidden或padding-top: 0.1px
什么时候不该在 <li> 里用 <p>
当内容不是完整段落，而是短提示、代码片段、或需要精确对齐的多行结构时，<p> 反而增加样式负担：
- 单行说明（如「点击按钮提交表单」）直接写在
<li>里更轻量 - 含
<pre><code>的代码块，应单独包裹，不塞进<p> - 需要响应式缩进或悬垂缩进的场景，用
<div class="desc">替代<p>，便于独立控制
真正麻烦的不是能不能放 <p>，而是放了之后忘了统一处理它的上下文间距和行高继承。多数人卡在这一步，而不是语法本身。
