HTML 描述列表

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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



Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70745{{"`HTML 描述列表`"}} html/head_elems -.-> lab-70745{{"`HTML 描述列表`"}} html/lists_desc -.-> lab-70745{{"`HTML 描述列表`"}} html/layout -.-> lab-70745{{"`HTML 描述列表`"}} html/doc_flow -.-> lab-70745{{"`HTML 描述列表`"}} end

设置 HTML 文件

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

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

使用 <dl> 标签创建描述列表

在你的 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 教程