ol标签必须用li作为直接子元素，禁止div或p等非li元素；start仅设首项起始值，value会重置后续自动编号；应优先用CSS计数器替代type属性；需避免破坏无障碍可访问性。
ol 标签必须用 li 直接子元素
HTML 规范要求 ol 的直接子节点只能是 li，不能是 div、p 或文本节点。浏览器虽会容错渲染，但会导致语义错误、无障碍访问失败，且某些屏幕阅读器会跳过或误读列表。
常见错误写法：
<ol> <p>第一项</p> <div>第二项</div> </ol>这种结构实际被解析为
ol → 空列表 + 两个孤立块级元素，序号不会绑定到内容上。
- 正确写法：每个条目必须包裹在
li内，哪怕内容只有一行文本或一个内联元素 - 若需在
li中嵌套段落或容器，完全合法：<ol> <li><p>这是带段落的条目</p></li> <li><div class="step">步骤说明</div></li> </ol>
- 禁止把
li拆开（如用display: contents移除其盒模型）再塞内容——视觉可能正常，但 DOM 层级已破坏列表语义
start 和 value 属性的实际行为差异
很多人以为 start 是“起始编号”，value 是“当前项编号”，但它们影响的是计数器状态，不是纯显示值。关键区别在于：只有 value 会重置后续 li 的自动编号逻辑。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
示例：
<ol start="3"> <li>A</li> <!-- 显示 3. A --> <li>B</li> <!-- 显示 4. B --> </ol> <ol> <li value="5">C</li> <!-- 显示 5. C --> <li>D</li> <!-- 显示 6. D，不是 2. D！--> </ol>
-
start="n"只设置第一个li的初始计数值，不影响后续显式value -
value="n"不仅设置当前项编号，还会让下一个无value的li从n+1开始计数 - 混用时以最近的
value为准；start仅在首个li无value时生效 - 不推荐依赖
value调整顺序——它容易引发维护混乱，应优先用 CSScounter-reset/counter-increment控制复杂编号逻辑
用 CSS 替代 type 属性实现兼容性更强的编号样式
type 属性（如 type="a"、type="I"）在部分旧版 Safari 和所有 IE 中支持不一致，且无法控制字母大小写、括号格式或添加前缀（如 “Step 1.”）。现代方案应放弃 type，改用 CSS 计数器。
基础替换写法：
ol.step-list {
counter-reset: step;
}
ol.step-list li {
list-style: none;
}
ol.step-list li::before {
counter-increment: step;
content: "Step " counter(step) ". ";
font-weight: bold;
}
-
list-style: none必须加在li上，否则原生序号和伪元素会叠加显示 -
counter-reset要设在ol上，不能设在body或父容器——否则多个ol会共用同一个计数器 - 若需大写字母（A, B, C），用
counter(step, upper-alpha)；小写用lower-alpha；罗马数字用upper-roman - 避免在
content中硬编码中文数字（如“一”“二”），CSS 计数器不支持中文序列，需 JS 或服务端生成
无障碍与 SEO 需要关注的隐藏细节
单纯写对标签结构还不够。ol 的语义价值体现在它能被辅助技术识别为“有序集合”，但前提是不能被 CSS 或 JS 破坏可访问树（accessibility tree）。
- 禁用
aria-hidden="true"在ol或li上——这会让整个列表对屏幕阅读器不可见 - 不要用
display: none隐藏某个li后再用 JS 动态显示；应改用visibility: hidden或opacity: 0+pointer-events: none，否则编号顺序会被读屏软件跳过 - 若列表项内容动态加载（如分页展开），必须触发
aria-live区域更新，否则新增li不会被朗读 - 搜索引擎仍会解析
ol的层级关系，但不会因此提升排名；真正影响 SEO 的是内容是否自然、是否被正确索引——所以别为了“有 ol 标签”而强行套用，该用ul或段落就用段落
最常被忽略的一点：编号本身不是信息，条目之间的逻辑顺序才是。如果用户靠拖拽改变 li 顺序，但没同步更新 value 或重置 CSS 计数器，屏幕阅读器读出的序号就会和视觉/操作顺序错位。
