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项中的完整序列”，不是“倒着数” - 组合使用更可控：
- 注意：若后端动态插入新项到开头，
start值需同步调整，否则语义断裂（比如原start="2"的列表新增首项后，应改为start="1"）
CSS 覆盖 ol 编号时最常踩的坑
用 list-style: none + 伪元素模拟编号看似灵活，但会直接剥离语义——屏幕阅读器不再播报序号，ol 退化为普通容器。
- 真正需要自定义样式（如字母、罗马数字、带括号）时，优先用原生
type属性： - 若必须用 CSS counter，得手动补全可访问性：
aria-setsize和aria-posinset必须显式设置，否则读屏器无法识别当前项在整个序列中的位置 - 避免对
ol设置display: flex或float：会破坏内置计数流，导致编号错乱或消失 -
list-style-position: inside看似省事，但可能让长文本换行后编号与文字错位，尤其在响应式断点下
最容易被忽略的一点：嵌套 ol 时，子列表的编号逻辑独立于父列表，但语义上仍是“父步骤下的细分顺序”。例如“2. 配置服务器 → 2.1 安装依赖 → 2.2 启动服务”，这种层级必须靠结构嵌套实现，不能靠 CSS 生成内容模拟——否则机器无法理解 2.1 是隶属于 2 的子序列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
