Html 简明教程

HTML - Ordered Lists

HTML Ordered List 用于显示一个具有特定顺序或序列的项目集合。例如，我们可以使用有序列表来显示食谱的步骤、排行榜上的排名或按时间顺序发生的事件，如下图所示。

html ordered list

Syntax

<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

Define Ordered Lists

要在 HTML 中创建一个 ordered list ，请按照以下步骤操作。

  1. Step 1: 使用 * &lt;ol&gt;* 元素并在其中嵌套 * &lt;li&gt;* 元素。每个 &lt;li&gt; 元素表示列表中的一个项目。

  2. Step 2: 编号从 1 开始，并为使用 &lt;li&gt; 标记的每个连续有序列表元素增加一。它还允许我们通过使用 &lt;ol&gt; 标记上的 * start* 属性来更改起始编号，以指定所需的编号起始点。

Examples of HTML Ordered List

以下是说明有序列表用法的一些示例：

Setting type for an Ordered list

在以下示例中，我们正在使用有序列表的类型属性的所有值。以下示例的输出显示了四个有序列表，其中包含计数数字、罗马数字和字母表。

<!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>

Setting Start Value for Ordered List

在以下示例中，我们将有序列表的起始值定义为 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>

Styling Ordered List

使用 CSS 设置 HTML 有序列表样式允许自定义外观，以匹配网站的设计偏好。CSS 样式可以针对列表本身 (<ol>) 和列表项 (<li>)。

以下是包括用于有序列表的所有 CSS 样式的程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <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 type Attribute of Ordered List

  • type* 属性用于 <ol> 标记以指定 HTML 中无序列表的标记类型。默认情况下，使用计数数字。但是，我们可以借助以下值来更改此设置：

Type Value

Description

1

这是标记的默认类型。

I

列表项目将以罗马数字标记显示。

A

它会将标记设置为大写字母。

a

它会将标记设置为小写字母。

HTML start Attribute Pseudo Code

可以使用 * start* 特性以 <ol> 代码指定编号起始点。

// Numerals starts with 4
<ol type="1" start="4">

// Numerals starts with IV
<ol type="I" start="4">

// Numerals starts with iv
<ol type="i" start="4">

// Letters starts with d
<ol type="a" start="4">

// Letters starts with D
<ol type="A" start="4">