HTML 定义描述标签 - <dd>

什么是 <dd> 标签？

<dd> 标签是HTML中用于提供定义描述（Definition Description）的元素。它必须是 <dl>（定义列表）标签的直接子元素，用于指定对 <dt>（定义术语）标签中术语的定义、解释或说明。

<dd> 标签通常紧跟在对应的 <dt> 标签之后，形成完整的术语-定义关系。

基本语法

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

浏览器默认样式

浏览器会为 <dd> 元素添加以下默认样式：

  • 文本通常会缩进显示
  • 默认的外边距（margin）
  • 继承父元素的大部分样式

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

全局属性

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

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

最佳实践

1. 正确的语义化使用

<dd> 标签应该用于提供对术语的定义、解释或说明，而不是用于普通的文本段落。

示例：

html 
<!-- 好的做法：用于定义术语的解释 -->
<dl>
  <dt>前端开发</dt>
  <dd>负责构建网站用户界面的技术，包括HTML、CSS和JavaScript。</dd>
</dl>

<!-- 不好的做法：用于普通文本段落 -->
<dl>
  <dt>段落标题</dt>
  <dd>这是一个普通的文本段落，不包含对术语的解释。</dd>
</dl>

2. 与 <dt> 标签的配合使用

<dd> 标签应该与 <dt> 标签配合使用，形成完整的定义关系。可以有多种组合方式：

  • 一个 <dt> 对应一个 <dd>
  • 一个 <dt> 对应多个 <dd>
  • 多个 <dt> 对应一个 <dd>

示例：

html 
<!-- 一个术语对应一个定义 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言。</dd>
</dl>

<!-- 一个术语对应多个定义 -->
<dl>
  <dt>API</dt>
  <dd>应用程序编程接口的缩写。</dd>
  <dd>用于不同软件组件之间的交互。</dd>
</dl>

<!-- 多个术语对应一个定义 -->
<dl>
  <dt>HTTP</dt>
  <dt>HTTPS</dt>
  <dd>用于在网络上传输数据的协议。</dd>
</dl>

3. 内容的完整性

<dd> 标签内的内容应该是对对应术语的完整定义或解释，确保读者能够理解术语的含义。

示例：

html 
<!-- 好的做法：提供完整的解释 -->
<dl>
  <dt>CSS</dt>
  <dd>层叠样式表（Cascading Style Sheets），用于定义网页的视觉样式，如颜色、字体、布局等。</dd>
</dl>

<!-- 不好的做法：解释不完整 -->
<dl>
  <dt>CSS</dt>
  <dd>一种样式表语言。</dd>
</dl>

4. 使用CSS自定义样式

使用CSS可以自定义 <dd> 元素的外观，包括缩进、颜色、字体样式等。

示例：

html 
<style>
  /* 自定义定义描述样式 */
  dl.custom-dl dd {
    margin-left: 20px;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 3px solid #ddd;
    color: #666;
  }
  
  /* FAQ中的定义描述样式 */
  dl.faq dd {
    padding: 15px;
    background-color: white;
    color: #333;
  }
</style>

<dl class="custom-dl">
  <dt>HTML</dt>
  <dd>超文本标记语言，用于创建网页结构。</dd>
</dl>

5. 避免滥用

不要为了布局目的而滥用 <dd> 标签。如果内容不包含对术语的解释，应该使用其他HTML元素如 <p>、<div> 等。

常见应用场景

1. 词汇表

html 
<h2>Web开发词汇表</h2>
<dl>
  <dt>DOM</dt>
  <dd>文档对象模型（Document Object Model），是HTML和XML文档的编程接口。</dd>
  
  <dt>AJAX</dt>
  <dd>异步JavaScript和XML，用于在不重新加载页面的情况下更新网页内容。</dd>
</dl>

2. 常见问题解答（FAQ）

html 
<h2>常见问题解答</h2>
<dl>
  <dt>如何联系客服？</dt>
  <dd>您可以通过以下方式联系客服：<br>
  - 电话：400-123-4567<br>
  - 邮箱：support@example.com<br>
  - 在线聊天：点击页面右下角的聊天图标</dd>
  
  <dt>订单多久能发货？</dt>
  <dd>一般情况下，订单会在24小时内发货。特殊情况可能会延迟，请您谅解。</dd>
</dl>

3. 产品规格

html 
<h2>产品详细参数</h2>
<dl>
  <dt>处理器</dt>
  <dd>Intel Core i7-1165G7，4核8线程，基频2.8GHz，睿频4.7GHz</dd>
  
  <dt>内存</dt>
  <dd>16GB DDR4-3200MHz双通道内存</dd>
  
  <dt>存储</dt>
  <dd>512GB PCIe 3.0 NVMe SSD</dd>
</dl>

4. 术语解释

html 
<h2>法律术语解释</h2>
<dl>
  <dt>知识产权</dt>
  <dd>指人们就其智力劳动成果所依法享有的专有权利，通常是国家赋予创造者对其智力成果在一定时期内享有的专有权或独占权。</dd>
  
  <dt>版权</dt>
  <dd>版权即著作权，是指文学、艺术、科学作品的作者对其作品享有的权利（包括财产权、人身权）。</dd>
</dl>

与CSS的结合使用

CSS提供了丰富的属性来自定义 <dd> 元素的样式：

1. 基础样式定制

css 
/* 定义描述的基本样式 */
dd {
  color: #666;
  margin-left: 20px;
  margin-bottom: 15px;
  line-height: 1.6;
}

2. 高级样式定制

css 
/* 自定义定义描述的缩进和边框 */
dl.custom-dl dd {
  margin-left: 30px;
  padding-left: 15px;
  border-left: 3px solid #0066cc;
}

/* FAQ中的定义描述样式 */
dl.faq dd {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 0 0 5px 5px;
}

/* 水平布局中的定义描述样式 */
@media (min-width: 768px) {
  dl.horizontal-dl dd {
    grid-column: 2;
    margin-left: 0;
  }
}

完整示例

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;
    }
    
    /* 基本样式 */
    dt {
      font-weight: bold;
      color: #2d3748;
      margin-top: 15px;
    }
    
    /* 自定义定义描述样式 */
    dd {
      color: #666;
      margin-left: 25px;
      margin-bottom: 15px;
      padding-left: 10px;
      border-left: 2px solid #e0e0e0;
    }
    
    /* 词汇表样式 */
    dl.vocabulary {
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 5px;
      padding: 20px;
    }
    
    dl.vocabulary dd {
      color: #495057;
      border-left-color: #0066cc;
    }
    
    /* 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;
      margin-top: 0;
    }
    
    dl.faq dd {
      padding: 15px;
      margin: 0;
      background-color: white;
      color: #333;
      border-left: none;
      margin-left: 0;
      margin-bottom: 0;
    }
    
    /* 最后一个条目的边框处理 */
    dl.faq dt:last-child {
      border-bottom: none;
    }
    
    /* 水平布局样式 */
    dl.horizontal {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 15px;
      margin-top: 20px;
    }
    
    dl.horizontal dt {
      grid-column: 1;
      text-align: right;
      padding-right: 10px;
      border-right: 2px solid #e0e0e0;
      margin-top: 0;
    }
    
    dl.horizontal dd {
      grid-column: 2;
      margin-left: 0;
      border-left: none;
      padding-left: 0;
    }
  </style>
</head>
<body>
  <h1>HTML 定义描述的使用</h1>
  
  <h2>1. 基本用法</h2>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言（HyperText Markup Language），用于创建网页的结构和内容。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表（Cascading Style Sheets），用于定义网页的视觉样式，如颜色、字体、布局等。</dd>
  </dl>
  
  <h2>2. 词汇表样式</h2>
  <dl class="vocabulary">
    <dt>JavaScript</dt>
    <dd>一种脚本语言，用于为网页添加交互功能和动态效果。</dd>
    
    <dt>React</dt>
    <dd>一个用于构建用户界面的JavaScript库，由Facebook开发。</dd>
    
    <dt>Vue.js</dt>
    <dd>一个渐进式JavaScript框架，用于构建用户界面。</dd>
  </dl>
  
  <h2>3. 常见问题解答</h2>
  <dl class="faq">
    <dt>什么是响应式设计？</dt>
    <dd>响应式设计是一种网页设计方法，使网页能够根据不同设备的屏幕尺寸和分辨率自动调整布局和内容，提供良好的用户体验。</dd>
    
    <dt>如何优化网站性能？</dt>
    <dd>优化网站性能的方法包括：压缩图片和代码、使用CDN、减少HTTP请求、启用缓存、使用懒加载等。</dd>
    
    <dt>什么是语义化HTML？</dt>
    <dd>语义化HTML是指使用具有明确含义的HTML标签来构建网页结构，使搜索引擎和浏览器能够更好地理解网页内容。</dd>
  </dl>
  
  <h2>4. 水平布局</h2>
  <dl class="horizontal">
    <dt>姓名</dt>
    <dd>李四</dd>
    
    <dt>职业</dt>
    <dd>前端开发工程师</dd>
    
    <dt>工作经验</dt>
    <dd>3年</dd>
    
    <dt>技术栈</dt>
    <dd>HTML5, CSS3, JavaScript, React, Vue.js</dd>
  </dl>
  
  <h2>5. 一个术语对应多个定义</h2>
  <dl>
    <dt>Web</dt>
    <dd>万维网（World Wide Web）的简称，是互联网上的信息系统。</dd>
    <dd>也指网站或网页的集合。</dd>
    <dd>在编程中，也指基于浏览器的应用程序。</dd>
  </dl>
</body>
</html>

总结

<dd> 标签是HTML中用于提供定义描述的重要元素，它必须与 <dl> 和 <dt> 标签配合使用，形成完整的定义列表结构。在实际应用中，应该根据内容的语义正确使用 <dd> 标签，并可以通过CSS自定义其外观，以适应不同的设计需求。

最后更新：2026-02-07