有序列表必须用独立标签显式包裹每项，嵌套内容不影响编号逻辑，但需正确闭合；动态添加应创建节点而非拼接字符串，自定义编号需用start/type属性或css计数器。
用 <li> 标签逐个包裹每个列表项
HTML 有序列表（<ol></ol>）本身不支持“批量添加”或“合并写法”，所有列表项必须用独立的 <li> 标签显式声明。浏览器只认嵌套在 <ol></ol> 内的 <li>，其他写法（比如逗号分隔、换行文本）都不会被识别为列表项。
常见错误是把多个内容塞进一个 <li> 里，误以为能自动拆分成多项：
<ol> <li>苹果, 香蕉, 橙子</li> </ol>
这只会渲染成一项：“苹果, 香蕉, 橙子”。正确做法是：
- 每个条目单独用一对
<li> - 顺序不依赖内容，而由
<li>的出现次序决定编号 - 空
<li>也会占位并生成编号（如<li>显示为 “3.”），需留意是否意外留空
嵌套内容不影响列表结构，但需注意标签闭合
<li> 内可自由包含段落、链接、图片甚至另一个列表，只要语法闭合正确，编号逻辑不变。例如：
<ol>
<li>第一步：<strong>初始化环境</strong>
</li>
<li>第二步：<a href="#config">配置参数</a>
</li>
<li>第三步：
<ul>
<li>校验输入</li>
<li>调用 API</li>
</ul>
</li>
</ol>
这里第三项内部用了无序列表，但外部编号仍是 “3.”。容易踩的坑包括：
- 忘记闭合
<li>，导致后续<li>被吞进前一项（浏览器容错会尝试修复，但行为不可靠） - 在
<li>内误用块级元素（如<div>）而未加 <code><p></p>或其他语义容器，虽能渲染但可能破坏可访问性 - 复制粘贴时带入不可见 Unicode 字符（如零宽空格），造成标签解析失败
动态添加多项时，别直接拼接 HTML 字符串
如果用 JavaScript 批量插入，常见错误是手动拼字符串然后赋值给 innerHTML：
list.innerHTML = "
这样做风险高：若数据含 、<code>& 等字符，会破坏结构或引发 XSS。更安全的做法是循环创建节点：
- 用
document.createElement('li')创建每个项 - 用
textContent设置内容（自动转义） - 用
appendChild()逐个追加到<ol></ol> - 避免在循环中反复读取
list.children.length做条件判断——DOM 查询开销大，应缓存初始长度或用for...of
编号样式和起始值要显式控制，别依赖默认
有序列表默认从 1 开始，但实际项目中常需自定义。关键点：
- 用
start属性指定起始数字：<ol start="5"></ol>→ 第一项显示为 “5.” - 用
type控制编号类型：type="a"（小写字母）、type="I"（大写罗马数字）等，注意部分值在旧版 Safari 中支持不一致 - CSS 的
counter-reset和counter-increment可实现更灵活编号（如跳号、多级联动），但<ol></ol>自身不响应这些 CSS 属性，仅影响伪元素渲染 - 若用
reversed属性，编号倒序，但起始值仍由start决定，不是自动取最大值
编号逻辑看似简单，但混合使用 start、嵌套 <ol></ol> 和 CSS 计数器时，很容易出现视觉编号与 DOM 结构脱节——调试时优先检查 <li> 是否真的被正确插入到目标 <ol></ol> 内，而不是父容器错位或被 JS 移动过。
