ol标签仅负责语义化呈现顺序，不参与排序逻辑；热搜排名必须由后端或JS预排序数据流决定，HTML无法感知热度值、实时变化或过滤去重。
ol 标签本身不负责“热搜”逻辑，只负责呈现已有顺序——真正决定谁排第1、第2的，是后端或 JS 排序后的数据流，不是 HTML 写个 start="1" 就能变成热搜。
为什么不能直接用 <ol type="1"></ol> 做热搜列表
浏览器渲染 ol 时只认 DOM 节点顺序和 start/type 属性，它不会读取“热度值”、不感知实时变化、也不做去重或过滤。你写：<ol>
<li>AI</li>
<li>iPhone 16</li>
</ol>，它就老老实实显示 1. AI、2. iPhone 16——哪怕后台数据里 iPhone 16 的讨论量是 AI 的 3 倍，HTML 也无动于衷。
ol 在热搜场景中唯一该干的事：语义化 + 可访问性
用 ol 是因为“热搜”天然有强顺序（热度降序），这比 ul 更符合语义，对 SEO 和屏幕阅读器更友好。但必须配合以下约束：
- 每个
li必须包裹一个真实可跳转的a，href指向搜索页或话题页，不能是#或空链接 - 热度数字（如“24.5 万讨论”）要放在独立
span里，并加aria-hidden="true"，避免读屏器重复播报 - 整体标题用
h3（例如<h3>今日热搜</h3>），别抢页面主标题层级 - 禁止在
ol外层套div再用 JS 动态重排——那样ol的语义就失效了，只剩个空壳
CSS 必须关掉原生编号，否则会干扰设计
所有主流热搜 UI（微博、知乎热榜、Bing Trending）都不显示 1. 2. 3. 这种数字，而是用图标、色块或留白表达优先级。所以 CSS 第一步就是清掉默认样式：
ol.trending-list {
list-style: none;
padding-left: 0;
}
ol.trending-list li {
display: inline-block;
margin-right: 8px;
}
注意：list-style: none 必须作用在 ol 上，不是 li；padding-left: 0 是为了消除浏览器默认缩进，否则横向布局会错位。
立即学习“前端免费学习笔记（深入）”；
排序必须由 JS 或服务端完成，HTML 只是容器
如果你用 JS 渲染热搜，关键不是怎么写 ol，而是怎么保证插入顺序正确：
- 从 API 拿到的数据必须已是按热度降序排列的数组，不要靠 JS 在前端再
.sort()—— 那样首次渲染会闪动，且无法服务端渲染（SSR） - 每次更新热搜，应替换整个
ol的innerHTML，或用documentFragment批量 append，避免逐个appendChild触发多次重排 - 若需高亮 Top 3，加 class 如
li.trending-top-1，用 CSS 控制图标/背景，别依赖ol type="1"的序号值 - 移动端要注意
inline-block在小屏可能换行，可改用display: flex; flex-wrap: wrap，但需测试 IE11 兼容性
ol 外面。HTML 列表只是最后一层薄薄的、必须写对的皮肤。 
