介绍
在 HTML 中,我们可以使用 <ol>
标签创建一个有序列表。有序列表是一个按特定顺序编号的项目列表。<ol>
标签用于创建有序列表,而 <li>
标签用于定义列表中的每个项目。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在 HTML 中,我们可以使用 <ol>
标签创建一个有序列表。有序列表是一个按特定顺序编号的项目列表。<ol>
标签用于创建有序列表,而 <li>
标签用于定义列表中的每个项目。
注意:你可以在
index.html
中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
在这一步中,我们将创建一个基本的 HTML 文件并设置 <ol>
标签。打开 "index.html" 文件并输入以下代码:
<!doctype html>
<html>
<head>
<title>Ordered list Example</title>
</head>
<body>
<h1>Ordered List Example</h1>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</body>
</html>
在这一步中,我们将向有序列表中添加更多项目。为此,只需在 <ol>
标签的开始和结束之间添加更多 <li>
标签:
<!doctype html>
<html>
<head>
<title>Ordered list Example</title>
</head>
<body>
<h1>Ordered List Example</h1>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>
在这一步中,我们将更改有序列表中使用的编号类型。默认情况下,有序列表使用十进制编号。然而,我们可以将其更改为其他编号类型,例如罗马数字或字母。要更改编号类型,请在 <ol>
标签中使用 type
属性。例如:
<!doctype html>
<html>
<head>
<title>Ordered list Example</title>
</head>
<body>
<h1>Ordered List Example</h1>
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>
在上面的代码中,我们将 type
属性设置为 I
,表示大写罗马数字。
在这一步中,我们将更改有序列表项的起始编号。默认情况下,有序列表的第一项从 "1" 开始。然而,我们可以将其更改为从特定数字开始。要更改起始编号,请在 <ol>
标签中使用 start
属性。例如:
<!doctype html>
<html>
<head>
<title>Ordered list Example</title>
</head>
<body>
<h1>Ordered List Example</h1>
<ol start="3">
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>
</body>
</html>
在上面的代码中,我们将 start
属性设置为 3
,这意味着有序列表的第一项将编号为 "3"。
在本实验中,我们学习了如何使用 <ol>
标签在 HTML 中创建有序列表。我们还学习了如何向列表中添加项目、更改编号类型以及从特定数字开始编号。通过这些知识,我们可以在网页上创建具有专业外观的列表。