ol里不能直接放p或div，因html规范强制要求其子元素只能是li；浏览器会将非法元素移出ol外，导致dom结构错乱、编号重置、js查询失败及屏幕阅读器语义失效。
ol 本身不支持直接嵌套非 li 元素，所有内容必须包裹在 li 标签内——这是 HTML 规范强制要求的，不是浏览器容错能绕过的。
为什么 ol 里不能直接写 p 或 div
HTML 解析器会把未包裹在 li 中的块级元素（比如 p、div、section）自动“踢出”到 ol 外部，导致结构错乱。例如：
<ol> <p>第一步</p> <li>第二步</li> </ol>
实际解析结果等价于：
<p>第一步</p> <ol> <li>第二步</li> </ol>
- 编号从“1.”开始，但“第一步”完全脱离列表上下文
- 用
document.querySelectorAll('li')只能拿到 1 个节点，而非预期的 2 个 - 屏幕阅读器无法将“第一步”识别为有序列表的一部分
li 内部可以合法嵌套哪些元素
li 是容器型标签，允许嵌套几乎所有 HTML 元素，包括：
- 块级元素：
p、div、section、article、table - 内联元素：
span、a、strong、img - 其他列表：
ul、ol、dl（用于多级步骤说明） - 表单控件：
input、button（适合交互式流程）
示例：一个带子步骤和说明文字的安装流程
<ol>
<li>
<p>下载安装包</p>
<p><strong>注意</strong>：请确认系统版本兼容性</p>
</li>
<li>
<ol type="a">
<li>双击运行</li>
<li>按提示点击“下一步”</li>
</ol>
</li>
<li><a href="#finish">完成配置并启动</a></li>
</ol>
组合不同元素时容易踩的坑
常见错误不是语法写错，而是语义断裂或可访问性失效：
-
li内部用了h2～h6，但没考虑文档大纲层级——会导致标题跳级，影响 SEO 和读屏体验 - 嵌套
ol时忘了重置type或start，子列表继续沿用父级编号（如 “1.1, 1.2” 变成 “2, 3”） - 给
li加了display: flex却忽略list-style-position: inside，导致项目符号被裁切或错位 - 用 JS 动态插入内容时，只 appendChild 到
ol而不是li，结果新内容游离在列表之外
什么时候该换用 dl 而不是嵌套 ol
如果“组合不同元素”的目标是表达「术语 + 多段解释」，比如 API 参数说明、配置项文档，别硬塞进 ol：
-
ol强调顺序和步骤，强行用它描述键值对，语义失真 -
dl原生支持dt（术语）+ 多个dd（解释），且每个dd可含p、code、pre等任意内容 - 屏幕阅读器对
dl的支持更成熟，能准确播报“参数名：xxx，说明：yyy”
真正需要组合不同元素的场景，往往不是“怎么塞进 ol”，而是“是否该用别的语义标签”。ol 的边界很清晰：只管有顺序的条目，其余交给 li 容纳——别让它承担本不属于它的职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
