ol列表是语义化结构，纯文本编号仅具视觉效果；ol通过dom暴露可访问性信息，支持seo富摘要、屏幕阅读器顺序播报及start/reversed等语义属性，错误使用将导致语义断裂。
ol列表是语义化结构，普通文本编号只是视觉呈现
浏览器和辅助技术（比如屏幕阅读器）根本不会把“1. 打开终端”这样的纯文本识别成“第1步”。它只当你是普通段落——哪怕你手动写了“1.”“2.”“3.”，也没法触发任何顺序逻辑。而ol标签一出现，就向整个生态声明：“这些项有明确先后”，DOM里会暴露role="list"和aria-ordinal等可访问性信息。
常见错误现象包括：用p或div写“1. …… 2. ……”后发现SEO不收录步骤、盲人用户听不出操作顺序、自动化测试脚本无法按“第n项”定位元素。
-
ol的编号由浏览器自动计算，不依赖你手输数字；写错li嵌套或漏掉li标签，编号直接消失或错位 - 纯文本编号无法响应
start、reversed或CSScounter-reset等机制 - 搜索引擎会把
ol > li结构识别为“步骤型内容”，可能在搜索结果中展示为富摘要（如“共3步”）；纯文本没这待遇
ol的start属性能真正改变语义起点，手动编号做不到
start="5"不是“从5开始显示”，而是告诉浏览器：“这个列表逻辑上起始于第5个位置”，后续li仍按5→6→7递增。屏幕阅读器会报“第5项”“第6项”，而不是“项目5”“项目6”。手动写“5. …… 6. ……”只会被读作“段落”。
使用场景举例：法律条文续接（前文已列到第33条，当前ol从start="34"开始）、教程分章节（第二章的步骤从start="1"重置，但语义上仍是新序列）。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- start值必须是整数，不能是
"5th"或"v"；IE不支持该属性 - 不要混用
start和li的value属性：value只覆盖单个项显示值，不重置后续计数，易导致编号断裂（如<li value="10">...</li> <li>...</li>→ 10、11，而非10、11、12） - 若需跳号（如1、2、5、6），应改用CSS
counter-increment，而非依赖HTML属性
ol嵌套时子列表必须完整落在li内部，否则语义断裂
看到“34. …… a) …… b) ……”这种结构，很多人会本能地写两个并排ol，但这是错的。子ol必须完全包裹在父li的起始与结束标签之间，否则浏览器会把它当作悬空节点，既不继承父级编号逻辑，也不被读屏器识别为子步骤。
性能影响不大，但可访问性直接归零：嵌套失败时，屏幕阅读器会把子项读作“新列表第1项”，而非“第34条下的第1小点”。
- 正确结构：
<ol start="34"><li>主条款<ol type="a"> <li>子项a</li> <li>子项b</li> </ol> </li></ol> - 错误结构：
<ol start="34"><li>主条款</li></ol> <ol type="a"><li>子项a</li></ol>（子ol脱离父li，无父子关系） -
type属性（如type="a"）仅控制显示样式，语义上子列表是否有序，取决于内容本身是否依赖顺序——不是为了缩进或字体小一号就硬套ol
ol的reversed属性表达倒序逻辑，不是CSS翻转
reversed是布尔属性，启用后浏览器不仅倒着显示编号（3、2、1），还会让辅助技术明确播报“倒序列表的第3项”“倒序列表的第2项”。手动用CSS transform: scaleY(-1)或JS反转DOM顺序，只会让视觉倒过来，语义和可访问性全崩。
典型使用场景：倒计时步骤（“3. 执行” → “2. 准备” → “1. 启动”）、回滚流程（“3. 撤销变更” → “2. 关闭连接” → “1. 保存快照”）。
-
reversed只对decimal类型（默认数字）可靠生效；type="A"或type="i"在部分浏览器中可能不倒序 - 若需配合起始值，必须同时设
start，例如<ol start="3" reversed></ol>才显示3、2、1；只写reversed会从项数开始倒（3项→3、2、1，4项→4、3、2、1） - 别用
reversed来“假装”倒序——如果实际执行顺序就是正向的，强行加reversed反而误导用户
ol却写了ul或纯文本），后续所有CSS修饰、JS交互、SEO优化都补不回语义断层。编号看起来一样，但对机器来说，它根本不是“步骤”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
