HTML <dd> 标签-代码号

HTML <dd> 标签详解：定义列表的描述项

概述

<dd> 标签与 <dl> 和 <dt> 标签共同用于创建定义列表（definition list）。其中 <dd> 标签包含对 <dt> 标签定义的术语的描述说明。每个术语组至少应包含一个 <dt> 标签后跟一个 <dd> 标签。

基本语法

<dd> 标签是双标签，需要在开标签 <dd> 和闭标签 </dd> 之间包含描述内容。

<dl>
  <dt>术语</dt>
  <dd>术语的描述内容</dd>
</dl>

列表结构组合方式

定义列表支持多种结构组合：

一个术语对应多个描述
一个术语对应一个描述
多个术语对应一个描述
多个术语对应多个描述

代码示例

示例1：编程术语定义列表

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 编程术语解释</title>
  <style>
    dl {
      border-left: 4px solid #3498db;
      padding-left: 20px;
      margin: 20px 0;
    }
    dt {
      font-weight: bold;
      color: #2c3e50;
      margin-top: 15px;
    }
    dd {
      margin-left: 20px;
      color: #7f8c8d;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>代码号编程学习术语表</h1>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页结构和内容</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于定义网页的样式和布局</dd>
    
    <dt>JavaScript</dt>
    <dd>一种脚本编程语言，用于实现网页交互功能</dd>
    <dd>在2025年的Web开发中仍然占据重要地位</dd>
  </dl>
</body>
</html>

示例2：课程信息展示

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 课程安排列表</title>
</head>
<body>
  <h1>2025年代码号编程课程安排</h1>
  <dl>
    <dt>前端开发基础</dt>
    <dd>学习HTML、CSS、JavaScript基础知识</dd>
    <dd>课程时长：2个月</dd>
    <dd>适合人群：零基础初学者</dd>
    
    <dt>Python数据分析</dt>
    <dt>数据科学入门</dt>
    <dd>使用Python进行数据处理和分析</dd>
    <dd>包含NumPy、Pandas等库的学习</dd>
    
    <dt>全栈开发实战</dt>
    <dd>前后端综合开发项目实践</dd>
    <dd>结业后可独立完成网站开发</dd>
  </dl>
</body>
</html>

元素特性

块级元素

<dd> 是块级元素，可以包含其他元素：

段落（<p>）
列表（<ul>、<ol>）
图片（<img>）
链接（<a>）
以及其他块级和内联元素

默认样式

默认情况下，<dd> 元素在左侧有外边距（margin），用于缩进显示。

CSS样式设置

文本样式控制

dd {
  font-family: 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-transform: none;
  text-decoration: none;
  color: #333;
  background-color: #f9f9f9;
}

布局样式调整

css

dd {
  text-indent: 2em;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  line-height: 1.8;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  margin: 10px 0 10px 40px;
  padding: 8px 12px;
  border-left: 3px solid #e74c3c;
}

本节课程知识要点

语义化结构：<dd> 与 <dl>、<dt> 共同构成语义化的定义列表
灵活组合：支持多种术语与描述的对应关系
样式控制：通过CSS可以自定义描述项的显示样式
内容丰富性：可以包含各种HTML元素，增强描述内容的表达能力

实际应用场景

场景1：常见问题解答(FAQ)

<!DOCTYPE html>
<html>
<head>
  <title>代码号 - 学习FAQ</title>
</head>
<body>
  <h1>代码号学习编程常见问题</h1>
  <dl>
    <dt>如何开始学习编程？</dt>
    <dd>建议从HTML和CSS基础开始，然后学习JavaScript</dd>
    <dd>可以参加代码号的入门课程，有系统化的学习路径</dd>
    
    <dt>需要什么配置的电脑？</dt>
    <dd>一般配置的电脑即可，主要需要安装代码编辑器和浏览器</dd>
    
    <dt>学习周期是多久？</dt>
    <dd>基础部分约2-3个月，完整学习需要6-12个月</dd>
  </dl>
</body>
</html>

场景2：技术文档参数说明

<!DOCTYPE html>
<html>
<head>
  <title>API接口参数说明</title>
  <style>
    .api-params {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
    }
    .api-params dt {
      color: #d35400;
      font-family: monospace;
    }
    .api-params dd {
      background: white;
      padding: 10px;
      border-radius: 4px;
      margin: 5px 0 15px 20px;
    }
  </style>
</head>
<body>
  <div class="api-params">
    <h2>用户注册API参数</h2>
    <dl>
      <dt>username</dt>
      <dd>用户名，字符串类型，长度3-20个字符</dd>
      
      <dt>email</dt>
      <dd>邮箱地址，必须符合邮箱格式规范</dd>
      
      <dt>password</dt>
      <dd>密码，至少包含8个字符，需有数字和字母组合</dd>
    </dl>
  </div>
</body>
</html>

浏览器兼容性

所有主流浏览器（Chrome、Edge、Firefox、Safari、Opera）都支持 <dd> 标签。

注意事项

语义化使用：确保在合适的场景使用定义列表，不要仅为了缩进而使用
可访问性：屏幕阅读器能够正确识别定义列表的结构
响应式设计：在小屏幕设备上适当调整缩进和边距

<dd> 标签是HTML定义列表中的重要组成部分，提供了语义化的方式来展示术语和其描述之间的关系。通过合理的CSS样式设置，可以创建出既美观又功能性的定义列表，非常适合用于术语表、FAQ、参数说明等场景。

本文标签：

HTML <dd> 标签