ol标签用于声明不可交换的顺序关系，关键判断标准是调换任意两项位置会导致逻辑或事实错误；必须用ol的场景包括安装步骤、排行榜、法律条文、时间线等。

ol 标签的作用不是“加数字”，而是声明「这一组内容存在不可交换的顺序关系」——搜索引擎、屏幕阅读器和自动化工具都依赖这个语义，而非视觉编号。

什么时候必须用 ol 而不能用 ul

关键判断标准是：如果调换任意两项位置，逻辑或事实会出错，就必须用 ol。

• 安装指南的 5 个步骤 → 换序会导致操作失败
• 考试成绩排行榜（第1名、第2名…）→ 名次本身是核心信息
• 法律条文第1条、第2条… → 条款编号具有引用和效力意义
• 时间线（2020年发布、2022年更新、2025年修订）→ 时间先后不可逆

反例：ul 里写 “首页｜产品｜关于我们｜联系我们” 是对的；改成 ol 就暗示用户“必须先访问首页，再访问产品”，这不符合导航本质。

ol 的 start 和 reversed 属性怎么用才不翻车

这两个属性只在 ol 上生效，ul 加了也无效。它们影响的是语义编号逻辑，不是纯样式。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• start="3"：第一项语义上就是“第3项”，后续自动为 4、5… 不是“从3开始显示”，而是“本列表起始序号为3”
• reversed 单独用容易误解：浏览器按降序渲染（如 5. 4. 3.），但语义仍是“这是5项中的完整序列”，不是“倒着数”
• 组合使用更可控：<ol start="5" reversed></ol> 表示“这是一个共5项、按倒序呈现的完整列表”，读屏器会读作“第5项…第1项”
• 注意：若后端动态插入新项到开头，start 值需同步调整，否则语义断裂（比如原 start="2" 的列表新增首项后，应改为 start="1"）

CSS 覆盖 ol 编号时最常踩的坑

用 list-style: none + 伪元素模拟编号看似灵活，但会直接剥离语义——屏幕阅读器不再播报序号，ol 退化为普通容器。

• 真正需要自定义样式（如字母、罗马数字、带括号）时，优先用原生 type 属性：<ol type="A"></ol>、<ol type="i"></ol>
• 若必须用 CSS counter，得手动补全可访问性：aria-setsize 和 aria-posinset 必须显式设置，否则读屏器无法识别当前项在整个序列中的位置
• 避免对 ol 设置 display: flex 或 float：会破坏内置计数流，导致编号错乱或消失
• list-style-position: inside 看似省事，但可能让长文本换行后编号与文字错位，尤其在响应式断点下

最容易被忽略的一点：嵌套 ol 时，子列表的编号逻辑独立于父列表，但语义上仍是“父步骤下的细分顺序”。例如“2. 配置服务器 → 2.1 安装依赖 → 2.2 启动服务”，这种层级必须靠结构嵌套实现，不能靠 CSS 生成内容模拟——否则机器无法理解 2.1 是隶属于 2 的子序列。