HTML描述列表

我们使用 HTML 描述列表来创建一个列表，其中列表项包含术语及其描述。

在 HTML 中，我们使用 <dl> 标签来创建描述列表。例如，

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

浏览器输出

在这里，您可以看到两种不同类型的列表项

• <dt> - 定义术语/名称
• <dd> - 定义术语/名称的描述/值

您可以看到描述列表包含两个相关的值，因此它也可以用于存储 **键/值对** 中的项。

由于描述列表包含术语的定义，因此也称为 **定义列表**。

多个术语和多个描述

正如我们所见，描述列表用于以 **键/值格式** 显示数据，其中 <dt> 标签表示键元素，<dd> 标签元素表示键的值（定义）。

但是，在创建描述列表时，一个 <dt> 标签（键）不一定只有一个 <dd> 标签（值）。我们可以有 <dt> 和 <dd> 元素的任何组合。

术语和术语描述的可能组合

• 单个术语（<dt>）具有单个描述（<dd>）。
• 多个术语（<dt>）具有单个描述（<dd>）。
• 单个术语（<dt>）具有多个描述（<dd>）。

让我们看几个例子，

1. 单个术语和描述

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

浏览器输出

在这里，我们可以看到单个术语后跟一个单个描述。

2. 单个术语和多个描述

有时，我们会遇到数据，其中有多个描述符适合同一个术语，例如产品及其功能列表。

在这种情况下，我们不必在每个功能前重复列出产品名称，而是可以在单个术语 <dt> 后面跟多个功能/描述 <dd> 以更好地呈现。例如，

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language.</dd>
  <dd>Used to create Websites.</dd>
  <dd>Released in 1993.</dd>
</dl>

浏览器输出

在这里，我们可以看到单个术语 <dt>HTML</dt> 由多个描述 <dd> 描述。

3. 多个术语和单个描述

有时，我们会遇到多个键可能具有相似值的数据。例如，多种编程语言可以具有相同的功能集。

在这种情况下，我们不必重复键/值对，而是可以将几个键 <dt> 分组，然后跟一个描述 <dd>，以便单个描述可以描述多个术语，

<dl>
  <dt>HTML</dt>
  <dd>is markup language</dd>
  <dt>Python</dt>
  <dt>Java</dt>
  <dd>are programming languages.</dd>
</dl>

浏览器输出

在这里，我们可以看到多个术语 <dt>Python</dt> 和 <dt>Java</dt> 共享相同的描述 <dd>are programming languages.</dd>。

何时在 HTML 中使用描述列表？

当我们想要在 HTML 中表达标题-描述元素的语义正确的格式时，描述列表是最佳选择。我们还可以使用描述列表来表示对之间的关系。