HTML<ul>、<ol>和<dl>列表

HTML 列表用于以格式良好和语义化的方式呈现信息列表。HTML 中有三种不同类型的列表无序列表、有序列表和定义列表，每一种都有特定的目的和含义。在本教程中，您将学习如何在 HTML 中创建不同类型的列表。

使用 HTML 列表

HTML 列表用于以格式良好和语义化的方式呈现信息列表。HTML 中有三种不同类型的列表，每一种都有特定的目的和含义。

注意：您可以在列表项中放置文本、图像、链接、换行符等。您还可以将整个列表放置在列表项中以创建嵌套列表。

在以下部分中，我们将一一介绍所有三种类型的列表：

使用<ul>元素创建的无序列表，每个列表项都以<li>元素开头。

无序列表中的列表项标有项目符号。请看下面例子：

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

上述示例的输出如下：

您还可以使用 CSS list-style-type属性更改无序列表中的项目符号类型。以下样式规则将项目符号的类型从默认的disc更改为square：

ul {
    list-style-type: square;
}

请查看有关CSS 列表的教程，详细了解如何设置 HTML 列表样式。

使用<ol>元素创建的有序列表，每个列表项都以<li>元素开头。当列表项的顺序很重要时，请使用有序列表。

有序列表中的列表项用数字标记。请看下面例子：

<ol>
    <li>Fasten your seatbelt</li>
    <li>Starts the car's engine</li>
    <li>Look around and go</li>
</ol>

上述示例的输出如下：

有序列表中的项目编号通常从 1 开始。但是你如果要更改它，可以使用start属性，如下例所示：

<ol start="10">
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

上述示例的输出如下：

与无序列表一样，您也可以使用 CSS list-style-type属性更改有序列表中的编号类型。以下样式规则将标记类型更改为罗马数字。

ol {
    list-style-type: upper-roman;
}

提示：您还可以使用type属性来更改编号类型，例如type="I". 但是，您应该避免使用此属性，而应该使用 CSS list-style-type属性。

定义列表是每个项目具有描述或定义的项目列表。

定义列表是使用<dl>元素创建的。<dl>元素与指定术语<dt>元素以及指定术语定义元素<dl>结合使用。

浏览器通常通过将术语和定义放在单独的行中来呈现定义列表，其中术语的定义略微缩进。请看下面例子：

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

上述示例的输出如下：

Bread

A baked food made of flour.

Coffee

A drink made from roasted coffee beans.