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 开始）。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

排名倒序（如“最相关→最不相关”）该用 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——否则编号和语义就脱节了。