ol 的合法直接子元素仅有 li，其他内容须嵌套于 li 内；start 属性设 ol 起始编号，value 属性可强制指定单个 li 编号但慎用；嵌套 ol 时每层 li 必须显式书写并闭合。

li 标签必须作为 ol 的直接子元素，不能省略闭合，也不能用其他标签（如 div）替代或包裹它——否则浏览器会自动修正结构，但 JS 选中、可访问性、校验都可能出问题。

ol 里只能放 li，其他内容必须嵌套在 li 里面

HTML 规范明确限定：ol 的合法直接子元素只有 li。如果你写成这样：

<ol>
  <p>第一步：下载安装包</p>
  <p>第二步：双击运行</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</ol>

浏览器实际解析时会把两个 p 当作文本节点塞进第一个 li，结果只生成一个编号项，且内容错乱。正确写法是：

• 每个语义上的“步骤”单独包一层 li
• 段落、链接、图片等都放在 li 内部，而不是 ol 里平级放置
• 需要多段文字时，用 p 包裹，别靠换行或空格分隔

start 属性控制起始编号，但只影响第一个 li 的计数起点

start 是 ol 的属性，不是 li 的。它设定的是整个列表的初始序号，后续 li 仍按顺序递增。比如：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<ol start="10">
  <li>编译代码</li>
  <li>运行测试</li>
  <li>提交 PR</li>
</ol>

渲染为：10. 编译代码，11. 运行测试，12. 提交 PR。注意：

• start 只对 ol 有效，ul 不支持
• 如果某个 li 需要跳过编号（比如插入说明文字），不能靠 start 实现，得用 CSS list-style: none + 手动加编号
• 数值必须是整数，写 start="5.5" 会被截断为 5

value 属性可覆盖单个 li 的编号，但慎用

value 是 li 的属性，仅在 ol 中生效，用于强制指定该项的编号值。例如：

<ol>
  <li value="1">初始化环境</li>
  <li value="3">部署服务</li>
  <li>验证功能</li>
</ol>

结果是：1. 初始化环境，3. 部署服务，4. 验证功能。问题在于：

• 它破坏了自然顺序语义，读屏软件和搜索引擎可能无法正确理解逻辑流
• 后续 li 会从该 value 值继续递增，容易引发意外跳号
• 多数真实场景（如文档步骤、表单错误提示）不需要手动干预编号，靠 start 或 CSS 更稳妥

嵌套 ol 时，子 ol 必须完整闭合，且 li 仍需显式书写

嵌套本身没问题，但常见错误是漏写内层 li 或提前闭合外层 ol。比如这个错误写法：

<ol>
  <li>配置网络
    <ol>
      IP 地址
      子网掩码
    </ol>
  </li>
</ol>

其中 IP 地址 和 子网掩码 会被当作纯文本，不生成编号项。正确方式是：

<ol>
  <li>配置网络
    <ol>
      <li>IP 地址</li>
      <li>子网掩码</li>
    </ol>
  </li>
  <li>启动服务</li>
</ol>

关键点：

• 每层 ol 内部的每一项，无论是否嵌套，都必须有独立的 li 标签
• 缩进书写有助于发现漏闭合问题，但不是语法要求
• JS 查询 document.querySelectorAll('ol li') 时，嵌套项也会被包含，无需特殊处理

真正容易被忽略的是：所有 li 都必须显式闭合，哪怕内容只有一行文字；浏览器容错机制会掩盖问题，但一旦配合 CSS list-style-position: inside 或 JS 动态操作，结构错位就立刻暴露。