如何使用 HTML5 在定義列表中定義術語或名稱?


在本文中,我們將討論如何使用 HTML5 在定義列表中定義術語或名稱。我們將探討用於建立定義列表的各種標籤和屬性,以及建立有效且可訪問的定義的最佳實踐。在本文結束時,您將全面瞭解如何使用 HTML5 建立定義列表,以及如何在其中有效地定義術語和名稱。

方法

我們有兩種不同的方法可以在 HTML5 中使用定義列表來定義術語或名稱,包括以下內容 -

  • 使用“<dl>、<dt>、<dfn> 和 <dd> 元素”

  • 使用“巢狀 <ul> 和 <li> 元素”

讓我們詳細瞭解每個步驟。

方法 1:使用“<dl>、<dt>、<dfn> 和 <dd> 方法”

第一種方法是使用 HTML5 將術語或名稱定義為定義列表,方法是使用“<dl>、<dt>、<dfn> 和 <dd> 元素”。這是建立定義列表最常見的方法。<dl> 元素用於定義列表,<dt> 元素用於定義要定義的術語,<dfn> 元素用於指示使用 <dt> 元素在定義列表中定義的術語或短語。而 <dd> 元素用於定義術語的定義。

示例

以下是使用 HTML5 使用“<dl>、<dt>、<dfn> 和 <dd> 元素”在定義列表中定義術語或名稱的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Definition List with <dfn> Element</title>
   <style>
      body {
         font-family: Arial, sans-serif;
         border: 2px solid ;
         border-radius: 7px;
      }
      dt {
         font-weight: bold;
         background-color: #f2f2f2;
         color: blue;
      }
      dd {
         padding: 20px;
         color: green;
      }
      dfn {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <dl>
      <dt>HTML</dt>
      <dd><dfn>HTML</dfn> stands for Hyper-Text Markup Language, which is used to structure content on the web.</dd>
      <dt>CSS</dt>
      <dd><dfn>CSS</dfn> stands for Cascading Style Sheets, which is used to style and layout web pages.</dd>
      <dt>JavaScript</dt>
      <dd><dfn>JavaScript</dfn> is a programming language that allows for dynamic and interactive behavior on web pages.</dd>
   </dl>
</body>
</html> 

方法:使用“巢狀 <ul> 和 <li> 方法”

第一種方法是使用 HTML5 將術語或名稱定義為定義列表,方法是使用“巢狀 <ul> 和 <li>”。這是建立定義列表的另一種方法。外部 <ul> 元素表示整個列表,每個術語由一個 <li> 元素表示。在每個 <li> 元素內部,還有一個 <ul> 元素,其中包含一個或多個 <li> 元素,表示該術語的定義。

示例

以下是使用 HTML5 使用“巢狀 <ul> 和 <li>”在定義列表中定義術語或名稱的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      dt {
         font-weight: bold;
         color: blue;
      }
      dd {
         margin: 10px 0;
         color: green;
      }
      dd li::before {
         content: "- ";
         font-weight: bold;
         color: orange;
      }
   </style>
</head>
<body>
   <dl>
      <dt>HTML</dt>
      <dd>Hyper-Text Markup Language, which is used to structure content on the web.
         <ul>
            <li>HTML5 is the latest version of HTML.</li>
         </ul>
      </dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets, which is used to style and layout web pages.
         <ul>
            <li>CSS3 is the latest version of CSS.</li>
         </ul>
      </dd>
   </dl>
</body>
</html>

結論

在本文中,我們研究了使用 HTML5 在定義列表中定義術語或名稱的兩種不同方法。在這裡,我們使用了兩種不同的方法“<dl>、<dt>、<dfn> 和 <dd> 元素”以及“巢狀 <ul> 和 <li> 元素”。根據網頁的內容和上下文選擇合適的方法非常重要。

更新於:2023 年 3 月 27 日

207 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告