的 dom 行为天然绑定顺序语义，浏览器和辅助技术将其子元素 视为具位置序号的线性序列，序号是 dom 隐含属性而非渲染结果； 则无序号、无先后权重。reversed 和 start 是语义开关，影响可访问性输出，写在 上被忽略。动态增删 时编号自动同步，value 属性仅临时覆盖单项目编号。嵌套 能表达主-子步骤层级依赖，被可访问性 api 正确识别。( 的核心价值在于使顺序成为 dom 一部分，错误使用修复成本高。)
ol 的 DOM 行为天然绑定顺序语义
浏览器和辅助技术（如屏幕阅读器）在解析 <ol></ol> 时，会直接将其子元素 <li> 视为具有位置序号的线性序列。这个序号不是渲染结果，而是 DOM 层面的隐含属性：第 1 个 <li> 就是“第 1 项”，无论是否显示数字、是否被 CSS 隐藏。而 <ul></ul> 下的所有 <li> 在语义层被统一标记为“项目”，无序号、无先后权重。
reversed 和 start 属性直接影响可访问性输出
这两个属性不是视觉修饰，而是语义开关：
-
<ol reversed></ol>会让屏幕阅读器明确播报“倒序列表”，并按 3、2、1 的逻辑导航，而非仅视觉翻转 -
<ol start="4"></ol>告诉辅助技术“这是连续流程中的第 4 步”，后续插入新<li>仍保持编号连贯（如第 5 步、第 6 步），不依赖 JS 重算 - 把
start或reversed写在<ul></ul>上会被完全忽略——因为无序列表根本不该携带顺序元信息
动态操作时序号自动同步，无需手动维护
当用 JS 动态增删 <li> 时，<ol></ol> 的编号会实时重排：
- 在中间插入一项 → 后续所有项编号自动 +1
- 删除某一项 → 编号自动收缩，不留下空档
- 用
value属性临时覆盖某项编号（如<li value="10">）只影响当前项，不影响整体计数逻辑 - 对比之下，用
<div>1. xxx</div>模拟步骤，每次增删都得手写更新所有数字，极易出错且不可访问
嵌套结构中子列表继承父级顺序约束
在多级流程中，<ol></ol> 嵌套能清晰表达“主步骤 → 子步骤”的层级依赖：
- 外层
<ol></ol>表示安装流程的 1→2→3 - 其中第 2 步内嵌
<ol start="1"></ol>表示“编译阶段的 1→2→3”，语义上属于主流程第 2 步的展开，而非独立序列 - 这种嵌套关系会被可访问性 API 识别为“第 2 步，子步骤 1”，而不是扁平的“第 1 项、第 2 项”
- 若用
<ul></ul>嵌套，即使加了 CSS 数字，辅助技术仍无法建立主-子顺序映射
<ol></ol> 的价值不在“它能显示数字”，而在于它让顺序成为 DOM 的一部分——一旦写错，修复成本远高于初始选对标签。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
