HTML - 定義列表

上一頁
下一頁

定義列表

HTML 定義列表定義具有術語和對應定義結構的列表項。這些型別的列表用於定義一個列表結構，其中每個列表項（資料術語）包含其對應的解釋（定義描述）。

Definition Lists

<dl> 標籤幾乎所有瀏覽器都支援。它也支援全域性屬性和事件屬性。它由類似 <dl></dl> 的開始和結束標籤組成。

定義列表標籤

以下是用於定義定義列表的 HTML 標籤

建立定義列表

要建立定義列表，您需要使用 <dl> 標籤以及 <dt> 和 <dd> 標籤。

定義列表的結構

以下是使用 HTML 建立定義列表的語法（結構）

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

示例

在以下示例中，我們正在建立一個包含四個術語及其對應描述的定義列表

<!DOCTYPE html>
<html>
<body>
   <h2>Different Types Of Languages</h2>
   <dl>
   <dt>English:</dt>
   <dd>
      English is the first world language. We can 
      use English language for communication in all 
      areas like politics, media, entertainment, 
      art etc.
   </dd>

   <dt>Hindi:</dt>
   <dd>
      Hindi is an Indo-Aryan language spoken mostly 
      in India. In India Hindi is spoken as a first 
      language by most of the people.
   </dd>

   <dt>Marathi:</dt>
   <dd>
      Marathi is an Indo-Aryan language spoken by 
      Marathi people of Maharashtra in India. It 
      is a official Language of Maharashtrian 
      people
   </dd>

   <dt>French:</dt>
   <dd>
      French is the official language in Canada, 
      Central, African, Burkina, Faso, Burundi etc.
   </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>Tutorialspoint</dt>
   <dd>
      Tutorialspoint provides access to a library 
      of video courses on various prominent 
      technologies, aimed at helping individuals 
      master those technologies and become 
      certified professionals.
   </dd>

<dt>Tutorix</dt>
   <dd>
      Tutorix is child company of tutorialspoint 
      that covers NCERT-based syllabus for maths 
      and science. Also give a great foundation 
      for IIT/JEE and NEET aspirants.
   </dd>
</dl>

</body>
</html>

定義列表的預設 CSS

幾乎所有瀏覽器都具有顯示  <dl> 元素的預設 CSS 設定。

示例

以下程式碼包含定義列表的預設 CSS 屬性。如果您刪除它們，輸出中不會有任何變化

<!DOCTYPE html>
<html>
<head>
   <!-- This is default style of Definition Lists -->
   <style>
      dl {
         display: block;
         margin-top: 1em;
         margin-bottom: 1em;
         margin-left: 0;
         margin-right: 0;
      }
   </style>
</head>

<body>
   <dl>
      <dt>Definition List</dt>
      <dd>
         A list of terms and their definitions.
      </dd>

      <dt>Android</dt>
      <dd>Android tutorial.</dd>

      <dt>Ruby</dt>
      <dd>Ruby tutorial.</dd>
   </dl>
   <p>
      We added default style to Description List
   </p>
</body>

</html>

巢狀定義列表

巢狀定義列表允許您在主定義術語內新增詳細的子定義。

示例

以下示例演示了 HTML 中的巢狀定義列表

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Nested Definition Lists Example</title>
</head>
<body>
	<h2>Nested Definition Lists Example</h2>
  <dl>
    <dt>Programming Languages</dt>
    <dd>
      <dl>
        <dt>Python</dt>
        <dd>A high-level, interpreted programming language.</dd>
        <dt>JavaScript</dt>
        <dd>A language used for web development.</dd>
      </dl>
    </dd>
    <dt>Web Technologies</dt>
    <dd>
      <dl>
        <dt>HTML</dt>
        <dd>The standard markup language for creating web pages.</dd>
        <dt>CSS</dt>
        <dd>Used for styling web pages.</dd>
      </dl>
    </dd>
  </dl>
</body>
</html>
列印頁面
上一頁
下一頁
廣告