<ol>和<ul>的合法子元素只有<li>；其他任何标签（如<p>、<div>、<h3>）或空白文本若未包裹在<li>中，均会被浏览器自动修正，导致结构错乱、序号重置及语义丢失。
HTML标签嵌套出错，不是样式没生效，而是浏览器悄悄“帮你修”了结构——比如 <ol> 里直接放 <p> 或 <div>，浏览器会自动闭合当前列表、开新列表，导致序号重置、语义丢失、可访问性下降。
哪些元素只能直接放在 <ol> 或 <ul> 里面？
<ol> 和 <ul> 的合法子元素只有 <li>。其他任何标签（<p>、<div>、<h3>、甚至空格换行）如果未包裹在 <li> 中，都会被浏览器视为“非法内容”，触发自动修正逻辑。
- 错误写法：
<ol><p>Item one</p><li>Item two</li></ol>→ 浏览器实际解析为<ol></ol><p>Item one</p><ol><li>Item two</li></ol> - 正确写法：
<ol><li><p>Item one</p></li><li>Item two</li></ol> -
<li>是唯一允许嵌套块级元素的行级“容器”之一，它内部可以放<p>、<div>、<ul>等，但前提是它们必须在<li>开始标签之后、结束标签之前
<p> 标签里为什么不能放 <div> 或 <ul>？
<p> 属于“纯文本容器”，HTML 规范明确限定其内容模型为 phrasing content（即行内内容），不允许任何块级元素。哪怕加了 display: block 也没用——解析阶段就已失效。
- 错误：
<p><div>content</div></p>→ 浏览器强制拆成<p></p><div>content</div><p></p> - 替代方案：用
<div>替代<p>，或把块级内容提到<p>外作为兄弟节点 - 若需段落内分组，可用
<span>+ CSS，或语义更准的<small>、<em>等行内元素
<a> 和 <h1>~<h6> 的嵌套限制有哪些？
<a> 可以包含几乎所有行内元素（<strong>、<img>、<span>），但不能嵌套另一个 <a>；<h1>~<h6> 同样只接受行内内容，禁止直接塞 <div>、<p> 或列表。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<a href="#"><a href="#inner">nested</a></a>→ 第一个<a>在遇到第二个<a>开始标签时立即关闭 -
<h2><div>title</div></h2>→<div>被挤到<h2>外，变成兄弟节点 - 需要标题内带结构？用
<span class="sub">或<small>，再配 CSS 控制视觉层级
如何快速验证嵌套是否合法？
别靠肉眼猜，用浏览器开发者工具的「Elements」面板看最终渲染树——它显示的是浏览器修正后的 DOM，不是你写的源码。真正可靠的判断依据是 HTML Living Standard 的内容模型定义。
- 检查
<ul>下一级子节点是不是全是<li>；如果不是，问题就在这里 - 遇到序号中断、列表缩进异常、焦点顺序错乱，优先查嵌套合法性，而非 CSS
- 工具推荐：W3C HTML Validator（validator.w3.org）或 VS Code 插件 “Auto Close Tag” + “Prettier” 配合语法高亮实时提示
最常被忽略的一点：换行和空格在某些上下文中会被当成文本节点，而文本节点不能作为 <ol>/<ul> 的子元素——所以 <ol>\n<li>A</li>\n</ol> 没问题，但 <ol>\n<p>A</p>\n<li>B</li>\n</ol> 就会崩。
