HTML - 無序列表

無序列表

無序列表用於顯示一系列相關的專案，這些專案沒有特定的順序或序列。這種型別的列表用於描述特定的服務或產品，因為它不需要遵循任何順序。下圖顯示了一個雜貨的有序列表。

建立無序列表

要在 HTML 中建立無序列表，我們使用<ul>標籤並在其中巢狀<li>標籤。每個 <li> 元素代表列表中的一個專案。預設情況下，瀏覽器會自動為每個專案顯示圓形專案符號。但是，我們可以使用 <ul> 元素上的type屬性更改此專案符號樣式。

示例

以下示例演示如何在 HTML 中建立無序列表

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <ul>
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ul>
</body>
</html>

以上示例顯示了一個帶有預設圓形專案符號的無序列表。

無序列表 - type 屬性

<ul>標籤的type屬性用於指定 HTML 中無序列表的專案符號型別。預設情況下，使用disc專案符號型別。但我們可以藉助以下選項進行更改

序號	值和描述
1	disc 這是預設的標記型別。
2	square 列表項將以方形標記顯示。
3	circle 它將標記設定為空心圓。

序號

值和描述

disc

這是預設的標記型別。

square

列表項將以方形標記顯示。

circle

它將標記設定為空心圓。

示例

以下示例說明了 HTML 中不同型別的無序列表

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <p>An unordered list with hollow circle marker:</p>
   <ul type="circle">
      <li>Rice</li>
      <li>Pulses</li>
      <li>Flour</li>
      <li>Beans</li>
   </ul>
   <p>An unordered list with square marker:</p>
   <ul type="square">
      <li>Nuts</li>
      <li>Oats</li>
      <li>Eggs</li>
      <li>Dates</li>
   </ul>
   <p>An unordered list with default disc marker:</p>
   <ul type="disc">
      <li>Apple</li>
      <li>Guava</li>
      <li>Carrot</li>
      <li>Orange</li>
   </ul>
</body>
</html>

以上示例顯示了三個無序列表，分別帶有預設圓形專案符號、方形和空心圓形專案符號。

沒有專案符號的無序列表

您還可以顯示無序列表的列表項而不顯示專案符號。要顯示沒有專案符號的無序列表，請將"none" 定義為list-style-type屬性。

語法

以下是建立沒有專案符號的無序列表的語法

<ul style="list-style-type: none">
   <li>Item in list...</li>
   <li>Item in list...</li>
   <li>Item in list...</li>
</ul>

示例

下面是建立沒有專案符號的無序列表的示例

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul style="list-style-type: none">
      <li>Abdul</li>
      <li>Jason</li>
      <li>Yadav</li>
   </ul>
</body>
</html>

以上程式建立了一個包含 Abdul、Jason 和 Yadav 元素的無序列表，沒有專案符號。

樣式化無序列表

使用 CSS 樣式化無序列表 (<ul>) 允許自定義列表的外觀，包括修改專案符號、間距和整體設計。

示例

以下是程式示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled Unordered List</title>
   <style>
      ul {
         list-style-type: square;
         /* Custom bullet type */
         padding: 0;
         /* Removes default padding */
      }
      li {
         margin-bottom: 8px;
         /* Adds spacing between list items */
         background-color: #f0f0f0;
         /* Background color */
         border: 1px solid #ccc;
         /* Border */
         padding: 8px;
         /* Padding inside each list item */
         transition: background-color 0.3s;
         /* Smooth transition effect */
      }
      li:hover {
         background-color: #e0e0e0;
         /* Change background on hover */
      }
   </style>
</head>
<body>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</body>
</html>

以上程式使用方形專案符號樣式化了無序列表。每個列表項都有背景顏色、邊框和填充，從而建立了獨特的卡片式外觀。專案之間用邊距分隔，並將滑鼠懸停在專案上會觸發平滑的背景顏色過渡。

巢狀無序列表

HTML 允許巢狀列表；您可以建立巢狀的無序列表以在外部列表元素的專案內顯示專案列表。

示例

以下示例演示了巢狀無序列表的使用

<!DOCTYPE html>
<html>
<head>
  <title>Nested Unordered Lists</title>
</head>
<body>
<h2>Example of Nested Unordered Lists</h2>
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
  <li>Dairy
    <ul>
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yogurt</li>
    </ul>
  </li>
</ul>
</body>
</html>

列印頁面