跳到主要内容

HTML 列表

提示
  1. HTML列表类型：HTML支持三种类型的列表：无序列表<ul>，有序列表<ol>，和描述列表<dl>。
  2. 无序与有序列表：无序列表用于项目顺序无关紧要的情况，而有序列表用于项目顺序重要的情况，两者均使用<li>标签定义列表项。
  3. 描述列表的结构：描述列表由<dt>标签定义术语或标题，和<dd>标签定义术语的描述，适用于展示名称-值对的数据。

HTML 列表用于以易于阅读和简洁的方式显示相关信息。

三种类型的 HTML 列表 在 HTML 中，我们可以使用三种类型的列表来表示不同类型的数据：

  1. 无序列表 <ul>
  2. 有序列表 <ol>
  3. 描述列表 <dl>

无序列表​

无序列表用于表示列表中项目顺序不重要的数据。

在 HTML 中，我们使用 <ul> 标签来创建无序列表。列表的每一项都必须是一个 <li> 标签，代表列表项。例如，

<ul>
  <li>苹果</li>
  <li>橙子</li>
  <li>芒果</li>
</ul>

浏览器输出

一个 HTML 无序列表示例 这里，<li>苹果</li>、<li>橙子</li> 和 <li>芒果</li> 是列表项。

要了解更多关于无序列表的信息，请访问 HTML 无序列表。

有序列表​

有序列表用于表示列表中项目顺序有意义的数据。

<ol> 标签用于创建有序列表。与无序列表类似，有序列表中的每个项目也必须是一个 <li> 标签。例如，

<ol>
  <li>准备</li>
  <li>设置</li>
  <li>开始</li>
</ol>

浏览器输出

一个 HTML 有序列表示例 在这里，您可以看到列表项用数字表示，以展示特定的顺序。

要了解更多关于有序列表的信息，请访问 HTML 有序列表。

描述列表​

HTML 描述列表用于以名称-值形式表示数据。我们使用 <dl> 标签来创建定义列表，每个描述列表的项目都有两个元素：

  • 术语/标题 - 由 <dt> 标签表示
  • 术语的描述 - 由 <dd> 标签表示

让我们看一个示例，

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>

浏览器输出

一个 HTML 描述列表示例 由于描述列表包含术语的定义，它也被称为定义列表。要了解更多关于描述列表的信息，请访问 HTML 描述列表。

HTML 列表中使用的标签​

标签解释
<ol>定义有序列表。
<ul>定义无序列表。
<dl>定义描述列表。
<li>在有序或无序列表中定义列表项。
<dt>在描述列表中定义术语。
<dd>在描述列表中定义术语的描述。
最后于 更新