HTML - 有序列表

有序列表

一個有序列表用於顯示具有特定順序或序列的專案集合。例如，我們可以使用有序列表來顯示食譜的步驟、排行榜的排名或事件的時間順序，如下面的圖所示。

建立有序列表

要在 HTML 中建立有序列表，我們使用<ol>標籤並在其中巢狀<li>標籤。每個<li>元素代表列表中的一個專案。編號從 1 開始，對於每個帶有<li>標籤的後續有序列表元素遞增 1。與無序列表一樣，它也允許我們使用<ol>元素的type屬性更改編號樣式。

示例

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

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

如果單擊編輯並執行，上面的示例將顯示一個有序列表。

有序列表 - type 屬性

用於<ol>標籤的type屬性用於指定 HTML 中有序列表的標記型別。預設情況下，列表編號的型別是從 1、2、3 等開始的數字。您可以使用下面給出的任何值來更改數字的型別。

序號	值和說明
1	1 這是預設的標記型別。
2	I 列表項將顯示為羅馬數字標記。
3	A 它將標記設定為大寫字母。
4	a 它將標記設定為小寫字母。

示例

在下面的示例中，我們使用了 type 屬性的所有值。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Ordered List</title>
</head>
<body>
   <p>Ordered list with counting numbers:</p>
   <ol type="1">
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ol>
   <p>Ordered list with roman numbers:</p>
   <ol type="I">
      <li>Aman</li>
      <li>Vivek</li>
      <li>Shrey</li>
      <li>Ansh</li>
   </ol>
   <p>Ordered list with upper case alphabets:</p>
   <ol type="A">
      <li>Bus</li>
      <li>Train</li>
      <li>Plane</li>
      <li>Boat</li>
   </ol>
   <p>Ordered list with lower case alphabets:</p>
   <ol type="a">
      <li>Item One</li>
      <li>Item Two</li>
      <li>Item Three</li>
      <li>Item Four</li>
   </ol>
</body>
</html>

上面的示例顯示了四個有序列表，分別使用計數數字、羅馬數字和字母。

有序列表 - start 屬性

預設情況下，編號從 1 開始，但您可以使用帶有<ol>標籤的start屬性來更改它。style 屬性定義有序列表的起始數字。

語法

以下是定義數字型別和有序列表的初始（起始）數字的不同語法（用例）。

<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.

示例

以下是一個我們使用<ol type="i" start="4" >的示例。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Ordered List</title>
</head>
<body>
   <ol type="i" start="4">
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ol>
</body>
</html>

樣式化有序列表

使用 CSS 樣式化有序列表允許自定義外觀以匹配網站的設計偏好。CSS 樣式可以同時定位列表本身（<ol>）和列表項（<li>）。

示例

下面是包含所有有序列表 CSS 樣式的程式示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled Ordered List</title>
   <style>
      /* Basic Styling */
      ol {
         color: navy;
         font-family: 'Arial', sans-serif;
         margin-left: 20px;
      }
      li {
         font-size: 16px;
         margin-bottom: 8px;
      }
      /* Changing Numbering Style */
      ol.roman {
         list-style-type: upper-roman;
      }
      ol.letters {
         list-style-type: upper-alpha;
      }
      /* Adding Counters */
      ol.counter-list {
         counter-reset: my-counter;
      }
      ol.counter-list li {
         counter-increment: my-counter;
      }
      ol.counter-list li::before {
         content: counter(my-counter) '. ';
      }
      /* Changing Text Color on Hover */
      li.hover-effect:hover {
         color: #e44d26;
      }
   </style>
</head>
<body>
   <h1>Styled Ordered List Example</h1>
   <h2>Basic Styling</h2>
   <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ol>
   <h2>Changing Numbering Style</h2>
   <ol class="roman">
      <li>Roman I</li>
      <li>Roman II</li>
      <li>Roman III</li>
   </ol>
   <ol class="letters">
      <li>Letter A</li>
      <li>Letter B</li>
      <li>Letter C</li>
   </ol>
   <h2>Adding Counters</h2>
   <ol class="counter-list">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
   </ol>
   <h2>Changing Text Color on Hover</h2>
   <ol>
      <li class="hover-effect">Hover Effect 1</li>
      <li class="hover-effect">Hover Effect 2</li>
      <li class="hover-effect">Hover Effect 3</li>
   </ol>
</body>
</html>

該程式建立一個帶有有序列表的樣式化 HTML 文件。它包括基本樣式、將編號樣式更改為羅馬數字和字母、向專案新增計數器以及在懸停時更改文字顏色。

巢狀有序列表

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

注意：您還可以更改外層或內層列表的型別。在下面的示例中，主列表使用十進位制數字，第二個列表項的列表使用小寫羅馬數字，第三個列表項的列表使用大寫羅馬數字。您還可以根據需要定義起始數字。

示例

以下示例演示巢狀有序列表的使用。

<!DOCTYPE html>
<html>
<head>
  <title>Nested Ordered Lists</title>
</head>
<body>
<h2>Example of Nested Ordered Lists</h2>
<ol>
  <li>Fruits
    <ol>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ol>
  </li>
  <li>Vegetables
    <ol type="i">
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ol>
  </li>
  <li>Dairy
    <ol type="I">
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yogurt</li>
    </ol>
  </li>
</ol>
</body>
</html>

列印頁面