HTML - 有序列表

上一页
下一页

有序列表

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

Ordered Lists

创建有序列表

要在 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>
打印页面
上一页
下一页
广告