ul和ol的本质区别在于语义顺序：ol用于步骤依赖、逻辑先后或数值意义的内容（如安装流程、法律条款），换序会改变含义；ul用于地位平等、可互换的并列项（如导航菜单、技术栈标签），换序不影响理解。
ul 和 ol 的区别不在“有没有编号”，而在内容是否依赖顺序——换位置会不会让意思出错。
什么时候必须用 ol？
当列表项之间存在步骤依赖、逻辑先后或数值意义时，ol 不是可选项，而是语义必需：
- 安装流程：“1. 解压包 → 2. 运行 install.sh → 3. 重启服务”，调换第2步和第3步会直接导致失败
- 法律条款编号：第1条、第2条……修改顺序等于篡改条文效力
- 排行榜：第1名、第2名，名次本身携带权重信息
- 时间线事件：2023年上线 → 2024年重构 → 2025年接入新协议，时间不可逆
此时用 ul 会误导屏幕阅读器、搜索引擎和代码审查工具——它们会认为这些项可互换，而实际并非如此。
什么时候该用 ul？
当所有项地位平等、无执行先后、无权重差异时，ul 才是语义正确的选择：
- 导航菜单：
<ul> <li>首页</li> <li>关于</li> <li>联系</li> </ul>，顺序不影响功能 - 技术栈标签：
<ul> <li>React</li> <li>TypeScript</li> <li>Tailwind</li> </ul>，并列关系，无主次 - 支持格式列表：“PDF / DOCX / TXT”，任意排列都不改变含义
- 错误提示汇总：多个校验失败项，彼此独立，不构成流程
即使你用 CSS 给 ul 加了数字序号，它仍是无序语义——就像给一群平级同事强行排座次，视觉上像有序，但结构上没意义。
ol 的 start 和 reversed 属性不是装饰用的
这两个属性服务于真实场景的语义表达，不是为了“换个样式”：
-
start="5"：适用于接续前一列表（比如上一页结束于第4步，本页从第5步开始），而非单纯“想从5开始数” -
reversed：用于倒序排行榜（如“最新发布的3个版本”，应显示为 3 → 2 → 1），它改变的是语义计数方向，不是视觉翻转 - 滥用
type="A"或type="i"而不考虑内容是否真有字母/罗马序意义，反而会削弱可访问性——读屏软件仍按数字逻辑播报，但用户看到的是字母，造成认知错位
浏览器默认用阿拉伯数字呈现 ol，这不是“样式缺陷”，而是对“顺序”最中立、最通用的语义映射。
嵌套列表时，子列表要独立判断语义
不能因为父容器是 ol 就把所有子项都塞进 ol：
- 一个安装步骤（
ol）里的“注意事项”是并列提醒，该用ul，而不是硬套ol继续编号 - 导航菜单（
ul）下拉项如果本身是步骤（如“注册流程”），那子列表就该切回ol，而非沿用父级的ul - 嵌套层级超过三层容易破坏可读性，尤其对辅助技术——多数屏幕阅读器在深度嵌套时会丢失上下文
每个 ul 或 ol 都该单独回答一个问题：“这些项之间，换位置会不会让意思变？”答案决定用哪个标签，跟视觉效果无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
