是语义化排行榜的最佳HTML结构，序号内置、轻量且无障碍友好；应避免手动编号或嵌套列表，用CSS计数器自定义样式，动态更新需增量操作，并补充aria-label和标题以提升可访问性与SEO。
用 <ol></ol> 标签生成天然排行榜结构
HTML 的 <ol></ol>（ordered list）本身就是为排名、顺序、优先级这类语义设计的，浏览器默认渲染为带数字序号的列表，完全契合排行榜场景。它比用 <div> + CSS 计数器更轻量、更语义化、对屏幕阅读器更友好。
<p>关键点：<code><ol></ol> 的序号是语义内置的，不是装饰；不要手动写“1.”“2.”——那会破坏可访问性和维护性。
- 每个榜单条目用
<li>包裹，顺序即名次 - 不建议嵌套
<ol></ol>或混用<ul></ul>，否则序号逻辑易错乱 - 若需从第 2 名开始（比如跳过冠军），用
start="2"属性，而非删掉第一个<li>
自定义序号样式：用 list-style-type 和 counter-reset
默认数字（1, 2, 3…）够用，但排行榜常需「第1名」「No.1」或罗马数字等。纯 CSS 可控，无需 JS。
推荐用 list-style-type: none + ::before 伪元素配合计数器，灵活且兼容性好：
立即学习“前端免费学习笔记（深入）”；
<ol class="rank-list"> <li>张三</li> <li>李四</li> </ol>
.rank-list {
counter-reset: rank;
}
.rank-list li {
list-style-type: none;
position: relative;
}
.rank-list li::before {
counter-increment: rank;
content: "第" counter(rank) "名";
font-weight: bold;
margin-right: 8px;
}
-
counter-reset必须设在<ol></ol>上，否则计数不重置 - 避免用
type="A"或type="i"等原生属性——它们不支持中文前缀，且在部分旧版 Safari 中表现异常 - 如果榜单需倒序（如降序显示得分最高者在最后），CSS 计数器仍按 DOM 顺序递增，得靠 JS 重排 DOM 或用 Flex
flex-direction: column-reverse（但会破坏语义顺序）
动态榜单更新时，别直接 innerHTML 覆盖 <ol></ol>
用 JS 更新排行榜数据时，若用 innerHTML = newHtmlString 替换整个 <ol></ol>，会导致：焦点丢失、滚动位置重置、已绑定事件销毁、动画中断。
- 优先用
document.createElement+appendChild/replaceChild增量更新 - 若用框架（React/Vue），确保 key 基于唯一标识（如用户 ID），而非数组索引，否则排序变化时 UI 错位
- 服务端返回纯 JSON 数据时，前端渲染应保持
<ol></ol>根节点不变，只更新内部<li>列表
无障碍与 SEO 注意：别忽略 aria-label 和标题
单纯 <ol></ol> 不足以让屏幕阅读器明确这是「2024 年销量排行榜」。需补充上下文。
- 给
<ol></ol>加aria-label="2024年Q3销售额排行榜"，比仅靠视觉样式更可靠 - 在
<ol></ol>外包裹<h2>销售排行榜</h2>，既利于 SEO，也帮助辅助技术定位内容区块 - 避免用
role="list"手动模拟 ——<ol></ol>原生已有正确 role，加了反而干扰
序号语义和 DOM 顺序必须严格一致；任何用 CSS 或 JS “看起来像排行榜”但结构松散的做法，长期都会在可访问性测试或数据抓取中暴露问题。
