一、列表标签¶

HTML5 中提供了三种列表标签：

标签	语义
`<ul></ul>`	无序列表（没有刻意的顺序）
`<ol></ol>`	有序列表
`<dl></dl>`	定义列表

1、无序列表 - 基础语法¶

语法：

无序列表使用 <ul></ul>标签，是英文单词 unordered list（不排序列表）的缩写；
每个列表项都是 <li></li>标签，是英文单词 list item（列表项目）的缩写；
无序列表是一个父子组合标签，上阵父子兵，不能单独出现，<ul>是父标签，<li>是子标签。

<h1>无序列表</h1>
<ul>
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

注：

ul、li标签是嵌套形式，li标签必须要缩进（一个 Tab）；
li标签不能单独使用；
ul的子标签只能是 li；
li标签中是可以放任何标签的。

TIP

作为大厂资深的前端工程师们，都会熟练的使用 Emmet 语法在实际开发中可以大大的提升开发效率 Emmet 官方文档：Emmet Documentation

2、无序列表 - 列表嵌套¶

<h1>无序列表-嵌套</h1>

<ul>
  <li>
    <h2>北京市</h2>
    <ul>
      <li>海淀区</li>
      <li>东城区</li>
      <li>朝阳区</li>
      <li>石景山区</li>
    </ul>
  </li>
  <li>
    <h2>上海市</h2>
    <ul>
      <li>黄浦区</li>
      <li>浦东新区</li>
      <li>徐汇区</li>
      <li>静安区</li>
    </ul>
  </li>
</ul>

![[Pasted image 20260126222128.png]]¶

3、无序列表的 type 属性¶

type 属性： 无序列表有 type 属性，可以定义前导符号的样式，但在 HTML5 中已经被废弃，建议使用 CSS 替代，只作为学习和了解即可。

属性	值	描述
type	disc	默认值，实心圆
type	square	实心正方形
type	circle	空心圆

注意： 在 HTML 4 中的 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：

<h1>无序列表标签</h1>
<p>ul的type属性在HTML5中已经废弃，使用CSS替代</p>

<h2>style="list-style-type:disc" 实心圆</h2>
<ul style="list-style-type:disc">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

![[Pasted image 20260126222242.png]]

<h2>style="list-style-type:square" 实心正方形</h2>
<ul style="list-style-type:square">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

<h2>style="list-style-type:circle" 空心圆</h2>
<ul style="list-style-type:circle">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

![[Pasted image 20260126222534.png]]¶

4、无序列表在开发中的使用¶

TIP： 导航栏、各种页面 list 列表…… 基本常见网站导航、列表页都会使用 ul li无序列表标签。 ![[Pasted image 20260126223032.png]]

5、有序列表 - 基础语法¶

![[Pasted image 20260126223052.png]] 有刻意顺序的列表就叫做 有序列表。

关于有序列表：

有序列表使用 <ol></ol>标签，每个列表项都是 <li></li>标签；
<ol>标签是英文 ordered list（排序列表）的缩写；
ol的特性与 ul li同理。

<h1>编程语言排行榜</h1>
<ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

![[Pasted image 20260126223242.png]]

6、有序列表 ol 的 type 属性¶

ol标签可以设置 type属性，用来设置编号的类型：

type 属性值	描述
1	数字编号（默认值）
A	大写英文字母编号
a	小写英文字母编号
I	大写罗马数字编号
i	小写罗马数字编号

<h1>编程语言排行榜</h1>
<p>ol type属性值</p>

<ol type="1">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

<ol type="A">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>
<!-- ...... -->

7、有序列表 ol 的 start 属性¶

start 属性：

start 属性值必须是一个整数，指定了列表编号的起始值；
此属性的值是阿拉伯数字，即使 ol指定了 type属性值。

<h1>编程语言排行榜</h1>
<p>ol type属性值 和 start属性值</p>

<ol type="1" start="3">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

<ol type="A" start="2">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

<ol type="a" start="6">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

![[Pasted image 20260126223308.png]]¶

8、有序列表 ol 的 reversed 属性¶

reversed 属性：

reversed 属性是 HTML5 中的新属性；
reversed 属性是一个布尔属性；
reversed 属性指定列表中的条目是否是倒序排列的；
reversed 属性不需要值，只需要写 reversed单词即可。

<h1>有序列表 ol的reversed属性（倒序排列）</h1>
<ol type="1" reversed>
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

9、定义列表¶

需要逐条给出定义描述的列表，就是定义列表。

定义列表使用 <dl></dl>标签，是英文单词 definition list（定义列表）的缩写；
<dt></dt>标签，是英文单词 data term（数据项）的缩写；
<dd></dd>标签，是英文单词 data definition（数据定义）的缩写；
dd标签内容是对 dt标签的解释说明。

案例以小米官网首页底部 ![[Pasted image 20260126223415.png]]

<dl>是定义列表标签，内容交替出现 <dt>、<dd>标签：

<h1>定义列表 - dt dd标签交替出现</h1>
<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>关注我们</dd>
  <dd>自助服务</dd>

  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>关于我们</dd>
</dl>

也允许 dt和 dd不交替出现，而是分别处于不同定义列表 dl中，这么写，可以有更多的 dl，可以更好的服务 CSS 样式：

<h1>定义列表 dt dd 不交替出现</h1>

<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>关注我们</dd>
  <dd>自助服务</dd>
</dl>

<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>关于我们</dd>
</dl>

10、最佳实践¶

标签	适用场景	最佳实践	注意事项
`<ul>`	无序列表（顺序不重要）	菜单、导航链接	避免嵌套过深
`<ol>`	有序列表（顺序重要）	步骤说明、排名	合理使用编号类型
`<li>`	列表项（`<ul>`或 `<ol>`的子元素）	购物车商品、步骤项	不能单独使用
`<dl>`	术语和定义	术语解释、产品规格	避免用于简单键值对
`<dt>`	定义术语（`<dl>`的子元素）	技术术语、名称	内容应简洁
`<dd>`	定义描述（`<dl>`的子元素）	术语解释、详细说明	一个 `<dt>`可对应多个 `<dd>`