HTML - 列表

HTML 列表

HTML 列表是專案組或集合。根據需要，這些專案可以是有序的，也可以是無序的。它們有助於組織、構建和呈現資訊，使其更易於使用者使用、閱讀和訪問。下面顯示了示例列表。−

在 HTML 中使用列表

要在 HTML 中顯示資訊列表，我們使用各種列表標籤，例如 <ul>、<ol> 和 <ll>。HTML 為 Web 開發人員提供了三種指定資訊列表的方法，即有序、無序和定義列表。所有列表都必須包含一個或多個列表元素。除了提到的列表型別外，還有一些其他重要的與列表相關的元素和概念也有助於有效的文件結構。

無序列表

無序列表顯示專案列表，這些專案並非按特定順序排列。無序列表用專案符號標記。要建立無序列表，可以使用 <ul> 標籤以及 <li> 標籤。這裡，<li> 標籤指定列表項。

示例

以下示例演示了無序列表。在這裡，我們建立了一個包含 5 個專案的列表。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ul>
</body>
</html>

有序列表

有序列表是按特定順序排列的專案列表。有序列表預設情況下用數字標記；您可以使用 type 屬性或 CSS list-style-type 屬性將數字更改為字母、羅馬數字等。

要建立有序列表，可以使用 <ol> 標籤以及 <li> 標籤，其中 <li> 指定列表項。

示例

以下示例演示了一個包含 5 個專案的有序列表。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML List</h2>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>JavaFX</li>
   </ol>
</body>
</html>

定義列表

定義列表是包含專案及其相應描述的列表。定義列表是使用 <dl>、<dt> 和 <dd> 標籤建立的。其中 <dl> 標籤指定“定義列表”，<dt> 標籤指定“定義術語”，<dd> 標籤指定“定義描述”。

示例

以下示例演示了 HTML 中的定義列表；在這裡，我們建立了一個包含三個專案的定義列表。

<!DOCTYPE html>
<html>
<head>
    <title>HTML List</title>
</head>
<body>
    <h2>Example of HTML List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText markup languague</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheet</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
    </dl>
</body>
</html>

巢狀列表

在另一個列表中建立的列表稱為巢狀列表。HTML 還允許將列表彼此巢狀以生成複雜的文件結構。

示例

在以下示例中，我們將一個無序列表巢狀在一個有序列表中。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Example of HTML Nested List</h2>
   <ol>
      <li>Item One</li>
      <li>Item Two
         <ul>
            <li>Subitem A</li>
            <li>Subitem B</li>
         </ul>
      </li>
      <li>Item Three</li>
   </ol>
</body>
</html>

在 <div> 標籤內分組列表

為了增強樣式和佈局，列表通常包裝在<div> 元素中。此分組有助於應用一致的樣式並建立視覺上吸引人的列表結構。

示例

在這個示例中，我們使用 div 標籤對無序列表進行分組。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
</head>
<body>
   <h2>Grouping of HTML List elements with div tag</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

列表樣式

可以使用 CSS 對列表進行樣式設定以增強視覺效果。可以將自定義樣式應用於列表項，從而建立獨特且視覺上吸引人的設計。為此，我們使用 <style> 標籤，這是一種指定內部 CSS 的方法。

示例

以下示例演示瞭如何使用 style 標籤將 CSS 應用於 HTML 列表。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
      }
      div {
         color: red;
      }
   </style>
</head>
<body>
   <h2>HTML List with CSS</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

HTML 列表標記型別

CSS 允許自定義列表項的標記型別。為此，我們使用 CSS list-style-type 屬性，可以將其設定為將標記更改為圓圈、正方形或其他符號。

示例

在這個示例中，我們使用 CSS 的 list-style-type 屬性來設定列表項的標記。

<!DOCTYPE html>
<html>
<head>
   <title>HTML List</title>
   <style>
      li {
         font-size: 16px;
         list-style-type: square;
      }
   </style>
</head>
<body>
   <h2>HTML list-style-type Property</h2>
   <div>
      <p>First List</p>
      <ol>
         <li>Item One</li>
         <li>Item Two</li>
      </ol>
   </div>
   <div>
      <p>Second List</p>
      <ol>
         <li>Item Three</li>
         <li>Item Four</li>
      </ol>
   </div>
</body>
</html>

列印頁面