HTML - 有序列表_HTML 菜鸟教程

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

语法

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

定义有序列表

要在 HTML 中创建有序列表，请按照以下步骤操作。

步骤1：使用 <ol> 元素并在其中嵌套 <li> 元素。每个 <li> 元素表示列表中的一个项目。
步骤2：编号从 1 开始，对于每个标记为 <li> 的连续有序列表元素，编号递增 1。它还允许我们更改带有 <ol> 标签上的 start 属性的起始编号，以指定我们需要的编号起点。

HTML 有序列表的示例

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

有序列表的设置类型

在以下示例中，我们使用的是有序列表的 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>

设置有序列表的起始值

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

<ol> 标记的 type 属性用于指定 HTML 中无序列表的标记类型。默认情况下，使用计数数字。但是，我们可以借助以下值来改变这一点

类型值	描述
1	它是标记的默认类型。
I	列表项将显示罗马数字标记。
A	它会将标记设置为大写字母。
a	它将标记设置为小写字母。

HTML start 属性伪代码

您可以使用 <ol> 标记的 start 属性来指定所需的编号起点。

// 数字以4开头
<ol type="1" start="4"> 

// 数字以IV开头
<ol type="I" start="4">

// 数字以iv开头
<ol type="i" start="4">

// 字母以d开头
<ol type="a" start="4">

// 字母以D开头
<ol type="A" start="4">

<< HTML - 无序列表 HTML - 定义列表 >>