掌握 HTML 描述列表

介绍

在 HTML 中，有一个特殊的标签叫做 <dl>，它用于定义描述列表（description list）。这种列表通常用于解释术语及其定义，或者对产品或服务进行简要说明。在本实验中，你将学习如何使用 <dl> 标签在 HTML 中创建你自己的描述列表。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

设置 HTML 文件

创建一个名为 index.html 的新 HTML 文件。包含基本的 HTML 结构并为你的页面添加一个标题。

<!doctype html>
<html>
  <head>
    <title>My Description List</title>
  </head>
  <body></body>
</html>

使用
标签创建描述列表

在你的 HTML 文件的 <body> 中，使用 <dl> 标签创建一个描述列表。<dl> 标签必须与 <dt> 标签（表示被定义的术语）和 <dd> 标签（表示术语的定义）配对使用。

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

为描述列表添加样式

为了让描述列表看起来更美观，可以为它添加一些 CSS 样式。在这个示例中，我们将通过将边距（margin）和内边距（padding）设置为零来移除它们，然后为 <dt> 标签添加一些内边距，使其更加突出。

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

为描述列表添加内容

现在你已经设置了一个基本的描述列表，可以开始为其添加你自己的内容。只需为每个术语和定义在列表中添加新的 <dt> 和 <dd> 对即可。

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, the standard markup language used to create web
    pages
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, a language used for describing the presentation of a
    document written in HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>A programming language used primarily for developing web applications</dd>
</dl>

保存你的 index.html 文件，然后在浏览器中打开它以查看新的描述列表。

总结

在本实验中，你学习了如何在 HTML 中使用 <dl> 标签创建一个包含术语和定义的描述列表。通过使用 <dt> 和 <dd> 标签，你能够定义术语并为每个术语提供解释。你还学习了如何为描述列表添加一些简单的 CSS 样式，使其在网页上看起来更美观。

HTML 描述列表

介绍

设置 HTML 文件

使用 标签创建描述列表

为描述列表添加样式

为描述列表添加内容

总结

使用
标签创建描述列表