HTML有序列表制作排行榜实例-html教程-PHP中文网

html有序列表（）无法原生实现倒序排名、奖牌图标或并列名次，需css伪元素（::marker）、计数器或aria增强；动态排序须重排dom而非仅改文本，且要兼顾可访问性与打印兼容性。

html有序列表制作排行榜实例

HTML 有序列表（<ol></ol>）本身不支持“自动倒序”或“带奖牌图标”的排行榜效果，必须靠 CSS 或额外 HTML 配合才能实现视觉上的排名强化。

用 `<ol></ol>` 做基础排行榜，但别指望它自动显示“第1名”“第2名”

浏览器默认只渲染数字（1.、2.、3.），且起始值由 start 属性控制，不能反向计数。比如想显示“冠军、亚军、季军”，<ol></ol> 原生不提供语义化标签或自动映射。

正确做法：用 <ol></ol> 维护真实顺序（如得分从高到低排列），再用 CSS 自定义 list-style-type 或伪元素补充视觉标识
错误做法：试图用 start="3" + reversed 模拟倒序——reversed 只影响数字递减，不改变 DOM 顺序，对屏幕阅读器也不友好
若需“并列第2名”，<ol></ol> 无法原生表达，得改用 <ul></ul> + 手动写“2.”“2.”，或用 ARIA 属性增强可访问性

用 `::marker` 和 `counter-reset` 控制编号样式

现代浏览器支持 ::marker 伪元素，能直接改编号颜色、字体大小；配合 counter-reset 和 counter-increment，还能实现“???”等图标替代数字。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

<ol class="medal-rank">
<li>张三</li>
  <li>李四</li>
  <li>王五</li>
</ol><style>
.medal-rank {
  counter-reset: medal;
}
.medal-rank li {
  counter-increment: medal;
}
.medal-rank li::marker {
  content: "";
}
.medal-rank li:nth-child(1)::before { content: "? "; }
.medal-rank li:nth-child(2)::before { content: "? "; }
.medal-rank li:nth-child(3)::before { content: "? "; }
</style>

::marker 在 Safari 15.4+、Chrome 99+、Firefox 106+ 支持良好，旧版需回退到 list-style: none + ::before
不要在 ::marker 里用复杂布局（比如 flex），它只接受有限样式（color、font-size、content）
如果排行榜要打印，部分浏览器会忽略 ::marker 的自定义内容，建议测试 @media print

当需要点击排序或动态更新时，`<ol></ol>` 不是数据容器

<ol></ol> 是呈现层标签，不是状态管理工具。JavaScript 排序后，必须手动重排 DOM 节点或重新生成整个列表，否则 start 和视觉顺序会错位。

用 Array.sort() 处理数据后，清空 <ol></ol> 再用 innerHTML 或 append() 插入新 <li>，别只改文本内容
避免给 <li> 加 id="rank-1" 这类硬编码 ID——排序后 ID 不再对应实际名次，应改用数据属性如 data-rank="1"
如果用框架（React/Vue），别把 <ol></ol> 当作“唯一数据源”，它只是视图投影；名次逻辑必须保留在 JS 数据结构中