ol天然适合展示搜索排名，因其语义明确、支持start/reversed/type属性，而ul+counter()存在可访问性差、无CSS时失效、不支持start跳号、SEO识别弱等缺陷。
ol 列表天然适合展示搜索结果排名，因为它的语义就是“有顺序的项目集合”，浏览器默认用数字编号，且支持 start、reversed、type 等属性控制序号行为——这比用 ul + CSS 伪造编号更可靠、更可访问。
为什么不用 ul + counter() 模拟排名？
虽然 CSS 的 counter-reset 和 counter-increment 能实现视觉编号，但存在几个硬伤：
- 屏幕阅读器可能读不出序号，只把内容当普通列表项朗读
- 如果用户禁用 CSS，编号直接消失，只剩一堆无序内容
- 无法通过
start="5"快速跳过前 4 条（比如第 5–10 名结果），ul没有原生支持 - SEO 工具更倾向信任
ol的显式顺序语义，对纯样式编号识别率低
ol 的 start 属性怎么用在分页搜索结果里？
搜索结果常按页返回，第 2 页应显示“第 11–20 名”，而不是从 1 开始重排。这时直接设 start 最省事：
<ol start="11"> <li><a href="/result/101">Python 入门教程</a></li> <li><a href="/result/102">HTML 列表语义化详解</a></li> </ol>
注意：start 是整数，不能是字符串；它只影响编号起始值，不影响 DOM 结构或 JS 获取的 li 索引（li 仍从 0 开始）。
排名倒序（如“最相关→最不相关”）该用 reversed 还是后端翻转？
用 reversed 属性即可，无需在 JS 或后端重新排序数据：
<ol reversed> <li>AI 代码解释器</li> <li>HTML 列表 SEO</li> <li>CSS counter 编号陷阱</li> </ol>
渲染效果是：3. AI 代码解释器 → 2. HTML 列表 SEO → 1. CSS counter 编号陷阱。但要注意：
-
reversed是布尔属性，写成reversed或reversed=""都行，不能写reversed="false" - 它只改变编号方向，不改变 DOM 顺序，JS 遍历时仍是正向（第一个
li仍是索引 0） - 若需“倒序 + 自定义起始”，比如从 100 倒数到 98，得配合
start="100"，仅reversed不够
真正容易被忽略的是：排名变化时（比如用户点“按时间排序”），别只改 DOM 内容，记得同步更新 ol 的 start 和是否带 reversed——否则编号和语义就脱节了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
