跳到主要内容

HTML 描述列表

提示
  1. 描述列表基础：HTML 中的 <dl> 标签用于创建描述列表，其中 <dt> 用于定义术语，<dd> 用于定义术语的描述，适用于键/值对展示。
  2. 灵活的术语与定义组合：描述列表支持多种组合，包括单个术语对应单个定义、单个术语对应多个定义，以及多个术语共享单个定义。
  3. 使用场景：描述列表适用于需要清晰展示标题和描述关系的情况，如语义上的标题-描述元素格式，或表示项之间的关系。

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

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

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

浏览器输出

带有 2 个定义的 HTML 描述列表 这里，你可以看到两种不同类型的列表项：

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

你可以看到描述列表包含两个相关值，因此它也可以用来存储 键/值对。

由于描述列表包括术语的定义，它也被称为 定义列表。

多个术语和多个定义​

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

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

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

  • 单个术语 (<dt>) 和单个定义 (<dd>)。
  • 多个术语 (<dt>) 和单个定义 (<dd>)。
  • 多个定义 (<dd>) 和单个术语 (<dt>)。

让我们来看几个例子，

1. 单个术语和描述​

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

浏览器输出

每个术语有单个描述的 HTML 描述列表 这里，我们可以看到一个单独的术语后跟着一个单独的描述。

2. 单个术语和多个描述​

有时，我们会遇到有多个描述符适合同一个术语的数据，如产品及其功能列表。 在这种情况下，我们可以在单个术语 <dt> 后面跟随多个功能/描述 <dd> 来更好地呈现。例如，

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言。</dd>
  <dd>用于创建网站。</dd>
  <dd>于 1993 年发布。</dd>
</dl>

浏览器输出

每个术语有多个描述的 HTML 描述列表 这里，我们可以看到单个术语 <dt>HTML</dt> 由多个定义 <dd> 描述。

3. 多个术语和单个描述​

有时，我们会遇到多个键可能具有相似值的数据。如多种编程语言可能具有相同的功能集。 在这种情况下，我们可以将几个键 <dt> 后跟一个单独的描述 <dd>，这样单个描述就可以描述许多术语，

<dl>
  <dt>HTML</dt>
  <dd>是标记语言</dd>
  <dt>Python</dt>
  <dt>Java</dt>
  <dd>是编程语言。</dd>
</dl>

浏览器输出

多个术语有单个描述的 HTML 描述列表 这里，我们可以看到多个术语 <dt>Python</dt> 和 <dt>Java</dt> 共享相同

的描述 <dd>是编程语言。</dd>。

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

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

最后于 更新