<dt>-描述术语

<dt> 标签是 HTML 中用于定义“描述列表”（<dl>）中的术语或名称的标签。它通常与 <dd> 标签配合使用，前者表示术语，后者表示描述。这种结构适合展示词汇表、元数据或键值对内容。

<dt> 标签的基本用法

<dt> 必须嵌套在 <dl> 标签内，且不能单独存在。一个 <dl> 可以包含多个 <dt> 和 <dd>，形成一对多或多对一的关系。例如：

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

与 <dd> 的关联规则

<dt> 和 <dd> 的配对是灵活的：

• 一个 <dt> 可以对应多个 <dd>（一个术语有多个描述）：

  <dl>
    <dt>浏览器</dt>
    <dd>Chrome</dd>
    <dd>Firefox</dd>
  </dl>
  

• 多个 <dt> 也可以对应一个 <dd>（多个术语共享一个描述）：

  <dl>
    <dt>HTML</dt>
    <dt>CSS</dt>
    <dd>前端开发的基础技术</dd>
  </dl>
  

实际应用场景

1. 词汇表

<dl>
  <dt>语义化</dt>
  <dd>使用恰当的HTML标签表达内容含义，而非仅依赖样式。</dd>
  <dt>响应式设计</dt>
  <dd>使网页能自动适应不同设备屏幕尺寸的设计方法。</dd>
</dl>

2. 元数据展示

<dl class="metadata">
  <dt>作者</dt>
  <dd>张三</dd>
  <dt>发布日期</dt>
  <dd>2023-10-15</dd>
  <dt>标签</dt>
  <dd>HTML</dd>
  <dd>前端</dd>
</dl>

3. 常见问题解答

<dl>
  <dt>如何重置密码？</dt>
  <dd>访问登录页点击“忘记密码”链接。</dd>
  <dt>支持哪些支付方式？</dt>
  <dd>支付宝、微信支付和银联。</dd>
</dl>

样式控制技巧

通过CSS可以增强 <dt> 的视觉效果：

/* 基础样式 */
dt {
  font-weight: bold;
  margin-top: 1em;
}

/* 横向排列 */
dl.horizontal {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1em;
}

/* 添加装饰线 */
dt::after {
  content: ":";
  margin-right: 0.5em;
}

无障碍访问注意事项

1. 不要滥用：仅当内容确实是术语-描述关系时才使用，普通列表应使用 <ul> 或 <ol>。
2. 关联性：确保屏幕阅读器能正确识别关联，避免复杂的嵌套结构。
3. ARIA属性：通常不需要额外ARIA，因为 <dl> 本身已有语义。

与其他标签的对比

高级用法示例

嵌套描述列表

<dl>
  <dt>前端技术</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>结构层</dd>
      <dt>CSS</dt>
      <dd>表现层</dd>
    </dl>
  </dd>
</dl>

结合 <div> 的分组（HTML5允许）

<dl>
  <div class="term-group">
    <dt>JavaScript</dt>
    <dd>动态脚本语言</dd>
    <dd>ES6标准</dd>
  </div>
  <div class="term-group">
    <dt>TypeScript</dt>
    <dd>JavaScript的超集</dd>
  </div>
</dl>

浏览器兼容性与历史

<dt> 标签自HTML 2.0起就存在，所有现代浏览器完全支持。在HTML5中：

• 允许 <div> 包裹 <dt>+<dd> 的组合
• 不再限制必须严格配对使用
• 可以包含流内容（如段落、图片等）