该用 而不是 时，关键看项目是否并列无序：若互换位置不影响理解（如导航菜单、功能亮点），就用 ；若存在必须遵循的逻辑顺序或执行步骤（如安装流程、法律条款），则必须用 。
什么时候该用 <ul></ul> 而不是 <ol></ol>
关键看项目之间有没有逻辑顺序或依赖关系。如果只是并列罗列、互换位置不影响理解，就用 <ul></ul>；比如导航菜单、功能亮点、标签云。一旦存在“第一步→第二步→必须按此执行”的约束，就必须用 <ol></ol>——浏览器和屏幕阅读器会据此播报“第1项、第2项”，而 <ul></ul> 只会读作“列表项”。
常见错误是把教程步骤写成 <ul></ul>，或者把 FAQ 标签用 <ol></ol> 包裹。前者让辅助技术丢失流程线索，后者则暗示问题有优先级或时间先后，其实没有。
-
<ul></ul>适合：nav内的链接、产品特性清单、相关文章推荐 -
<ol></ol>适合：安装步骤、法律条款编号、搜索结果排名（带序号） - 别为了“看起来像编号”硬套
type="1"在<ul></ul>上——语义错，CSS 也难对齐
<dl></dl> 不是“装饰性列表”，而是语义容器
<dl></dl> 的核心作用是表达“名-值对”，不是为了缩进排版。它常被误用为多列布局或伪表格，但这样会破坏可访问性：屏幕阅读器遇到 <dl></dl> 会明确播报“术语：XXX，定义：YYY”，而 <ul></ul> 套两层 <li> 则完全丢失这种映射关系。
典型正确场景包括参数说明文档、API 响应字段解释、FAQ 的问答对。注意 <dt></dt> 和 <dd></dd> 必须成对出现，且一个 <dt></dt> 可对应多个 <dd></dd>（比如一个术语有多个解释），但不能反过来。
- 错误写法：
<dl> <dt>尺寸</dt> <dt>颜色</dt> <dd>M</dd> <dd>蓝</dd> </dl>（两个<dt></dt>连续，无对应关系） - 正确写法：
<dl> <dt>尺寸</dt> <dd>M</dd> <dd>L</dd> <dt>颜色</dt> <dd>蓝</dd> </dl> - CSS 控制时，
<dd></dd>默认有左缩进，若需水平对齐，建议用display: flex或grid，而非强行重置margin
start、reversed、type 这些属性只对 <ol></ol> 生效
这些是 <ol></ol> 的专属控制项，<ul></ul> 上设了也无效。比如 <ul start="5"></ul> 不会从 5 开始计数，浏览器直接忽略；<ol type="square"></ol> 也不会变成方块，而是继续用数字（除非你用 CSS 强制覆盖）。
实际中 start 最有用在分页列表的后续页（如第2页从第21条开始），reversed 适合倒计时步骤或降序排行榜。但要注意：若用 JavaScript 动态增删 <li>，这些属性不会自动重算序号，得手动更新 start 或改用 CSS counters。
-
type可选值："1"（默认）、"a"、"A"、"i"、"I"；不支持"disc"等<ul></ul>的符号类型 -
reversed是布尔属性，写reversed即生效，不用reversed="true" - IE 低版本不支持
reversed，如需兼容，得用 JS 补充逻辑或改用 CSS
嵌套列表的语义边界容易模糊
嵌套本身合法，但每层都应保持语义一致。<ul></ul> 里嵌 <ol></ol> 没问题（比如“支持的格式”下再列“转换步骤”），但若外层是 <dl></dl>，内层就不该突然塞个 <ul></ul>——这会让辅助技术困惑：术语下面怎么冒出一串无序项目？
更隐蔽的问题是过度嵌套导致 DOM 层级过深，影响渲染性能和维护性。三层以上嵌套就该考虑是否该拆成独立模块或改用其他结构（如卡片+标题）。
- 合理嵌套：
<ul><li>前端框架<ul> <li>React</li> <li>Vue</li> </ul> </li></ul> - 语义断裂：
<dl> <dt>部署流程</dt> <dd><ol><li>准备服务器</li></ol></dd> </dl>（<dd></dd>里放完整有序流程，不如直接用<ol></ol>） - CSS 重置时，
list-style: none会影响所有后代列表，如需保留子列表样式，得显式重写ul ul, ol ol等选择器
<ul></ul> + CSS counter 模拟编号，也不该滥用 <ol></ol> 破坏语义。浏览器和读屏软件不会因为“看起来像编号”就改变解析逻辑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
