必须用而非手动编号，因其语义化使屏幕阅读器播报“第1项，共5项”并提升SEO；误用包括导航栏、li内嵌div、未闭合li；start和reversed属性控制起始与倒序编号，但不改变DOM顺序；type属性应被CSS list-style-type替代；嵌套时子必须置于内。
<ol></ol> 标签只用来表达有明确先后顺序的内容，比如步骤、排名、大纲——不是“看起来像编号”就该用它，而是“语义上必须有序”才用。
什么时候必须用 <ol></ol> 而不是手动写 1. 2. 3.
屏幕阅读器会把 <ol></ol> 识别为“有序列表”，自动播报“第1项，共5项”“第2项，共5项”；如果手写 1. 第一步，它只会读成“数字一、点、第一步”，失去结构信息。
SEO 也会更倾向抓取 <ol></ol> 内容作为步骤化内容（如“如何…”类页面）。
常见误用场景：
• 用 <ol></ol> 做导航栏（应使用 <nav></nav> + <ul></ul>）
• 列表项里嵌了 <div> 或 <code><p></p>（<li> 只允许直接包含流内容，但 <div> 是块级容器，需包裹在 <code><p></p> 或 <span></span> 内）
• 忘记闭合 ，导致后续所有 <li> 被浏览器塞进同一个列表项里
start 和 reversed 属性的实际效果与限制
start 是整数，指定编号起始值，比如 <ol start="3">
<li>苹果</li>
<li>香蕉</li>
</ol> 渲染为 “3. 苹果 / 4. 香蕉”。reversed 是布尔属性，启用后编号倒排： <ol reversed>
<li>金牌</li>
<li>银牌</li>
<li>铜牌</li>
</ol> 显示为 “3. 金牌 / 2. 银牌 / 1. 铜牌”。
注意：
• start 和 reversed 同时存在时，reversed 优先，起始值变成最大编号（如 start="5" reversed → 第一项是 5，第二项是 4）
• 这两个属性不改变 DOM 中 <li> 的顺序，只影响视觉编号和 ARIA 属性输出
• 不支持小数或负数 start 值（会被忽略）
为什么不要依赖 type 属性做样式控制
type 属性能设 a、I、1 等，但它的兼容性和语义可靠性远不如 CSS：
• type="A" 在部分旧版 Safari 中渲染异常
• 它无法控制编号与文字之间的间距、对齐或颜色
• 更重要的是，type 是 HTML 属性，属于内容层；而编号样式属于表现层，按规范应交给 CSS 的 list-style-type
推荐做法：
• 用 <ol class="steps"></ol> + CSS .steps { list-style-type: decimal; }
• 如需罗马数字，写 list-style-type: upper-roman;，而非 type="I"
• 若要完全自定义（比如带圆圈的数字），直接 list-style: none; + ::marker 或伪元素控制
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
嵌套 <ol></ol> 时最容易漏掉的关键点
嵌套本身合法，但必须满足：每个子 <ol></ol> 必须放在某个 <li> 内部，不能直接跟在父 <li> 后面又没包裹。
正确写法：
<ol><br> <li>主步骤一</li><br> <li>主步骤二<br> <ol><br> <li>子步骤 A</li><br> <li>子步骤 B</li><br> </ol><br> </li><br></ol>
错误写法（子
<ol></ol> 悬空）：<ol><br> <li>主步骤一</li><br> <ol><li>子步骤</li></ol><br></ol>
这种结构会导致浏览器自动补全 DOM，可能让整个嵌套逻辑错乱，且无障碍工具无法正确解析层级关系。
立即学习“前端免费学习笔记（深入）”；
