HTML 中的描述列表

30 2025年7月 | 阅读 9 分钟

HTML（超文本标记语言）是网页内容的基础，为在线发布的信息提供了结构和含义。在它众多的标签中，<dl> 元素，或称定义列表，是可用于显示术语及其解释的成对的语义化工具之一。定义列表包含三个标签

<dl>：它包裹整个列表
<dt>：用于定义术语
<dd>：提供描述

这种格式在开发词汇表、编译常见问题解答（FAQ）列表、显示元数据或开发清晰易懂的技术文档方面特别有用。开发人员使每个术语与其含义在语义上相关联，从而不仅提高了可读性，还改善了 SEO 和对所有用户的可访问性。

<dl> 元素可以用 CSS 进行样式化，从而实现美观的视觉形式；开发人员可以根据美学和可读性更改间距、字体样式和布局。通过引入 JavaScript 的交互性，例如在单击时切换定义，还可以改善用户体验。

1. HTML 中的 <dl> 标签

DL 标签用于定义包含术语及其定义的列表。该文章通常用于您时间有限，并且想要解决与术语相关的一些问题时。

除了 <dt> 和 <dd> 之外，<dl> 标签构成了用于创建定义列表的 HTML 标签的三巨头。

定义列表结构

它包含在 <dl> 标签内的整个定义列表。单词包含在 dt 标签中，而它的含义在 dl 标签的 dd 标签中。

示例

<dl>  
  <dt>Term 1</dt>  
  <dd>Definition 1</dd>    
  <dt>Term 2</dt>  
  <dd>Definition 2</dd>  
  <!-- More terms and definitions can be added as needed -->  
</dl>  

2. <dt> 标签

定义列表以 <dt> 标签开始。它通常紧跟在前面的 <dd> 或 <dl> 之后。

示例

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

3. <dd> 标签

<dd> 标签因此提供了关于 <dt> 标签中显示的术语定义的“信息”。

示例

<dl>  
  <dt>JavaScript</dt>  
  <dd>A programming language that enables interactive web pages.</dd>   
  <dt>API</dt>  
  <dd>Application Programming Interface - a set of rules for building software applications.</dd>  
</dl>  

4. 嵌套定义列表

此外，定义列表可以嵌套在彼此内部以表示不同的层级。当不同的术语包含其他术语和描述并被分配了各种定义时，使用这样的系统会很有帮助。

示例

<dl>  
  <dt>Programming Languages</dt>  
  <dd>  
    <dl>  
      <dt>JavaScript</dt>  
      <dd>Used for web development.</dd>      
      <dt>Python</dt>  
      <dd>Known for readability and ease of use.</dd>  
    </dl>  
  </dd>  
  <dt>Web Technologies</dt>  
  <dd>  
    <dl>  
      <dt>HTML</dt>  
      <dd>Markup language for creating web pages.</dd>      
      <dt>CSS</dt>  
      <dd>Style sheets for web page presentation.</dd>  
    </dl>  
  </dd>  
</dl>  

样式和展示

可以使用 CSS 为定义列表设置样式。通过对 <dl>、<dt> 和 <dd> 标签应用样式，您可以确定格式、颜色和字体大小。

示例（CSS）

dl {  
  /* Style for the entire definition list */  
  margin-bottom: 20px;  
}  
dt {  
  /* Style for definition terms */  
  font-weight: bold;  
}  
dd {  
  /* Style for definition descriptions */  
  margin-left: 20px;  
}  

可访问性注意事项

在使用定义列表时，可访问性非常重要。语义化的 HTML 使屏幕阅读器等残障人士使用的设备能够与视力障碍或听力障碍者有效交换重要信息。请确保 <dt> 和 <dd> 的内容与术语-定义关系正确链接。

描述列表的应用场景

词汇表

主要地，定义列表用于创建一个网站的词汇表，方便人们轻松快速地获取他们可能会遇到的术语的定义。

元数据和描述

在某些情况下，定义列表是网站上特定元素的元数据或描述。

常见问题解答（FAQ）

<dl> 元素在组建 FAQ 列表时很有用，其中每个问题都有其答案。

高级用法和最佳实践

1. 语义标记

语义 HTML 标签的一些例子是 <ul> 和 <li>。它们还拥有 <dl>、<dt> 和 <dd> 等标签来标记文档的结构和性质。利用语义标记和定义列表来促进可访问性和 SEO。

2. CSS 灵活性

根据您的设计，利用定义列表的 CSS 灵活性。CSS 属性，包括 float、display 和 margin，将用于实现所需的布局。

用于水平布局的 CSS 示例

dl {  
  display: flex;  
}  
dt, dd {  
  margin: 0;  
}  
dt {  
  font-weight: bold;  
  margin-right: 10px;  
}  

3. 响应式设计

不要忘记在响应式设计中使用定义列表。确保您的列表可以在不同的屏幕尺寸和方向上运行，并在所有设备上提供相似的良好用户体验。

4. 微数据和 Schema.org

要获取有关您页面上的术语和定义的更多信息，还可以使用 Schema.org 提供的微数据注解。它可以增强您的内容在搜索引擎结果页面上的感知和排名。

使用 Schema.org 标记的示例

<dl itemscope itemtype="http://schema.org/DefinedTerm">  
  <dt itemprop="termCode">HTML</dt>  
  <dd itemprop="description">HyperText Markup Language</dd>  
</dl>  

5. JavaScript 交互性

使用 JavaScript，您可以使定义列表更加动态。举个例子，您可以使用切换操作来显示/隐藏解释或自动插入条件和描述。

6. Aria 角色和属性

请确保，如果您正在构建一个 Web 应用程序或一个丰富的 Web 页面，您可以使用 ARIA（Accessible Rich Internet Applications）角色和属性为辅助技术提供更详细的信息。

注意：截至 2025 年，不应将 role="list" 或 role="listitem" 等 ARIA 角色添加到原生的 <dl>、<dt> 和 <dd> 等元素。所有这些已经为辅助技术提供了正确的语义，引入 ARIA 角色可能会造成混淆。请按照它们应有的方式使用它们，不添加其他 HTML。

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
</dl>

要避免的常见错误

1. 滥用 <dl>

在您的标准中使用 <dl> 元素。它用于创建定义列表，并且不应被用来构建容器或样式化项目。当需要容器时，请使用 <div> 或其他任何可样式化的元素。

2. 忽略 <dt> 或 <dd>

每个人都必须拥有 <dt> 和 <dd> 这两个。省略任何一个都可能导致其解释出现问题，并且浏览器和辅助技术可能需要帮助才能准确解释。

3. 过度嵌套列表

嵌套是一项需要谨慎使用的重要功能。通常建议使用扁平结构来创建简单的列表。仅当出于清晰性或结构化目的需要时才应使用嵌套。

4. 忽视可访问性

永远不要忘记可访问性。信息应以良好的方式呈现，并且当屏幕阅读器或任何其他辅助技术读取时易于理解；<dt> 和 <dd> 中的文本应简短且非常清晰。

实际使用示例

因此，我们将考虑一些 <dl> 最常见的用法。

1. 词汇表

教育网站上可以注意到的一个特点是使用词汇表，教育网站使用定义列表来满足学生和学习过程的需求。例如

示例

<dl>
  <dt>Physics</dt>
  <dd>The study of matter, energy, and the fundamental forces that govern the universe.</dd>
  <dt>Biology</dt>
  <dd>The scientific study of living organisms and their interactions with each other and their environments.</dd>
</dl>

2. FAQ（常见问题解答）

常见问题通常以定义列表的形式组织在网站上，这使得查找答案变得容易。

示例

<dl>
  <dt>How do I reset my password?</dt>
  <dd>Follow the "Forgot Password" link on the login page and follow the instructions sent to your email.</dd>
  <dt>What payment methods do you accept?</dt>
  <dd>We accept credit/debit cards and PayPal for online transactions.</dd>
</dl>

3. 元数据和描述

定义列表也便于在网站上显示元数据和描述。

示例

<dl>  
<dt>Author</dt>  
<dd>Prachet Y</dd>  
<dt>Published</dt>  
<dd>July 23, 2025</dd>  
</dl>  

4. 技术文档

定义列表可用于技术文档中以定义术语和概念。

示例

<dl>
<dt>API Key</dt>
A code consisting of numerical and alphabetical characters is used to verify the validity of requests to a web service.
<dt>Endpoint</dt>
It is a particular URL when accessing an API or web service.
</dl>

使用 CSS 进行高级样式化

CSS 定义列表的吸引力。这是一个干净且时尚的示例

示例

<style>
dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
dt, dd {
flex-basis: calc(50% - 20px);
margin: 10px;
padding: 15px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
}
dt {
font-weight: bold;
}
</style>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<!-- Other terms and definitions can be added here as required. -->
</dl>

以下 CSS 代码提供了一个定义列表，具有灵活的设计，可在不同屏幕上良好显示。

1. 响应式设计

CSS 中的媒体查询将有助于使您的定义列表适应小屏幕。以下将是一个修改布局以适应小屏幕的示例

示例

@media only screen and (max-width: 600px) {
  dl {
    flex-direction: column;
  }
  dt, dd {
    flex-basis: 100%;
  }
}

当屏幕宽度等于或小于 600 像素时，布局将切换为单列，以便在小设备上更轻松地显示。

实现 JavaScript 交互性

还可以借助 JavaScript 为定义列表添加一些交互性。举个例子，您可能希望考虑添加一个切换工具，以根据用户的输入显示或隐藏词汇条目。以下是一个简单的 JavaScript 示例

示例

&<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Interactive Definitions</title>  
  <style>  
    dt {  
      cursor: pointer;  
      text-decoration: underline;  
    }  
    dd {  
      display: none;  
      margin-left: 20px;  
    }  
  </style>  
</head>  
<body>  
<dl>  
  <dt data-def-id="term1">Term 1</dt>
  <dd id="term1">Definition 1</dd>  
  <dt data-def-id="term2">Term 2</dt>
  <dd id="term2">Definition 2</dd>  
  <!-- Add more terms and definitions as needed -->  
</dl>  
<script> 
document.querySelectorAll('dt').forEach((term) => {
   term.addEventListener('click', function() {
     const defId = this.getAttribute('data-def-id');
     if(defId) {
       const definition = document.getElementById(defId);
       if (definition) {
         definition.classList.toggle('visible');
       }
     }
   });
 });
 </script>
</body>  
</html>  

单击术语（定义为

），将调用 toggleDefinition JavaScript。它将 display:block 或 display:none 的值进行切换，以显示或隐藏相应的定义（定义为

）。这使得目的列表具有交互性。

1. 利用 ARIA 角色和属性

请确保您的 Web 应用具有改进的用户交互功能，支持 ARIA 角色和属性。其中一些添加将使您的定义列表更易于访问。

注意：不要为语义元素添加不必要的 ARIA 角色。对于交互式切换定义，只需更新必要的辅助功能属性（如 aria-expanded），并确保术语可以通过键盘访问。

示例

<dl>
  <dt tabindex="0" aria-expanded="false" aria-controls="term1" data-def-id="term1">Term 1</dt>
  <dd id="term1" aria-labelledby="term1" hidden>Definition 1</dd>
  <dt tabindex="0" aria-expanded="false" aria-controls="term2" data-def-id="term2">Term 2</dt>
  <dd id="term2" aria-labelledby="term2" hidden>Definition 2</dd>
</dl>

Example.js

document.querySelectorAll('dt').forEach((term) => {
  term.addEventListener('click', toggleHandler);
  term.addEventListener('keydown', (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleHandler.call(term); } });
});
function toggleHandler() {
  const defId = this.getAttribute('data-def-id');
  const def = document.getElementById(defId);
  const expanded = this.getAttribute('aria-expanded') === 'true';
  this.setAttribute('aria-expanded', expanded ? 'false': 'true');
  def.hidden = expanded;
}

在这里，list、list item 和 region 等 ARIA 角色被用来使辅助技术能够了解网页内容的组织方式。此外，通过使用 aria-controls、aria-expanded 和 aria-label，可以揭示术语与其定义之间的关系。

2. 微数据和 Schema.org 标记

微数据注解，例如 Schema.org 提供的，可以为 搜索引擎 提供有关网页中术语和含义的额外信息。

注意：微数据用于改进 SEO，而不是增强屏幕阅读器可访问性。

示例

<dl itemscope itemtype="http://schema.org/DefinedTerm">
  <dt itemprop="name" data-def-id="term1">Term 1</dt>
  <dd id="term1" itemprop="description" hidden>Definition 1</dd>
  <dt itemprop="name" data-def-id="term2">Term 2</dt>
  <dd id="term2" itemprop="description" hidden>Definition 2</dd>
  <!-- Add more as needed -->
</dl>

在这种情况下，`itemprop` 属性表示 Schema.org `DefinedTerm` 类型的属性，它为搜索引擎提供有关这些术语和描述的附加数据。

结论

<dl> 标签，连同 <dt> 和 <dd>，为 Web 开发人员提供了一种有用且语义化的方法来显示定义、词汇表、常见问题解答和技术文档。通过现代 CSS，您可以为这些列表设置样式以适应任何设计，而 JavaScript 可以提供交互选项以更好地吸引用户。

也许最重要的是，解决可访问性问题将使信息不仅对普通用户可用，而且对借助辅助技术的个人也可用。

当您将最佳实践纳入您的工作中时，您将通过使用原生的 HTML 元素、通过不显眼的 JavaScript 进行增强以及考虑可访问性来构建结构良好、包容且更友好的 Web 内容。

下一主题HTML del 标签

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题