HTML <dt> 标签-代码号

HTML `<dt>` 标签详解：定义列表中的术语项

概述

HTML <dt> 标签（Definition Term，定义术语）是定义列表（<dl>）中的核心元素之一，用于标识术语或名称。它必须与 <dd>（定义描述）和 <dl>（定义列表容器）配合使用，共同构成完整的语义化定义列表结构。

基本语法

<dl>
  <dt>术语内容</dt>
  <dd>术语对应的定义或描述</dd>
</dl>

核心特性

特性	说明
显示类型	块级元素（Block-level）
父元素	必须包含在 `<dl>` 元素内
内容模型	流内容（Flow content），可包含文本、短语元素等
闭合要求	必须使用闭合标签 `</dt>`

基础应用示例

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>编程术语定义 - 代码号学习编程</title>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f8f9fa;
    }
    h1 {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 30px;
      border-bottom: 2px solid #3498db;
      padding-bottom: 15px;
    }
    dl {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    dt {
      font-weight: bold;
      color: #2c3e50;
      font-size: 1.1em;
      margin-top: 20px;
      padding-bottom: 5px;
      border-bottom: 2px solid #e74c3c;
    }
    dd {
      margin-left: 20px;
      color: #555;
      padding: 10px 0;
      line-height: 1.8;
    }
  </style>
</head>
<body>
  <h1>编程基础术语解析</h1>
  
  <dl>
    <dt>变量（Variable）</dt>
    <dd>程序中用于存储数据的命名容器，其值可以在程序执行过程中改变。</dd>
    
    <dt>函数（Function）</dt>
    <dd>完成特定任务的一组语句，可以接受输入参数并返回结果。</dd>
    
    <dt>算法（Algorithm）</dt>
    <dd>解决特定问题或执行特定任务的一系列明确步骤。</dd>
    
    <dt>面向对象编程（OOP）</dt>
    <dd>一种编程范式，使用对象和类的概念来组织代码，包含封装、继承和多态等特性。</dd>
  </dl>
  
  <p>更多编程知识请访问：<a href="https://www.ebingou.cn/biancheng/">代码号编程教程</a></p>
</body>
</html>

CSS样式定制指南

文本样式属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dt标签样式定制 - 代码号CSS教程</title>
  <style>
    .custom-dt {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 18px;
      font-weight: 600;
      font-style: italic;
      color: #2980b9;
      text-transform: uppercase;
      text-decoration: underline;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    .custom-dl {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 30px;
      border-radius: 15px;
      margin: 20px 0;
    }
    
    .custom-dd {
      background: rgba(255, 255, 255, 0.1);
      padding: 15px;
      border-radius: 8px;
      margin: 10px 0 20px 20px;
      backdrop-filter: blur(10px);
    }
  </style>
</head>
<body>
  <h1>CSS样式属性应用示例</h1>
  
  <dl class="custom-dl">
    <dt class="custom-dt">响应式设计</dt>
    <dd class="custom-dd">使网站能够适应不同屏幕尺寸和设备的设计方法，确保在所有设备上都能提供良好的用户体验。</dd>
    
    <dt class="custom-dt">弹性布局</dt>
    <dd class="custom-dd">使用Flexbox或Grid等CSS布局技术创建灵活、自适应的页面布局结构。</dd>
  </dl>
</body>
</html>

布局与间距控制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>dt布局样式 - 代码号前端开发</title>
  <style>
    .layout-example {
      max-width: 900px;
      margin: 0 auto;
    }
    
    .spacing-dt {
      text-indent: 20px;
      letter-spacing: 1px;
      word-spacing: 3px;
      line-height: 1.8;
      white-space: normal;
      word-break: break-word;
      text-align: justify;
      margin: 25px 0 10px 0;
      padding: 15px;
      background-color: #2c3e50;
      color: white;
      border-radius: 5px;
    }
    
    .spacing-dd {
      text-indent: 30px;
      line-height: 1.7;
      margin: 0 0 30px 40px;
      padding: 20px;
      background-color: #ecf0f1;
      border-left: 4px solid #3498db;
      border-radius: 0 8px 8px 0;
    }
  </style>
</head>
<body>
  <div class="layout-example">
    <h1>文本布局属性详解</h1>
    
    <dl>
      <dt class="spacing-dt">文本缩进（text-indent）</dt>
      <dd class="spacing-dd">控制段落首行缩进的距离，可以使用像素(px)、em单位或百分比等单位值。</dd>
      
      <dt class="spacing-dt">字间距（letter-spacing）</dt>
      <dd class="spacing-dd">调整字符之间的间距，正值增加间距，负值减少间距，常用于标题美化或特殊排版效果。</dd>
      
      <dt class="spacing-dt">行高（line-height）</dt>
      <dd class="spacing-dd">设置行与行之间的垂直间距，影响文本的可读性和整体美观度，推荐使用无单位数值如1.5-1.8。</dd>
    </dl>
  </div>
</body>
</html>

实际应用场景

技术文档术语表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Web开发术语表 - 代码号技术文档</title>
  <style>
    .tech-glossary {
      background-color: #f5f7fa;
      padding: 30px;
      border-radius: 10px;
      margin: 20px 0;
    }
    
    .tech-term {
      background-color: #3498db;
      color: white;
      padding: 12px 20px;
      border-radius: 25px;
      display: inline-block;
      margin: 15px 0 10px 0;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
    .tech-definition {
      background: white;
      padding: 20px;
      border-radius: 8px;
      margin: 0 0 25px 30px;
      border-left: 4px solid #3498db;
      position: relative;
    }
    
    .tech-definition:before {
      content: "⚙️";
      position: absolute;
      left: -35px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>Web开发核心术语解析</h1>
  
  <dl class="tech-glossary">
    <dt class="tech-term">DOM（文档对象模型）</dt>
    <dd class="tech-definition">表示和操作HTML或XML文档的编程接口，将文档解析为节点和对象的树状结构，使程序能够动态访问和更新文档内容、结构和样式。</dd>
    
    <dt class="tech-term">API（应用程序编程接口）</dt>
    <dd class="tech-definition">一组预定义的规则和协议，允许不同的软件应用程序之间相互通信和交互，无需了解对方的内部实现细节。</dd>
    
    <dt class="tech-term">RESTful架构</dt>
    <dd class="tech-definition">一种基于REST原则设计的网络应用程序架构风格，使用标准的HTTP方法（GET、POST、PUT、DELETE等）进行操作，强调无状态性和资源导向设计。</dd>
  </dl>
  
  <p>文档之后更新：2025年 | 联系我们：<a href="mailto:alan@ebingou.cn">alan@ebingou.cn</a></p>
</body>
</html>

课程大纲展示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>前端课程大纲 - 代码号学习路径</title>
  <style>
    .course-outline {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 40px;
      border-radius: 15px;
      margin: 30px 0;
    }
    
    .module-title {
      background-color: rgba(255, 255, 255, 0.2);
      padding: 15px 25px;
      border-radius: 30px;
      margin: 25px 0 15px 0;
      font-size: 1.3em;
      font-weight: bold;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .module-content {
      background: rgba(255, 255, 255, 0.1);
      padding: 20px;
      border-radius: 10px;
      margin: 0 0 20px 40px;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .module-content ul {
      list-style-type: none;
      padding: 0;
    }
    
    .module-content li {
      padding: 8px 0;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    }
    
    .module-content li:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
  <h1>前端开发学习路径</h1>
  
  <dl class="course-outline">
    <dt class="module-title">HTML5基础模块</dt>
    <dd class="module-content">
      <ul>
        <li>语义化标签与文档结构</li>
        <li>表单元素与输入类型</li>
        <li>多媒体元素嵌入</li>
        <li>Canvas绘图基础</li>
      </ul>
    </dd>
    
    <dt class="module-title">CSS3样式模块</dt>
    <dd class="module-content">
      <ul>
        <li>选择器与盒模型</li>
        <li>Flexbox与Grid布局</li>
        <li>动画与过渡效果</li>
        <li>响应式设计原则</li>
      </ul>
    </dd>
    
    <dt class="module-title">JavaScript核心模块</dt>
    <dd class="module-content">
      <ul>
        <li>语法基础与数据类型</li>
        <li>DOM操作与事件处理</li>
        <li>异步编程与Promise</li>
        <li>ES6+新特性应用</li>
      </ul>
    </dd>
  </dl>
  
  <p>完整课程内容请访问：<a href="https://www.ebingou.cn/jiaocheng/">代码号教程中心</a></p>
</body>
</html>