ol 是语义化有序列表，声明项序不可交换；div 模拟仅具视觉效果，无语义、不被辅助技术识别、不支持 start/reversed 属性、嵌套维护困难，且损害可访问性与seo。
ol 是语义化列表，div 模拟列表只是视觉仿造
用 div 套 div 或 span 手动加数字、缩进、序号样式，根本不是列表——浏览器、屏幕阅读器、搜索引擎都认不出这是“有序序列”。ol 的存在意义不是“显示 1. 2. 3.”，而是声明“这些项的顺序不可交换”。一旦用 div 替代，语义就彻底丢失，且无法通过 CSS 补救。
辅助技术读出来完全不一样
屏幕阅读器遇到 ol 会明确播报“有序列表，共 3 项：第一项，第二项，第三项”，并支持跳转到某一项；遇到一堆 div，只会逐个读作“文字、文字、文字”或“区块、区块、区块”，用户无法感知步骤关系，也无法快捷导航。
-
<ol> <li>下载安装包</li> <li>双击运行</li> </ol>→ 屏幕阅读器说：“有序列表，2 项：第一项，下载安装包；第二项，双击运行” -
<div>1. 下载安装包</div> <div>2. 双击运行</div>→ 屏幕阅读器说：“文字，1. 下载安装包；文字，2. 双击运行”（无结构、无顺序提示）
ol 支持语义属性，div 完全不响应
ol 的 start、reversed 是 DOM 级语义控制，影响编号逻辑和辅助技术行为；div 加了这些属性等于没写，浏览器直接忽略。
-
<ol start="4"> <li>配置环境</li> <li>启动服务</li> </ol>→ 编号为 4、5，且 DOM 中li元素的value属性自动设为对应值 -
<div start="4"> <div>配置环境</div> <div>启动服务</div> </div>→start属性无任何效果，编号需 JS 手动维护，且不反映在可访问性树中 -
reversed同理：只有ol reversed能让读屏软件识别“倒序逻辑”，div+ CSSflex-direction: column-reverse只翻显示顺序，不改语义
嵌套与可维护性差距极大
真实场景中常有“主步骤 + 子选项”结构。用 ol 嵌套 ul 是标准做法，编号连续、语义清晰；用 div 模拟，很快就会陷入手动编号、缩进错位、JS 同步失败等问题。
- 正确嵌套：
<ol> <li>初始化项目</li> <li>添加依赖<ul> <li>React</li> <li>Axios</li> </ul> </li> </ol>—— 主步骤是顺序关键，子依赖是并列关系，各自语义独立 - div 模拟陷阱：为让子项缩进+带小圆点，得加多层
div+ 复杂 CSS；若后续要插入新步骤，所有手动编号都要重调；SEO 也完全无法提取步骤结构
最易被忽略的是：语义错误在开发时几乎看不出问题，但上线后对残障用户、SEO 排名、自动化测试工具的影响是隐蔽且不可逆的——你不能靠“看起来一样”来判断是否正确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
