必须用<ol>实现热搜榜，因其语义正确、自动编号、无障碍友好且无需JS；<ul>表无序集合，<div>无语义，无法被搜索引擎和读屏软件识别排名。
直接用 <ol> 就能做出语义正确、自动编号、可排序、无障碍友好的热搜榜，不需要 JS 也能保证序号逻辑不崩。 手动写“1. XXX”看似快，但加删条目、换顺序、响应式缩放时序号立刻错位或挤歪——这不是样式问题，是结构缺陷。
为什么必须用 <ol> 而不是 <ul> 或 <div>
搜索引擎和读屏软件靠 HTML 语义识别“这是排名”，<ul> 表示无序集合（比如标签云），<div> 完全没语义。用 <ol> 后，即使关掉 CSS，序号仍按逻辑递增；用 reversed 属性还能让第一名显示为最大数字（如 <ol reversed> 渲染为 10. 9. 8…），天然适配“热度降序”场景。常见错误是套个 <div class="list"> 再塞 10 个 <p>，结果 SEO 无法抓取名次，键盘用户 tab 焦点乱跳，移动端缩放后第二行文字左对齐漂移。
<ol> 的关键属性怎么选：start、reversed、type
真实热搜榜常需接续前页、倒序展示或带字母前缀（如“A1 热搜”），这些都靠原生属性控制，不依赖 CSS：
-
start="1"是默认值，但若榜单从第 3 名开始展示（比如“今日 TOP3”只列后七名），直接写<ol start="4">，浏览器自动渲染 4. 5. 6… -
reversed必须配合start用才可控：比如想显示“10 → 1”，写<ol start="10" reversed>；只写reversed会从默认 1 开始倒数成 -∞，实际无效 -
type="1"（数字）、type="A"（大写字母）、type="i"（小写罗马）够用，别用type="I"（大写罗马）——IE 已淘汰，且易与数字 1 混淆
CSS 控制序号对齐：固定宽度 + ::before 替代默认 marker
浏览器默认的 <ol> 左侧 padding 和 list-style-position 组合极易导致多数字序号（如“10.”）把后续文字顶得右移，第二行悬空。最稳解法是关掉默认序号，用 CSS counter 重绘：
立即学习“前端免费学习笔记（深入）”；
ol {
list-style: none;
counter-reset: rank;
}
li {
counter-increment: rank;
position: relative;
padding-left: 2.5em; /* 为序号留出固定空间 */
}
li::before {
content: counter(rank) ". ";
width: 2em; /* 关键！固定宽度，确保 1. 和 10. 占位一致 */
display: inline-block;
margin-right: 0.5em;
text-align: right;
}注意：width: 2em 必须设，不能用 ch 或百分比；li 里别套 <div>，否则 counter-increment 可能失效；移动端用 em 单位比 px 更适应缩放。
动态更新时序号不乱的底线原则
JS 插入/删除 <li> 时，只要不破坏 <ol> → <li> 的直系父子关系，序号自动重排。最容易踩的坑是：
- 用
innerHTML = "..."整段替换<ol>内容——DOM 重建后计数器重置，但若新内容含手动写的 “1.” 字符，就会和真实序号冲突 - 给
<li>加display: flex后再嵌一层<div>包文字——::before仍生效，但若该<div>设置了margin或padding，会干扰左侧对齐基准线 - 在
<ol>上设flex或grid——<li>仍是块级，但序号生成逻辑不变；真正危险的是把<li>改成display: inline，会导致counter-increment失效
复杂点在于：当榜单需按热度实时重排序，且每项带“↑↓→”趋势符号时，reversed 属性无法动态切换方向——此时必须用 JS 重排 <li> DOM 顺序，而非仅改数据。序号本身仍由 <ol> 自动维护，这是它不可替代的价值。
