HTML列表是网页中组织同类内容的核心元素，不同类型的列表适用于不同的内容展示需求，合理选择列表类型可以让页面结构更清晰，也更符合语义化规范。
HTML列表的三种核心类型
1. 无序列表（ul）
无序列表是最常用的列表类型，列表项前默认显示实心圆点标记，适用于没有顺序要求的同类内容展示，比如导航菜单、商品标签、功能列表等。
无序列表的核心标签是<ul>，内部只能包含<li>标签作为列表项，代码结构如下：
<ul> <li>首页</li> <li>产品中心</li> <li>关于我们</li> <li>联系我们</li> </ul>
可以通过CSS修改无序列表的标记样式，常用的标记类型有disc（实心圆，默认）、circle（空心圆）、square（实心方块），也可以自定义图片作为标记。
2. 有序列表（ol）
有序列表的列表项前会显示数字或字母等顺序标记，适用于有明确步骤、排名、序号要求的内容，比如操作教程、排行榜、问卷选项等。
有序列表的核心标签是<ol>，内部同样只能包含<li>标签，默认标记是数字，代码结构如下：
<ol> <li>打开软件安装包</li> <li>点击下一步完成安装</li> <li>启动软件并注册账号</li> <li>完成基础配置</li> </ol>
有序列表的标记类型可以通过type属性调整，可选值包括1（数字，默认）、a（小写字母）、A（大写字母）、i（小写罗马数字）、I（大写罗马数字），也可以通过start属性指定起始序号。
3. 定义列表（dl）
定义列表用于展示术语和对应解释的配对内容，适用于词汇表、商品参数说明、FAQ等场景，结构包含术语项和描述项两部分。
定义列表的核心标签是<dl>，内部包含<dt>标签定义术语，<dd>标签定义术语对应的描述，代码结构如下：
<dl> <dt>HTML</dt> <dd>超文本标记语言，用于描述网页的结构</dd> <dt>CSS</dt> <dd>层叠样式表，用于设置网页的样式和布局</dd> <dt>JavaScript</dt> <dd>脚本语言，用于实现网页的交互功能</dd> </dl>
一个<dt>可以对应多个<dd>，也可以多个<dt>对应同一个<dd>，灵活适配不同的内容展示需求。
三种列表的对比与选择
可以通过下表快速判断不同场景下应该选择哪种列表类型：
| 列表类型 | 核心标签 | 默认标记 | 适用场景 |
|---|---|---|---|
| 无序列表 | <ul>、<li> | 实心圆点 | 导航菜单、标签集合、无顺序的功能列表 |
| 有序列表 | <ol>、<li> | 数字序号 | 操作步骤、排行榜、带序号的说明内容 |
| 定义列表 | <dl>、<dt>、<dd> | 无默认标记 | 术语解释、参数说明、问答类内容 |
使用注意事项
- 所有列表的内部直接子元素只能是对应类型的子标签，比如
<ul>下不能直接放文本，必须包裹在<li>中 - 列表可以嵌套使用，比如有序列表中嵌套无序列表，实现更复杂的层级内容展示
- 不要仅为了缩进效果使用列表，列表的核心作用是语义化组织内容，样式调整应该通过CSS实现
- 定义列表的描述项
<dd>会有默认的左边距，不需要额外通过CSS添加缩进
掌握三种HTML列表的类型和适用场景，能够让你在开发时更合理地组织页面内容，同时提升网页的语义化程度，对SEO和 accessibility 都有积极作用。