<ol> 标签天然适合排名列表，自动编号、语义清晰、可访问性强；应避免手动写序号，用 start 和 type 或 CSS 控制样式，内容聚焦实质信息，确保机器与人无歧义理解顺序关系。
用 <ol> 标签直接生成带数字序号的排名列表
HTML 有序列表本质就是为排名、步骤、优先级这类有顺序关系的数据设计的，<ol> 默认渲染为 1. 2. 3.，无需额外 CSS 就能表达名次。关键不是“怎么让它看起来像排名”，而是“别用错语义”——比如别用 <ul> + 手动写“1.”“2.”，那既不可访问，也不利于 SEO 和屏幕阅读器解析。
基础写法就是把每个名次项包进 <li>，嵌套在 <ol> 里：
<ol> <li>张三（总分：98）</li> <li>李四（总分：95）</li> <li>王五（总分：92）</li> </ol>
修改起始编号或序号样式要用 start 和 type 属性
默认从 1 开始、用阿拉伯数字是常见需求，但实际场景常需要调整：比如某榜单只展示第 5–10 名，或想用字母/罗马数字体现层级感。
-
start属性控制起始数字，值为整数，例如<ol start="5">会让第一个<li>显示为 “5.” -
type属性切换序号类型："a"（小写字母）、"A"（大写字母）、"i"（小写罗马）、"I"（大写罗马）、"1"（默认数字） - 注意：
type在嵌套<ol>中会自动继承上级，但可被子级显式覆盖 - 现代项目中更推荐用 CSS 的
list-style-type控制样式，因为type属性已不被所有辅助技术一致支持
排名变动时避免手动重写序号，靠浏览器自动更新
很多人习惯复制粘贴后手动改 <li> 前面的“1.”“2.”，这是典型误区。一旦插入、删除或调换名次，序号就全乱了，且无法被 JS 动态维护。
立即学习“前端免费学习笔记（深入）”；
正确做法是完全交由 <ol> 管理序号：
- 增删
<li>元素，序号自动重排 - 用 JS 操作 DOM（如
insertBefore、removeChild）时，序号实时响应 - 若需高亮某一名次（如冠军），加
class或data-rank="1"，而不是依赖序号文本内容 - 禁止在
<li>文本里硬编码“第1名：”，那会让数据和表现耦合，不利于翻译或筛选
语义完整性和可访问性不能只靠视觉序号
屏幕阅读器读 <ol> 时会明确播报“列表，共3项，第1项”，但如果你在 <li> 里又写了“第一名：张三”，它就会重复播报“第1项 第一名：张三”，造成冗余甚至歧义。
更稳妥的做法：
- 用
<ol>表达顺序，内容只保留实质信息（如人名、分数、时间） - 如需强调“冠军”“殿军”等称号，用
<span class="rank-badge">冠军</span>单独包裹，并配合适当 ARIA 标签（如aria-label="冠军，排名第1"） - 避免用
<ol>套<table>或复杂布局——排名信息如果含多列（姓名、得分、涨幅），应优先考虑<table>，再用<th scope="row">标明行序号列
真正难的不是让数字显示出来，而是让机器和人都能无歧义地理解“谁排第几”。序号只是表象，<ol> 的价值在隐含的顺序契约。
