Html 简明教程

HTML - Ordered Lists

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

HTML Ordered List is used to display a collection of items that have a specific order or sequence. For instance, we can use an ordered list to show the steps of a recipe, the ranking of a leader board, or the chronological order of events as shown in the below figure.

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 ，请按照以下步骤操作。

To create an ordered list in HTML follow the bellow steps.

  1. Step 1: Use the <ol> element and nest <li> elements inside it. Each <li> element represents one item in the list.

  2. Step 2: The numbering starts with 1 and is incremented by one for each successive ordered list element tagged with <li>. It also allows us to change the starting numbering with start attribute on <ol> tag to specify the starting point of numbering we need.

Examples of HTML Ordered List

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

Following are some examples that illustrate usage of Ordered List

Setting type for an Ordered list

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

In the following example, we are using all values of the type attribute of ordered list. The output of below example displays four ordered lists with counting numbers, roman numbers and alphabets.

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

In the following example we define start value for an ordered list as 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>)。

Styling HTML-ordered lists with CSS allows customization of the appearance to match the design preferences of a website. The CSS styles can target both the list itself (<ol>) and the list items (<li>).

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

Below is the program example that includes all the CSS styling for ordered list

<!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 中无序列表的标记类型。默认情况下，使用计数数字。但是，我们可以借助以下值来更改此设置：

The type attribute for <ol> tag is used to specify the type of marker for the unordered list in HTML. By default, counting numbers are used. But, we can change this with the help of following values

Type Value

Description

1

It is the default type of marker.

I

List items will be displayed with roman number marker.

A

It will set the marker to upper case alphabets.

a

It sets the marker to lower case alphabets.

HTML start Attribute Pseudo Code

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

You can use start attribute for <ol> tag to specify the starting point of numbering you need.

// 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">