用<ol>做排行榜最直接且语义正确，支持自动编号、start和reversed属性适配截断或倒序榜单，避免伪元素模拟序号破坏可访问性，动态更新宜增量操作而非innerHTML替换。
用 <ol> 做排行榜是最直接且语义正确的方式
HTML 里展示有明确名次的排行榜，<ol>（ordered list）就是为这事设计的——它天然支持序号、自动编号、可访问性语义，比用 <div> + 手动写“1.”“2.”靠谱得多。别绕路，就用它。
<ol> 的 start 和 reversed 属性能快速适配常见榜单场景
默认从 1 开始递增，但排行榜常需调整起始值或倒序（比如 Top 10 从第 10 名往下排）：
-
start="5"：让列表从 5 开始编号，适合展示“第 5～第 12 名”这类截断榜单 -
reversed：启用后编号倒排（10, 9, 8…），配合start="10"就能生成标准 Top 10 样式 - 注意：
reversed是布尔属性，写成reversed即可，不用赋值
避免用 <li> 里嵌 <span> 或 CSS 伪元素模拟序号
有人为了“样式自由”在每个 <li> 里加 <span class="rank">1</span>，或用 ::before 生成数字——这会破坏语义和屏幕阅读器识别：
- 辅助技术可能读不出名次，只当普通列表项
- 复制粘贴时序号容易丢失或错位
- 打印或纯文本渲染时序号不保留
- 真需要自定义样式（比如带圆角背景的数字），用
<ol type="1" style="counter-reset: list-item 0;">配合 CSS 计数器更稳妥，但前提是保留<ol><li>结构
排行榜数据动态更新时，别手动重写 <ol> HTML
如果榜单靠 JS 实时刷新（比如比赛实时积分榜），直接 innerHTML 替换整个 <ol> 会丢失焦点、滚动位置，还可能触发重复渲染：
立即学习“前端免费学习笔记（深入）”；
- 优先用
document.createElement("li")+appendChild()增量更新 - 若必须批量替换，先清空
<ol>再逐个append()新<li>，避免用字符串拼接 HTML -
<ol>的type属性（如type="A"）在动态场景中极少用，保持默认type="1"最稳
序号逻辑交给浏览器，人只管数据和结构——这是最省心也最不容易翻车的做法。
