HTML - 定义列表

原创

admin 4个月前 (08-07) 阅读数 21 #HTML

HTML - 定义列表

描述列表由<dl>标签定义，配合<dt>和<dd>标签使用。其中<dt>标签定义定义术语，<dd>标签定义相应的定义。

HTML定义列表

HTML定义列表定义具有术语及其相应定义结构的列表项。这类列表用于定义一种列表结构，其中每个列表项（数据术语）包含其相应的解释（定义描述）。

定义列表标签

以下是用于定义定义列表的HTML标签：

<dl>：此标签定义定义列表。
<dt>：此标签描述定义术语。
<dd>：此标签为给定的定义术语定义相应的描述。

创建定义列表

要创建定义列表，需要使用<dl>标签，配合<dt>和<dd>标签。

其中：

<dl>用作定义列表的容器标签。
<dt>用于定义要定义的术语。
<dd>用于放置相应术语的定义。

语法

以下是创建HTML定义列表的语法（结构）：

<dl>
  <dt>术语1</dt>
  <dd>术语1的定义</dd>
  <dt>术语2</dt>
  <dd>术语2的定义</dd>
  <dt>术语3</dt>
  <dd>术语3的定义</dd>
</dl>

定义列表示例

在下面的示例中，我们创建了一个包含四个术语及其相应描述的定义列表：

<!DOCTYPE html>
<html>
<body>
   <h2>不同类型的语言</h2>
   <dl>
   <dt>英语：</dt>
   <dd>
      英语是世界第一语言。我们可以在
      政治、媒体、娱乐、艺术等所有领域
      使用英语进行交流。
   </dd>

   <dt>印地语：</dt>
   <dd>
      印地语是一种主要在印度使用的印欧语系语言。
      在印度，大多数人的第一语言是印地语。
   </dd>

   <dt>马拉地语：</dt>
   <dd>
      马拉地语是印度马哈拉施特拉邦马拉地人使用的
      印欧语系语言。它是马哈拉施特拉邦人民的
      官方语言。
   </dd>

   <dt>法语：</dt>
   <dd>
      法语是加拿大、中非、布基纳法索、
      布隆迪等国的官方语言。
   </dd>
   </dl>
</body>
</html>

样式化定义列表

您还可以使用CSS属性自定义定义列表的默认外观。您可以在所有三个定义列表标签上应用CSS样式，根据您的需求进行样式设计，以匹配网站主题。

示例

在下面的示例中，我们应用CSS属性来自定义定义列表的外观：

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 20px;
      }
      dl {
         background-color: #f9f9f9;
         border: 1px solid #ddd;
         padding: 20px;
         border-radius: 5px;
         max-width: 400px;
         margin: 0 auto;
      }
      dt {
         font-weight: bold;
         color: #333;
         margin-top: 10px;
      }
      dd {
         margin: 0 0 10px 20px;
         color: #555;
      }
   </style>
</head>

<body>

<dl>
<dt>教程点</dt>
   <dd>
      教程点提供各种前沿技术的视频课程库，
      旨在帮助个人掌握这些技术并成为
      认证专业人士。
   </dd>

<dt>导师克斯</dt>
   <dd>
      导师克斯是教程点的子公司，
      涵盖基于NCERT的数学和科学课程。
      也为IIT/JEE和NEET考生提供了良好的基础。
   </dd>
</dl>

</body>
</html>

定义列表的默认CSS

几乎所有浏览器都有显示<dl>元素的默认CSS设置。

示例

以下代码包含定义列表的默认CSS属性。如果删除它们，输出不会有任何变化：

<!DOCTYPE html>
<html>
<head>
   <!-- 这是定义列表的默认样式 -->
   <style>
      dl {
         display: block;
         margin-top: 1em;
         margin-bottom: 1em;
         margin-left: 0;
         margin-right: 0;
      }
   </style>
</head>

<body>
   <dl>
      <dt>定义列表</dt>
      <dd>
         术语及其定义的列表。
      </dd>

      <dt>安卓</dt>
      <dd>安卓教程。</dd>

      <dt>Ruby</dt>
      <dd>Ruby教程。</dd>
   </dl>
   <p>
      我们为描述列表添加了默认样式
   </p>
</body>

</html>

嵌套定义列表

嵌套定义列表允许您在主定义术语内添加详细的子定义。

示例

以下示例演示了HTML中的嵌套定义列表：

<!DOCTYPE html>
<html lang="zh">
<head>
  <title>嵌套定义列表示例</title>
</head>
<body>
  <h2>嵌套定义列表示例</h2>
  <dl>
    <dt>编程语言</dt>
    <dd>
      <dl>
        <dt>Python</dt>
        <dd>一种高级的、解释型编程语言。</dd>
        <dt>JavaScript</dt>
        <dd>用于Web开发的编程语言。</dd>
      </dl>
    </dd>
    <dt>Web技术</dt>
    <dd>
      <dl>
        <dt>HTML</dt>
        <dd>用于创建网页的标准标记语言。</dd>
        <dt>CSS</dt>
        <dd>用于网页样式设计。</dd>
      </dl>
    </dd>
  </dl>
</body>
</html>