答案是：、、 的核心区别在于语义而非样式，用于无序并列项（如导航菜单），用于不可交换的顺序内容（如步骤、排名），仅适用于术语与定义的键值对关系（如API参数说明），选错标签会导致屏幕阅读器误读、SEO降权及可访问性失效。
用 <ul></ul>、<ol></ol>、<dl></dl> 不是为了“看起来像列表”，而是为了让浏览器、搜索引擎和屏幕阅读器准确理解内容关系——选错标签，等于把导航菜单说成烹饪步骤，机器会信。
什么时候该用 <ol></ol> 而不是 <ul></ul>
关键看项与项之间是否存在不可交换的逻辑顺序：步骤、排名、法律条文编号、安装流程……这些必须用 <ol></ol>。比如写“安装 Node.js 的 4 个步骤”，用 <ul></ul> 就是语义错误——即使样式一样，屏幕阅读器会读作“项目1、项目2”，而非“第一步、第二步”。
-
reversed属性只在 HTML5 中有效，IE 完全不支持，慎用于生产环境 -
start值可以是负数（如start="-2"），但部分旧版 Safari 渲染异常，建议只用正整数 - 别为了视觉倒序（如“最新→最旧”）硬套
reversed；用 CSSflex-direction: column-reverse更可控且兼容
<dl></dl> 不是“多列列表”，而是名-值对的唯一合法容器
很多人把 <dl></dl> 当成两栏布局工具，塞进一堆 <dt></dt>
<dd></dd> 对，结果语义崩坏。它只适用于真正存在定义关系的内容：术语表、API 参数说明、联系信息（<dt>邮箱</dt>
<dd>contact@example.com</dd>）、新闻元数据（<dt>作者</dt>
<dd>张三</dd>）。
- 一个
<dt></dt>可对应多个<dd></dd>（如一个术语有多个解释），但一个<dd></dd>不能跨多个<dt></dt> - 不要用
<dl></dl>实现“标题+描述+操作按钮”这种 UI 组合——那是<section></section>+<header></header>+<div> 的事 <li>屏幕阅读器对 <code><dl></dl>的播报是“术语：xxx，定义：yyy”，若中间插了按钮或链接，会打断语义流 -
<ul></ul>内可自由嵌<ul></ul>或<ol></ol>，只要子项逻辑自洽 -
<ol></ol>嵌套<ol></ol>时，内层start不继承外层，需显式设置（如外层第3项下含子步骤，应写<ol start="1"></ol>） - 避免三层以上嵌套——DOM 深度增加会拖慢可访问性遍历，也加大 CSS 选择器匹配负担
嵌套列表时，父级语义必须能包容子级
嵌套本身没问题，但常见错误是让语义断裂：比如在 <ol></ol> 里嵌一个 <ul></ul> 表示“第3步的可选操作”，这合理；但如果在 <ul></ul> 导航菜单里嵌 <ol></ol> 表示“子菜单排序”，就错了——子菜单项之间本无先后依赖，用 <ul></ul> 嵌套即可。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的不是怎么写，而是怎么删：当某段内容既不是并列项、也不是有序流程、更没有定义关系时，它就不该在任何列表里——哪怕加了 list-style: none 伪装成列表，语义上仍是无效结构。
