标签默认为每个自动生成阿拉伯数字序号，无需手动编写；错误的手动编号会破坏语义、可访问性及动态更新能力。

用 <ol></ol> 标签生成默认数字序号

HTML 有序列表的核心就是 <ol></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></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"></ol> 更显正式；电商详情页用字母更轻量。注意：现代项目中更推荐用 CSS list-style-type 控制，因 type 属性在部分旧浏览器中兼容性较弱。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

自定义起始序号：用 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></ol>，子列表仍从 1 开始，不受父级 start 影响。

语义与可访问性：为什么不能用 <div> + 手动数字模拟 <p>用 <code><div class="rank-item">1. 商品名</div> 看似灵活，但会丢失关键信息：

• 屏幕阅读器无法识别这是有序列表，读不出“第 1 项、共 10 项”这类上下文
• 无法通过键盘 Tab 键自然遍历列表项（<ol><li></ol> 是原生可聚焦流的一部分）
• CSS 伪元素 ::marker 失效，丧失细粒度样式控制能力（比如单独调节数字颜色/字体大小）
• SEO 弱化——搜索引擎依赖语义标签理解内容结构，纯 <div> 无排名含义 <p>真正需要高度定制样式时，应在保留 <code><ol><li></ol> 结构的前提下用 CSS 覆盖，而不是抛弃语义。