<dt>-描述术语

<dt> 标签的基本定义

<dt> 是 HTML 中用于定义“描述术语”的标签，通常作为 <dl>（描述列表）的直接子元素出现。它必须与 <dd>（描述详情）配对使用，形成术语-解释的结构。这个标签不会默认添加任何特殊样式，但可以通过 CSS 完全控制其外观。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构</dd>
</dl>

<dt> 的语义化作用

作为语义化标签，<dt> 明确告知浏览器和辅助技术当前内容属于“术语定义”范畴。屏幕阅读器会识别这种结构，用户能清晰区分术语和解释。对比普通列表：

<!-- 非语义化写法 -->
<div>
  <strong>CSS</strong> - 层叠样式表，用于控制页面表现
</div>

<!-- 语义化写法 -->
<dl>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制页面表现</dd>
</dl>

与 <dd> 的配合规则

一个 <dt> 可以对应多个 <dd>，实现单个术语的多重解释。反向亦可，多个术语共享同一解释：

<dl>
  <!-- 单术语多解释 -->
  <dt>JavaScript</dt>
  <dd>一种脚本编程语言</dd>
  <dd>遵循ECMAScript规范实现</dd>

  <!-- 多术语单解释 -->
  <dt>HTML</dt>
  <dt>XHTML</dt>
  <dd>标记语言的不同版本</dd>
</dl>

实际应用场景示例

词汇表实现

最适合创建技术文档的术语表，每个词条独立成组：

<dl class="glossary">
  <dt>DOM</dt>
  <dd>文档对象模型，表示网页的树状结构</dd>
  
  <dt>API</dt>
  <dd>应用程序编程接口，实现软件间交互</dd>
</dl>

元数据展示

适合展示键值对形式的数据，如产品参数：

<dl class="product-specs">
  <dt>处理器</dt>
  <dd>Intel Core i7-1185G7</dd>
  
  <dt>内存</dt>
  <dd>16GB DDR4 3200MHz</dd>
</dl>

CSS 样式控制技巧

通过 flex 布局可创建横向排列的描述列表：

<style>
  dl.horizontal {
    display: flex;
    flex-wrap: wrap;
  }
  dl.horizontal dt {
    flex-basis: 20%;
    font-weight: bold;
  }
  dl.horizontal dd {
    flex-basis: 80%;
    margin-left: 0;
  }
</style>

<dl class="horizontal">
  <dt>分辨率</dt>
  <dd>3840×2160 像素</dd>
</dl>

交互增强示例

结合 JavaScript 实现可折叠的描述列表：

<script>
  document.querySelectorAll('dt').forEach(dt => {
    dt.addEventListener('click', () => {
      dt.nextElementSibling.classList.toggle('hidden');
    });
  });
</script>

<style>
  .hidden { display: none; }
  dt { cursor: pointer; }
</style>

<dl>
  <dt>点击查看解释</dt>
  <dd class="hidden">这个内容可以折叠显示</dd>
</dl>

无障碍访问要点

为提升可访问性，建议为术语添加 aria-label：

<dl>
  <dt aria-label="术语：AJAX">AJAX</dt>
  <dd>异步JavaScript和XML技术</dd>
</dl>

与其他列表的对比

与 <ul> 的差异

• 无序列表表示并列关系
• 描述列表体现解释关系

<!-- 并列关系 -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<!-- 解释关系 -->
<dl>
  <dt>HTML</dt>
  <dd>定义文档结构</dd>
</dl>

浏览器兼容性现状

所有现代浏览器均完整支持 <dt>，包括：

• Chrome 1+
• Firefox 1+
• Safari 3+
• Edge 12+
• Opera 7+

在 IE6-7 中需要显式设置 display: block 才能正确渲染：

/* IE6-7 兼容方案 */
dt, dd {
  display: block;
}

高级用法：嵌套结构

描述列表支持多层嵌套，适合复杂术语解释：

<dl>
  <dt>前端框架</dt>
  <dd>
    <dl>
      <dt>React</dt>
      <dd>Facebook开发的UI库</dd>
      
      <dt>Vue</dt>
      <dd>渐进式JavaScript框架</dd>
    </dl>
  </dd>
</dl>

微格式应用

结合 microdata 增强语义：

<dl itemscope itemtype="http://schema.org/Book">
  <dt itemprop="name">HTML5权威指南</dt>
  <dd itemprop="author">Adam Freeman</dd>
  <dd itemprop="datePublished">2014-01-01</dd>
</dl>

响应式设计适配

针对移动设备调整布局：

@media (max-width: 600px) {
  dl.responsive dt {
    float: left;
    clear: left;
    width: 100px;
  }
  dl.responsive dd {
    margin-left: 120px;
  }
}