HTML Academy · 课时

描述列表：dl、dt 与 dd

Q: 「描述列表：dl、dt 与 dd」这节课中我会学到什么？

使用描述列表标记术语与定义的配对。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用描述列表标记术语与定义的配对。

描述列表：dl、dt 与 dd 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是描述列表

描述列表将术语与其描述分组：

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of the web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of the web.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

描述列表的 dl、dt 和 dd 元素

描述列表由三个 elements 组成：

<dl>——描述列表容器
<dt>——描述术语（键）
<dd>——描述详情（值）

每个术语对应多个描述

一个术语可以有多个描述：

<dl>
  <dt>HTML</dt>
  <dd>Stands for HyperText Markup Language.</dd>
  <dd>First published as HTML 2.0 in 1995.</dd>
  <dd>Current version: HTML5 (Living Standard).</dd>
</dl>

多个术语对应一个描述

多个术语可以共享一个描述（同义词、别名）：

<dl>
  <dt>Username</dt>
  <dt>Login</dt>
  <dt>Handle</dt>
  <dd>The unique identifier used to log in to your account.</dd>
</dl>

实际使用场景

描述列表非常适合用于：

词汇表和定义
FAQ 部分（问题 → 答案）
产品元数据（作者：Jane，发布日期：2024）
食谱详情（准备时间：10 分钟，份数：4）
API 参数文档

使用描述列表构建 FAQ

使用描述列表构建 FAQ：

<dl class="faq">
  <dt>Is HTML a programming language?</dt>
  <dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>

  <dt>Do I need to close void elements?</dt>
  <dd>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not need a closing slash.</dd>
</dl>

使用描述列表显示元数据

显示文章或产品元数据：

<article>
  <h1>Responsive Images Guide</h1>

  <dl class="metadata">
    <dt>Author</dt>
    <dd>Jane Smith</dd>

    <dt>Published</dt>
    <dd><time datetime="2024-03-15">March 15, 2024</time></dd>

    <dt>Reading time</dt>
    <dd>8 minutes</dd>
  </dl>
</article>

设置描述列表的样式

使用 CSS 设置描述列表的样式：

/* Two-column layout */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

dt {
  font-weight: bold;
  color: #555;
}

dd {
  margin: 0;  /* Remove browser default dd margin */
}

嵌套描述列表

描述列表可以嵌套，以表示层级定义：

<dl>
  <dt>HTML Elements</dt>
  <dd>
    <dl>
      <dt>Block elements</dt>
      <dd>Take full width: div, p, h1-h6</dd>
      <dt>Inline elements</dt>
      <dd>Flow with text: span, a, strong</dd>
    </dl>
  </dd>
</dl>

键值数据：描述列表与表格的比较

对于键值数据，何时使用 <dl>，何时使用 <table>：

描述列表——术语与描述之间的关联（名称-值对）
表格——由行和列组成的表格数据（每个项目包含多个属性）

<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

描述列表中的分区容器

在 <dl> inside 使用 <div> 包裹 dt/dd 组是有效的 HTML5：

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Markup language for web pages.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Styling language for web pages.</dd>
  </div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->

快速检查

描述列表中哪个元素包含定义或值？

回顾：描述列表

描述列表要点：

<dl>——描述列表容器
<dt>——术语（键、问题、名称）
<dd>——描述（值、答案、定义）
一个 dt 可以有多个 dd；多个 dt 可以共享一个 dd
非常适合词汇表、FAQ 和元数据
将各组包裹在 <div> 中，以获得灵活的样式控制

常见问题解答

「描述列表：dl、dt 与 dd」课时是免费的吗？

是的 — 「描述列表：dl、dt 与 dd」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「描述列表：dl、dt 与 dd」这节课中我会学到什么？

使用描述列表标记术语与定义的配对。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「描述列表：dl、dt 与 dd」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy