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