<ol>是语义化有序列表容器，按DOM顺序渲染编号，不自动排序内容；需确保<li>书写顺序即逻辑顺序，支持start、type、reversed属性控制显示，动态排序须用JavaScript实现。
用 <ol> 标签创建基础有序列表
HTML 有序列表本质是语义化容器，不是“自动排序工具”。它只负责按 DOM 顺序渲染编号，不分析内容值。所以别指望写 <ol><li>10</li><li>2</li></ol> 就能显示 “1. 2 2. 10”——它只会老老实实标为 “1. 10 2. 2”。
正确做法是确保 <li> 元素在 HTML 中的书写顺序就是你想要的逻辑顺序：
<ol> <li>准备开发环境</li> <li>初始化项目结构</li> <li>编写核心业务逻辑</li> <li>运行并测试功能</li> </ol>
-
<ol>必须只包含<li>（或<script>、<template>），不能直接塞<p>或<div> - 每个
<li>必须显式闭合；省略会导致嵌套错乱，尤其在含子列表时 - 浏览器容错会自动补全，但 JS 操作
document.querySelectorAll('li')可能漏掉未闭合项
控制编号起始与类型：用 start 和 type 属性
想从第 3 步开始编号？或者改用字母而非数字？这两个属性能快速调整视觉呈现，但注意它们不影响语义和可访问性（屏幕阅读器仍按 DOM 顺序读）。
-
start="5"：让第一个<li>显示为 “5.”，后续递增。支持负数，如start="-2"→ “-2., -1., 0.” -
type="a"：小写字母（a, b, c…）；type="I"是大写罗马数字（I, II, III…） -
type值仅限1、A、a、I、i，其他如lower-greek不被原生支持，需用 CSS 替代 - 多个属性可共存：
<ol start="3" type="A">→ “C., D., E.”
倒序显示编号：用 reversed 属性
reversed 是布尔属性，加了就生效，不加就不生效。它让编号从大到小排，但 DOM 顺序不变——这点很关键。
立即学习“前端免费学习笔记（深入）”；
例如：<ol reversed><li>终稿</li><li>初稿</li></ol> 渲染为：
2. 终稿 1. 初稿
- 编号倒排 ≠ 内容倒序：DOM 中仍是 “终稿” 在前、“初稿” 在后，JS 获取
textContent顺序不会变 - 若真要反转内容顺序，得用 JS 重排
<li>节点，或改写 HTML 结构 -
reversed和start可叠加：<ol reversed start="10">→ “10., 9., 8.”
动态排序必须用 JavaScript，<ol> 本身不排序
如果你的数据来自 API 或用户输入，需要按字母、数字、日期重新排列，<ol> 标签完全无能为力。必须用 JS 提取、排序、再插入 DOM。
- 先转数组：
[...document.querySelectorAll('li')]，别用Array.from()或slice()处理 NodeList，容易漏节点 - 排序前
.trim()去空格，避免 “Apple ” 和 “apple” 排错位 - 数字字符串要转类型：
parseInt(a.textContent) || 0，否则 “10” 会排在 “2” 前面 - 排序后用
list.appendChild(item)逐个追加，浏览器会自动移除原位置，不用手动remove()
真正容易被忽略的是：排序后的列表，编号虽然连续，但 start 和 reversed 属性不会自动重算。如果原始 <ol start="100">，排序后你还想保持编号从 100 开始，就得手动重设 ol.start = 100 —— 浏览器不会帮你推导。
