应使用 <ol> 标签构建音乐榜单，因其语义正确、可访问性强，能真实反映排名逻辑；序号样式应通过 CSS counter 控制，避免滥用 value 属性或内联编号。
用 <ol> 标签做音乐榜单最直接
HTML 有序列表本身不“制作”榜单，它只负责按顺序呈现排名——这恰恰是音乐榜单的核心需求。用 <ol> 比用 <ul> + 手动编号更语义正确、可访问性更好，屏幕阅读器会自动读出“第1项”“第2项”。
关键不是“怎么加数字”，而是让结构真实反映排名逻辑：
-
<ol>默认从 1 开始，符合榜单惯例；需要倒序（如“本周跌得最多”）可用reversed属性 - 每首歌用
<li>包裹，内部可嵌套<span>或<strong>突出歌名、歌手、时长等字段 - 避免在
<li>里塞整个卡片式布局——复杂样式交给 CSS，HTML 只管顺序和内容层级
榜单需要跳过某排名？别用 value 属性硬调
比如某歌曲因版权下架，榜单从 #3 直接跳到 #5，有人会想给第4个 <li> 加 value="5"。这看似省事，但实际埋坑：
-
value是纯显示控制，不影响 DOM 顺序或 JS 获取的index，后续用document.querySelectorAll('ol li')遍历时仍是 0,1,2,3… - 屏幕阅读器可能读错序号，尤其当
value被反复覆盖时 - 真正该做的是：删掉对应
<li>，让 HTML 结构与实际榜单完全一致——下架就下架，不占位
CSS 自定义数字样式比改 HTML 更灵活
榜单常需“#1”“#2”这种带井号的序号，或罗马数字、字母，甚至图标。这些不该写死在 HTML 里，而应靠 CSS 的 counter 控制：
立即学习“前端免费学习笔记（深入）”；
ol {
list-style: none;
counter-reset: rank;
}
ol li {
counter-increment: rank;
}
ol li::before {
content: "#" counter(rank) " ";
font-weight: bold;
}
这样改样式不碰 HTML，也方便响应式切换（比如小屏用阿拉伯数字，大屏用徽章图标）。
- 避免用
<ol type="A">做“Top A/B/C”——type属性仅支持有限类型，且无法加符号或颜色 - 如果要悬停显示播放按钮，直接给
<li>加data-track-id属性，别把 ID 塞进序号文本里
动态榜单必须重置 counter-reset 或清空 DOM
用 JavaScript 切换榜单（如“华语榜”切到“电音榜”）时，如果只是 innerHTML 替换内容，旧的 counter 状态可能残留，导致新榜单序号从 6 开始。
- 安全做法：替换前先清空
<ol>，或用replaceChildren()完全重建节点 - 如果用
counter-reset: rank;，确保每次渲染新榜单时该样式规则仍生效（比如没被 scoped CSS 隔离掉） - 服务端渲染榜单时，序号必须由后端生成并写入 HTML——JS 补序号容易在 SSR/SEO 场景下失效
榜单的“序号”本质是数据状态，不是装饰。HTML <ol> 提供了最轻量的语义骨架，但一旦开始用 JS 增删项，就得同步维护计数逻辑，这点容易被忽略。
