核心三要素

<dl>
  <dt>HTML</dt>      <!-- 术语 (Definition Term) -->
  <dd>超文本标记语言</dd> <!-- 描述 (Definition Description) -->
  
  <dt>CSS</dt>
  <dd>让HTML穿上漂亮外衣</dd>
</dl>

为什么它特别？
普通列表无法区分术语和描述，而<dl>的独特结构能：

1. 语义明确：浏览器/爬虫清楚知道哪部分是术语，哪部分是解释
2. 样式灵活：可轻松实现左右分栏、悬停提示等高级效果
3. 扩展性强：一个术语可对应多个描述，反之亦然

实战技巧

1. 多描述展示

<dl>
  <dt>程序员</dt>
  <dd>用咖啡因写代码的生物</dd>
  <dd>把需求变成bug的翻译官</dd>
</dl>

2. 分组使用

<dl>
  <div class="term-group"> <!-- 用div分组 -->
    <dt>Bug</dt>
    <dd>代码中未预期的特性</dd>
  </div>
  <div class="term-group">
    <dt>Debug</dt>
    <dd>把Bug变成更隐蔽Bug的过程</dd>
  </div>
</dl>

3. 结合CSS炫技

dt {
  font-weight: bold;
  color: #2c3e50;
}
dd {
  margin-left: 2em;
  color: #7f8c8d;
}

常见翻车现场

1. 拿<ul>硬凑定义列表效果 → 语义错误
2. 忘记<dd>必须跟在<dt>后 → 结构混乱
3. 用<br>分隔多个描述 → 应该用多个<dd>

最佳使用场景

• 产品规格表（CPU：i9-13900K）
• 电影信息（导演：克里斯托弗·诺兰）
• 词汇表（语义化：用正确的标签表达正确的内容）

记住：当需要展示"名词+解释"时，<dl>就是你的语义化武器！就像解释"为什么程序员总在深夜灵感爆发"——因为<dt>月光</dt><dd>天然debug光源</dd>啊！