HTML 定义术语标签 - <dt>

什么是 <dt> 标签？

<dt> 标签是HTML中用于定义术语（Definition Term）的元素。它必须是 <dl>（定义列表）标签的直接子元素，用于指定需要被定义或解释的术语、名词或短语。

<dt> 标签通常与 <dd>（定义描述）标签配合使用，一个或多个 <dt> 标签可以对应一个或多个 <dd> 标签。

基本语法

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

浏览器默认样式

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

  • 文本通常会加粗显示
  • 默认的外边距（margin）
  • 不继承父元素的某些样式

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

全局属性

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

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

最佳实践

1. 正确的语义化使用

<dt> 标签应该用于定义需要被解释的术语、名词或短语，而不是用于普通的文本标记。

示例：

html 
<!-- 好的做法：用于定义术语 -->
<dl>
  <dt>前端开发</dt>
  <dd>负责构建网站用户界面的技术。</dd>
</dl>

<!-- 不好的做法：用于普通文本标记 -->
<dl>
  <dt>这是一个标题</dt>
  <dd>这是普通文本内容</dd>
</dl>

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

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

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

示例：

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

<!-- 一个术语对应多个定义 -->
<dl>
  <dt>Web</dt>
  <dd>万维网的简称。</dd>
  <dd>也指网站或网页。</dd>
</dl>

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

3. 内容简洁性

<dt> 标签内的内容应该保持简洁，通常只包含术语本身，避免包含过多的描述性内容。详细的解释应该放在 <dd> 标签中。

示例：

html 
<!-- 好的做法：术语简洁明了 -->
<dl>
  <dt>CSS</dt>
  <dd>层叠样式表，用于定义网页的视觉样式。</dd>
</dl>

<!-- 不好的做法：术语包含过多描述 -->
<dl>
  <dt>CSS（层叠样式表）</dt>
  <dd>用于定义网页的视觉样式。</dd>
</dl>

4. 使用CSS自定义样式

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

示例：

html 
<style>
  /* 自定义术语样式 */
  dl.custom-dl dt {
    font-weight: bold;
    color: #0066cc;
    margin-top: 10px;
    font-size: 1.1em;
  }
  
  /* FAQ中的术语样式 */
  dl.faq dt {
    cursor: pointer;
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }
</style>

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

5. 避免滥用

不要为了布局目的而滥用 <dt> 标签。如果内容不包含术语和定义的关系，应该使用其他HTML元素。

常见应用场景

1. 词汇表

html 
<h2>计算机术语词汇表</h2>
<dl>
  <dt>CPU</dt>
  <dd>中央处理器，计算机的核心组件。</dd>
  
  <dt>GPU</dt>
  <dd>图形处理器，负责处理图形计算。</dd>
  
  <dt>RAM</dt>
  <dd>随机存取存储器，计算机的临时存储设备。</dd>
</dl>

2. 常见问题解答（FAQ）

html 
<h2>常见问题解答</h2>
<dl>
  <dt>如何注册账号？</dt>
  <dd>点击首页右上角的"注册"按钮，填写相关信息即可。</dd>
  
  <dt>忘记密码怎么办？</dt>
  <dd>在登录页面点击"忘记密码"链接，按照提示重置密码。</dd>
</dl>

3. 产品规格

html 
<h2>产品参数</h2>
<dl>
  <dt>尺寸</dt>
  <dd>15.6英寸</dd>
  
  <dt>重量</dt>
  <dd>1.8kg</dd>
  
  <dt>电池续航</dt>
  <dd>约10小时</dd>
</dl>

与CSS的结合使用

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

1. 基础样式定制

css 
/* 自定义术语的字体和颜色 */
dt {
  font-weight: bold;
  color: #333;
  font-size: 1em;
}

2. 高级样式定制

css 
/* 自定义术语为卡片样式 */
dl.card-dl dt {
  background-color: #f5f5f5;
  padding: 12px 15px;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
}

/* 词汇表中的术语样式 */
dl.vocabulary dt {
  color: #0066cc;
  margin-top: 15px;
  border-left: 3px solid #0066cc;
  padding-left: 10px;
}

/* 水平布局中的术语样式 */
@media (min-width: 768px) {
  dl.horizontal-dl dt {
    grid-column: 1;
    text-align: right;
    font-weight: bold;
  }
}

完整示例

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;
    }
    
    dd {
      color: #666;
      margin-left: 20px;
      margin-bottom: 15px;
    }
    
    /* 词汇表样式 */
    dl.vocabulary {
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 5px;
      padding: 20px;
    }
    
    dl.vocabulary dt {
      color: #0066cc;
      margin-top: 15px;
      border-left: 3px solid #0066cc;
      padding-left: 10px;
    }
    
    /* 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;
      margin-left: 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;
    }
    
    dl.horizontal dd {
      grid-column: 2;
      margin-left: 0;
    }
  </style>
</head>
<body>
  <h1>HTML 定义术语的使用</h1>
  
  <h2>1. 基本用法</h2>
  <dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页的结构。</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表，用于定义网页的视觉样式。</dd>
  </dl>
  
  <h2>2. 词汇表样式</h2>
  <dl class="vocabulary">
    <dt>前端开发</dt>
    <dd>负责构建网站用户界面的技术，包括HTML、CSS和JavaScript。</dd>
    
    <dt>后端开发</dt>
    <dd>负责服务器端逻辑和数据库管理的技术。</dd>
    
    <dt>全栈开发</dt>
    <dd>同时掌握前后端开发技术的开发者。</dd>
  </dl>
  
  <h2>3. 常见问题解答</h2>
  <dl class="faq">
    <dt>什么是HTML5？</dt>
    <dd>HTML5是HTML的最新版本，引入了许多新特性，如语义化标签、多媒体支持等。</dd>
    
    <dt>如何学习前端开发？</dt>
    <dd>建议从HTML开始，然后学习CSS，最后学习JavaScript。可以通过在线教程、文档和实践项目来学习。</dd>
    
    <dt>前端开发需要学习哪些技术？</dt>
    <dd>主要包括HTML、CSS、JavaScript，以及一些框架和库如React、Vue、Angular等。</dd>
  </dl>
  
  <h2>4. 水平布局</h2>
  <dl class="horizontal">
    <dt>姓名</dt>
    <dd>张三</dd>
    
    <dt>年龄</dt>
    <dd>25岁</dd>
    
    <dt>职业</dt>
    <dd>前端开发者</dd>
  </dl>
  
  <h2>5. 多个术语对应一个定义</h2>
  <dl>
    <dt>JS</dt>
    <dt>JavaScript</dt>
    <dd>一种用于为网页添加交互功能的脚本语言。</dd>
  </dl>
</body>
</html>

总结

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

最后更新：2026-02-07