<dl>-描述列表

<dl> 是 HTML 中用于创建描述列表的标签，它通过术语（<dt>）和描述（<dd>）的配对结构，清晰地展示键值对形式的内容。这种列表形式非常适合展示词汇表、元数据或任何需要名称与详细说明关联的场景。

<dl> 的基本结构

一个标准的 <dl> 包含一个或多个 <dt>（定义术语）和 <dd>（定义描述）的组合。<dt> 表示术语名称，<dd> 提供对应的解释或内容。例如：

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

渲染效果如下：

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

复杂嵌套与多描述

<dl> 支持一个术语对应多个描述，或嵌套其他 HTML 元素。例如：

<dl>
  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于实现网页交互。</dd>
  <dd>支持事件驱动、函数式编程范式。</dd>
  <dt>浏览器兼容性</dt>
  <dd>
    <ul>
      <li>Chrome: 支持</li>
      <li>Firefox: 支持</li>
    </ul>
  </dd>
</dl>

效果：

<dl> <dt>JavaScript</dt> <dd>一种脚本语言，用于实现网页交互。</dd> <dd>支持事件驱动、函数式编程范式。</dd> <dt>浏览器兼容性</dt> <dd> <ul> <li>Chrome: 支持</li> <li>Firefox: 支持</li> </ul> </dd> </dl>

实际应用场景

元数据展示

<dl> 适合展示文档的元信息，比如作者、发布时间等：

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

常见问题解答（FAQ）

通过 <dl> 可以结构化地呈现问答内容：

<dl class="faq">
  <dt>如何重置密码？</dt>
  <dd>访问“账户设置”页面，点击“重置密码”链接。</dd>
  <dt>支持哪些支付方式？</dt>
  <dd>信用卡、支付宝、微信支付。</dd>
</dl>

样式自定义

默认情况下，<dd> 会有左外边距（margin-left），但可以通过 CSS 调整布局。例如实现水平排列：

<style>
  dl.horizontal {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 1em;
  }
  dl.horizontal dt {
    grid-column: 1;
    font-weight: bold;
  }
  dl.horizontal dd {
    grid-column: 2;
    margin: 0;
  }
</style>

<dl class="horizontal">
  <dt>名称</dt>
  <dd>示例项目</dd>
  <dt>版本</dt>
  <dd>1.0.0</dd>
</dl>

效果：

<style> dl.horizontal { display: grid; grid-template-columns: max-content 1fr; gap: 0 1em; } dl.horizontal dt { grid-column: 1; font-weight: bold; } dl.horizontal dd { grid-column: 2; margin: 0; } </style>

<dl class="horizontal"> <dt>名称</dt> <dd>示例项目</dd> <dt>版本</dt> <dd>1.0.0</dd> </dl>

与其他列表的对比

• <ul>/<ol>：适合项目序列，无明确的术语-描述关系。
• <table>：适合二维数据，但语义上不如 <dl> 直观。
• <dl>：专为术语解释设计，语义明确。

无障碍访问建议

为提升可访问性，可通过 aria-label 或 role 属性增强描述列表的语义：

<dl role="list" aria-label="技术术语表">
  <dt role="term">AJAX</dt>
  <dd role="definition">异步 JavaScript 和 XML，用于无刷新数据交互。</dd>
</dl>