HTML 定义列表容器标签 - <dl>

什么是 <dl> 标签？

<dl> 标签是HTML中用于定义列表（Definition List）的容器元素。它用于包裹一组术语（<dt>）及其定义或解释（<dd>）。

定义列表通常用于展示词汇表、术语解释、常见问题解答（FAQ）、产品规格说明等内容。

基本语法

html 
<dl>
  <dt>术语1</dt>
  <dd>术语1的详细定义或解释。</dd>
  
  <dt>术语2</dt>
  <dd>术语2的详细定义或解释。</dd>
</dl>

浏览器默认样式

浏览器会为定义列表容器添加以下默认样式：

  • 默认的外边距（margin）
  • 内部元素的默认间距

这些默认样式可以通过CSS进行自定义。

全局属性

<dl> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为定义列表指定类名
id 为定义列表指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定列表内容的语言

最佳实践

1. 正确的语义化使用

<dl> 标签应该用于展示术语及其定义的关系，而不是用于普通的列表布局。

适合使用定义列表的场景：

  • 词汇表
  • 术语表
  • 常见问题解答（FAQ）
  • 产品规格说明
  • 参数列表

2. 保持结构清晰

每个 <dl> 元素应该包含逻辑相关的术语和定义。避免在一个定义列表中混合不相关的内容。

示例：

html 
<!-- 好的做法：一个定义列表包含相关的术语 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于定义网页的视觉样式。</dd>
  
  <dt>JavaScript</dt>
  <dd>脚本语言，用于为网页添加交互功能。</dd>
</dl>

3. 正确嵌套结构

<dl> 标签的直接子元素应该是 <dt> 和 <dd> 元素。一个 <dt> 元素可以对应一个或多个 <dd> 元素，也可以多个 <dt> 元素对应同一个 <dd> 元素。

示例：

html 
<!-- 一个术语对应多个定义 -->
<dl>
  <dt>Web</dt>
  <dd>万维网（World Wide Web）的简称，是互联网上的信息系统。</dd>
  <dd>也指网页或网站。</dd>
</dl>

<!-- 多个术语对应同一个定义 -->
<dl>
  <dt>HTML</dt>
  <dt>超文本标记语言</dt>
  <dd>用于创建网页结构的标准标记语言。</dd>
</dl>

4. 使用CSS自定义样式

使用CSS可以自定义定义列表的外观，包括间距、背景色、边框等。

示例：

html 
<style>
  /* 自定义定义列表的整体样式 */
  dl.custom-dl {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    background-color: #f8f9fa;
  }
  
  /* FAQ样式 */
  dl.faq {
    font-family: Arial, sans-serif;
  }
</style>

<dl class="custom-dl">
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于定义网页的视觉样式。</dd>
</dl>

5. 避免滥用定义列表

不要为了布局目的而滥用定义列表。如果内容不包含术语和定义的关系，应该使用其他列表类型（如 <ul> 或 <ol>）或其他HTML元素。

常见应用场景

1. 词汇表

html 
<h2>Web开发词汇表</h2>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言（HyperText Markup Language），用于创建网页的结构。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets），用于定义网页的视觉样式。</dd>
  
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于为网页添加交互功能和动态效果。</dd>
</dl>

2. 常见问题解答（FAQ）

html 
<h2>常见问题解答</h2>
<dl>
  <dt>什么是HTML？</dt>
  <dd>HTML是超文本标记语言，是用于创建网页的标准标记语言。</dd>
  
  <dt>HTML和CSS有什么区别？</dt>
  <dd>HTML用于定义网页的结构，而CSS用于定义网页的视觉样式。</dd>
</dl>

3. 产品规格说明

html 
<h2>产品规格</h2>
<dl>
  <dt>产品名称</dt>
  <dd>智能手机 Pro</dd>
  
  <dt>屏幕尺寸</dt>
  <dd>6.7英寸</dd>
  
  <dt>分辨率</dt>
  <dd>2778 x 1284 像素</dd>
</dl>

与CSS的结合使用

CSS提供了丰富的属性来自定义定义列表容器的样式：

1. 基础样式定制

css 
/* 定义列表容器 */
dl {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 20px 0;
}

2. 高级样式定制

css 
/* 自定义定义列表为卡片样式 */
dl.card-dl {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

/* 水平布局的定义列表 */
@media (min-width: 768px) {
  dl.horizontal-dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }
}

/* 词汇表样式 */
dl.vocabulary {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  padding: 20px;
}

完整示例

html 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定义列表容器示例</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #333;
      border-bottom: 2px solid #0066cc;
      padding-bottom: 10px;
    }
    
    h2 {
      color: #0066cc;
      margin-top: 30px;
    }
    
    /* 词汇表样式 */
    dl.vocabulary {
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 5px;
      padding: 20px;
    }
    
    dl.vocabulary dt {
      font-weight: bold;
      color: #0066cc;
      margin-top: 15px;
    }
    
    dl.vocabulary dd {
      margin-left: 20px;
      margin-bottom: 10px;
      color: #495057;
    }
    
    /* FAQ样式 */
    dl.faq {
      border: 1px solid #dee2e6;
      border-radius: 5px;
      overflow: hidden;
    }
    
    dl.faq dt {
      background-color: #e9ecef;
      padding: 15px;
      margin: 0;
      border-bottom: 1px solid #dee2e6;
      cursor: pointer;
      font-weight: bold;
      color: #495057;
    }
    
    dl.faq dd {
      padding: 15px;
      margin: 0;
      background-color: white;
      color: #6c757d;
    }
    
    /* 最后一个条目移除边框 */
    dl.faq dt:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <h1>HTML 定义列表容器的使用</h1>
  
  <h2>1. 词汇表</h2>
  <dl class="vocabulary">
    <dt>HTML</dt>
    <dd>超文本标记语言（HyperText Markup Language），用于创建网页的结构。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表（Cascading Style Sheets），用于定义网页的视觉样式。</dd>
    
    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于为网页添加交互功能和动态效果。</dd>
  </dl>
  
  <h2>2. 常见问题解答</h2>
  <dl class="faq">
    <dt>什么是HTML？</dt>
    <dd>HTML是超文本标记语言，是用于创建网页的标准标记语言。它使用标签来定义网页的结构和内容。</dd>
    
    <dt>HTML和CSS有什么区别？</dt>
    <dd>HTML用于定义网页的结构，如标题、段落、列表等，而CSS用于定义网页的视觉样式，如颜色、字体、布局等。</dd>
  </dl>
</body>
</html>

总结

<dl> 标签是HTML中用于创建定义列表的容器元素，它与 <dt>（定义术语）和 <dd>（定义描述）标签一起使用，用于展示术语及其定义的关系。在实际应用中，应该根据内容的语义选择合适的列表类型，并保持结构的清晰和简洁。

最后更新：2026-02-07