<ol>标签默认为每个<li>自动生成阿拉伯数字序号，无需手动编写；错误的手动编号会破坏语义、可访问性及动态更新能力。
用 <ol> 标签生成默认数字序号
HTML 有序列表的核心就是 <ol> 元素，浏览器默认会为每个 <li> 子项自动添加阿拉伯数字（1. 2. 3. …）。不需要额外写序号，手写反而容易出错。
常见错误是把数字硬编码进文本里，比如：<li>1. iPhone 15</li> —— 这会导致排序逻辑失效、无法动态插入/删除、CSS 计数器失效。
正确写法示例：
<ol> <li>iPhone 15</li> <li>Samsung S24</li> <li>Xiaomi 14</li> </ol>
切换序号类型：用 type 属性控制编号样式
商品排行常需不同视觉风格，<ol> 的 type 属性可快速切换编号格式，但注意它只影响显示，不改变语义顺序。
立即学习“前端免费学习笔记（深入）”；
-
type="1"：默认阿拉伯数字（1, 2, 3…） -
type="A"：大写字母（A, B, C…） -
type="a"：小写字母（a, b, c…） -
type="I"：大写罗马数字（I, II, III…） -
type="i"：小写罗马数字（i, ii, iii…）
例如排行榜强调“Top 3”，用 <ol type="I"> 更显正式；电商详情页用字母更轻量。注意：现代项目中更推荐用 CSS list-style-type 控制，因 type 属性在部分旧浏览器中兼容性较弱。
自定义起始序号：用 start 属性跳过前 N 名
当只展示“第 4–10 名”时，别手动删掉前 3 个 <li> 再重写序号——直接用 start 属性指定起始数字即可。
示例（展示第 4 到第 6 名）：
<ol start="4"> <li>OPPO Find X7</li> <li>vivo X100</li> <li>OnePlus 12</li> </ol>
渲染结果为：4. OPPO Find X7，5. vivo X100，6. OnePlus 12。注意：start 值必须是整数，负值或非数字会被忽略；若后续嵌套 <ol>，子列表仍从 1 开始，不受父级 start 影响。
语义与可访问性：为什么不能用 <div> + 手动数字模拟
用 <div class="rank-item">1. 商品名</div> 看似灵活，但会丢失关键信息：
- 屏幕阅读器无法识别这是有序列表，读不出“第 1 项、共 10 项”这类上下文
- 无法通过键盘
Tab键自然遍历列表项（<ol><li>是原生可聚焦流的一部分） - CSS 伪元素
::marker失效，丧失细粒度样式控制能力（比如单独调节数字颜色/字体大小） - SEO 弱化——搜索引擎依赖语义标签理解内容结构，纯
<div>无排名含义
真正需要高度定制样式时，应在保留 <ol><li> 结构的前提下用 CSS 覆盖，而不是抛弃语义。
