ol标签内直接写文字会导致编号不渲染，因html规范强制要求ol的直接子元素只能是li；纯文本或p、div等非法子元素会被浏览器移出或忽略，破坏语义与可访问性。
ol 标签里直接写文字会怎样
不会渲染编号，文字可能被浏览器移出列表，甚至完全不显示——这不是 bug，是 HTML 规范强制要求：ol 的直接子元素只能是 li（以及 script、template 等极少数例外）。任何纯文本、p、div 或其他块级/行内元素，只要没包在 li 里，都会被当作非法子元素处理。
为什么浏览器不报错却“看不见编号”
浏览器会尝试自动修复非法结构，但修复逻辑不可控。常见表现包括：
-
ol中的纯文本被移到ol外部，变成普通段落，编号彻底消失 -
p包着内容塞进ol，结果p被剥离，只剩裸文本，仍无编号 -
div作为ol的直接子元素，整个div可能被忽略或重排到 DOM 末尾 - 屏幕阅读器无法识别为列表，语义和可访问性全丢
正确写法只有一种：每个条目必须用 li 包裹
哪怕只有一行字，也得套 li。别省这层标签，它不是装饰，是语义必需。
- ✅ 正确：
<ol> <li>第一步</li> <li>第二步</li> </ol> - ❌ 错误：
<ol>第一步<br>第二步</ol>（br不是合法子元素） - ❌ 错误：
<ol> <p>第一步</p> <p>第二步</p> </ol>（p不允许直接子元素） - ❌ 错误：
<ol><div>第一步</div></ol>（div同样非法）
嵌套子列表时，ol 必须完整落在 li 内部
这是最容易被忽略的结构性陷阱。子 ol 如果没写在父 li 的起始与结束标签之间，就会被当成新列表，编号从头开始。
- ✅ 正确：外层
li开始后立刻写子ol，且在同一个li结束前闭合 - ❌ 错误：
<li>主条目</li> <ol type="a"><li>子项</li></ol>（子ol在li外，已脱离上下文） - 子
ol的type属性（如type="a"）只影响样式，不改变语义层级；编号是否连续，全看 DOM 是否真正嵌套 - 用 DevTools 检查：展开父
li，确认子ol是它的直接子节点，而不是兄弟节点
div 插错位置，整层编号就静默重置，而且没有任何错误提示——这种问题只能靠检查 DOM 树定位，没法靠 CSS 或 JS 补救。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
