HTML - <ol> 標籤

HTML <ol> 標籤用於建立有序列表。有序列表的預設順序為數字順序。

有序列表項顯示為數字，可以採用多種形式，例如數字、字母（大寫或小寫）或羅馬數字。有序列表包含多個<li>標籤，用於建立列表項。

語法

<ol>.....</ol>

屬性

HTML ol 標籤支援 HTML 的全域性和事件屬性。也接受一些特定的屬性，如下所示。

屬性	值	描述
reversed	reversed	指定列表項以反向順序顯示。
start	數字	指定有序列表的起始數字。
type	1 A a I i	指定有序列表的編號型別。

HTML ol 標籤示例

下面的示例將說明 ol 標籤的用法，包括何時何地以及如何使用 ol 標籤，以及如何建立巢狀有序列表。

建立有序列表

在下面的示例中，我們建立了一個有序列表來顯示相關的專案列表。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
<!-- Creating an Ordered list-->
   <h3>
      List of technologies for Basic Web Development
   </h3>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

自定有序列表的起始編號

以下是另一個有序列表示例。在這裡，我們在<ol>標籤中使用start屬性來顯示專案列表，計數從10開始。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <h3>
      List of technologies for Basic Web Development
   </h3>
   <ol start="2">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

字母有序列表

在這個例子中，我們在<ol>標籤中使用type屬性，將列表項的編號型別設定為大寫和小寫字母格式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <!--type = 'a'-->
   <ol type='a'>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
   </ol>
   <!--type = 'A'-->
   <ol type='A'>
      <li>Red</li>
      <li>Black</li>
      <li>Blue</li>
   </ol>
</body>
</html>

羅馬數字有序列表

在這個程式中，我們在<ol>標籤中使用type屬性，並將value type設定為“I”和“i”，以大寫和小寫羅馬數字格式顯示專案列表。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <!--type = 'i'-->
   <ol type='i'>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
   <!--type = 'I'-->
   <ol type='I'>
      <li>Java</li>
      <li>PHP</li>
      <li>Python</li>
   </ol>
</body>
</html>

巢狀有序列表

在下面的示例中，我們建立了一個巢狀有序列表來顯示有序列表的相關專案。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Nested Ordered list-->
   <ol start=10>
      <li>Uppercase letters numbering type</li>
      <ol type='A'>
      <li>Mango</li>
      <li>Apple</li>
      </ol>
      <li>Lowercase letters numbering type</li>
      <ol type='a'>
      <li>Red</li>
      <li>Blue</li>
      </ol>
      <li>Lowercase roman numerals type</li>
      <ol type='i'>
      <li>HTML</li>
      <li>CSS</li>
      </ol>
      <li>Uppercase roman numerals type</li>
      <ol type='I'>
      <li>Java</li>
      <li>C++</li>
      </ol>
   </ol>
</body>
</html>

支援的瀏覽器

標籤
ol	是	是	是	是	是

html_tags_reference.htm

列印頁面