适合做教程章节编号，因浏览器原生自动递增、语义明确、利于seo和可访问性；start控制起始编号，嵌套需正确包裹于内，type与start独立计算。
为什么 <ol></ol> 适合做教程章节编号
因为浏览器原生支持自动递增、语义明确、屏幕阅读器能正确播报层级和顺序，比手动写“1. ”“2. ”更可靠。用 <p></p> 或硬编码数字会丢失大纲结构，影响 SEO 和可访问性。
start 属性控制章节起始编号的实际效果
教程常分多页或接续前文，start 能让编号无缝延续。比如上一节末尾是第 7 章，本页开头就该从 8 开始 —— 直接写 <ol start="8"></ol> 即可，后续 <li> 自动变成 8、9、10…
- 值必须是整数，不能带单位（如
start="8."或start="第八章"都无效） - 若同时用了
type="A"，start="8"对应的是字母 H，不是数字 8；想从 H 开始就得写start="8"，不是start="H" - 嵌套时外层
start不影响内层编号逻辑，内层仍从 1 或指定start值开始
嵌套 <ol></ol> 实现“章-节-小节”三级结构
教程章节常含子项（如“3.2 列表嵌套规则”），靠嵌套 <ol></ol> 最干净。关键点是：子 <ol></ol> 必须完整包裹在父级 <li> 内，不能放在外面。
错误写法：<li>第三章</li>
<ol><li>3.1 小节</li></ol> → 浏览器会把 <ol></ol> 当作新列表，脱离第三章语义
正确写法：<li>第三章<ol><li>3.1 小节</li></ol>
</li>
- 外层用默认
type="1"，内层可用type="a"或type="i"区分层级 - CSS 中可通过
ol ol选择器单独控制二级缩进和编号样式 - 别嵌套超过三层，否则可读性下降，且部分旧版屏幕阅读器解析不稳定
用 CSS 覆盖默认缩进但保留编号语义
教程页面常需紧凑排版，<ol></ol> 默认的左侧缩进太宽。直接删 padding-left 可能导致编号被裁切 —— 因为浏览器默认用 list-style-position: outside，编号在内容框外渲染。
- 安全做法是改用
list-style-position: inside，再调padding-left - 或保留
outside，但加margin-left: 0; padding-left: 0;并手动给<li>设text-indent - 禁用编号用
list-style-type: none后，编号逻辑仍在 DOM 中，对辅助技术友好；但若彻底隐藏编号又不提供替代文本，就违背语义初衷
最易被忽略的是：嵌套时每层 <ol></ol> 的 type 和 start 是独立计算的，不会自动继承父级值。比如父层 start="5"，子层仍默认从 1 开始 —— 这不是 bug，是设计使然，需要显式声明子层 start 才能对齐逻辑序号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
