HTML 描述列表

学习目标

理解 HTML 描述列表的语义用途与核心标签（<dl>、<dt>、<dd>）
能够创建基本和嵌套的描述列表以表达术语与定义的关系
掌握描述列表在实际开发中的典型应用场景（如术语表、FAQ、产品规格等）
区分描述列表与普通无序 / 有序列表的使用场景

什么是描述列表

HTML 描述列表用于展示术语与其对应解释的成对内容，适用于需要清晰表达“名称 - 值”或“关键词 - 说明”关系的场景。虽然不如无序列表或有序列表常用，但在语义化结构中具有不可替代的作用。

核心标签

标签	全称	作用
`<dl>`	Description List	定义整个描述列表的容器
`<dt>`	Description Term	定义术语、关键词或名称
`<dd>`	Description Details	提供该术语的详细说明或定义

注意：<dt> 和 <dd> 必须作为 <dl> 的直接子元素使用，且一个 <dt> 可对应多个 <dd>，反之亦然。

基本语法

<dl>
  <dt>术语一</dt>
  <dd>该术语的详细解释。</dd>
  
  <dt>术语二</dt>
  <dd>另一个术语的说明内容。</dd>
</dl>

示例：前端技术术语表

<h2>Web 开发基础术语</h2>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构。</dd>

  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页外观与布局。</dd>

  <dt>JavaScript</dt>
  <dd>一种脚本语言，用于实现网页交互功能。</dd>
</dl>

嵌套描述列表

描述列表支持嵌套，即在一个 <dd> 内部再定义一个新的 <dl>，用于表达更复杂的层级关系，例如分类下的子项说明。

示例：技术领域分类

<h3>技术概览</h3>
<dl>
  <dt>硬件</dt>
  <dd>物理计算设备</dd>
  <dd>
    <dl>
      <dt>CPU</dt>
      <dd>中央处理器，负责执行指令</dd>
      <dt>GPU</dt>
      <dd>图形处理器，专用于图像与并行计算</dd>
    </dl>
  </dd>

  <dt>软件</dt>
  <dd>运行在硬件上的程序</dd>
  <dd>
    <dl>
      <dt>系统软件</dt>
      <dd>如操作系统（Windows、Linux）</dd>
      <dt>应用软件</dt>
      <dd>如浏览器、办公工具等</dd>
    </dl>
  </dd>
</dl>

重点总结

描述列表由 <dl>、<dt>、<dd> 三部分构成，专用于“术语 - 解释”类内容
一个 <dt> 可对应多个 <dd>，一个 <dd> 也可对应多个 <dt>（较少见）
支持嵌套，可用于构建多级分类说明体系
广泛应用于术语表、FAQ、产品参数、联系信息等场景
相比用 <p> 或 <div> 手动排版，使用 <dl> 更具语义正确性和可维护性

思考题

在制作一个手机产品详情页时，哪些信息适合用描述列表呈现？请列举三项。
能否用无序列表 <ul> 模拟描述列表的效果？这样做会带来什么问题？
如何通过 CSS 控制 <dt> 和 <dd> 的显示方式（例如让术语加粗、定义缩进）？

源本科技 | 码上会

学习目标

什么是描述列表

基本语法

嵌套描述列表

重点总结

思考题