HTML列表由、、三种语义化标签实现：表并列项，表逻辑顺序，支持多对多术语描述；嵌套须合规，语义优先于样式，影响可访问性、SEO与兼容性。
HTML 里没有叫 列表_ 的标签，也不存在“列表展示”这种独立功能标签——列表靠 <ul></ul>、<ol></ol> 和 <dl></dl> 三种语义化容器实现，缺一不可。
怎么用 <ul></ul> 和 <ol></ol> 区分无序与有序
别靠样式猜语义：即使 <ul></ul> 用了数字样式，它仍是无序列表；<ol></ol> 即使设了 list-style: none，语义上还是有序的。屏幕阅读器、SEO、打印样式都依赖这个区别。
常见错误现象：<ul></ul> 里嵌 <li> 写成 <li>1. 内容</li> —— 数字该由浏览器自动生成，手写会破坏可访问性。
-
<ul></ul>适合并列项（如导航菜单、功能点） -
<ol></ol>适合步骤、排名、法律条款等有先后逻辑的场景 -
start属性只对<ol></ol>有效，比如<ol start="5"></ol> -
type（如type="A"）在<ol></ol>中可用，但现代 CSS 更推荐用list-style-type控制
<dl></dl> 不是“定义列表”那么简单
很多人以为 <dl></dl> 只能做术语解释，其实它是唯一支持多值描述的 HTML 列表结构：一个 <dt></dt> 可对应多个 <dd></dd>，一个 <dd></dd> 也能解释多个 <dt></dt>。
立即学习“前端免费学习笔记（深入）”；
使用场景：API 参数说明、产品规格表、JSON Schema 字段文档。
容易踩的坑：<dl></dl> 里直接放文本或 <p></p> —— 所有内容必须包裹在 <dt></dt> 或 <dd></dd> 中，否则解析行为不一致（尤其在旧版 Safari 中）。
示例：
<dl> <dt>name</dt> <dd>字符串类型</dd> <dd>必填</dd> <dt>age</dt> <dd>数字类型，大于 0</dd> </dl>
列表嵌套时 DOM 结构和语义不能乱
嵌套本身合法，但层级过深（>3 层）会让辅助技术难以理解。更关键的是：子列表必须作为 <li> 的直接子元素出现，不能挂在 <ul></ul> 外面。
常见错误现象：<ul>
<li>一级</li>
<ul><li>二级</li></ul>
</ul> —— 这个外层 <ul></ul> 里混了 <li> 和 <ul></ul>，违反 HTML 规范，部分浏览器会自动修复但行为不可控。
正确写法：
<ul>
<li>一级
<ul>
<li>二级</li>
</ul>
</li>
</ul>
性能影响：深层嵌套不会拖慢渲染，但会增加 DOM 节点数，对 SSR 后端模板或 JS 动态生成时的内存占用有轻微影响。
最常被忽略的是 <dl></dl> 的兼容性边界：IE8 及更早版本不支持 <dt></dt> 和 <dd></dd> 的 display: list-item 行为，如果要兼容，得额外加 CSS 重置；而 <ul></ul>/<ol></ol> 在所有浏览器里表现一致。语义越强，越得想清楚谁在读它——人眼、JS、爬虫，还是语音合成器。
