HTML 有序列表
html
html5
HTML Tutorial
HTML Properties
HTML tags
在本节中，我们将学习如何在 HTML 中实现有序列表。如何描述或显示有序列表？非常简单易行；它们用于描述内容中的信息列表。另一种技术是单个列表上可以有多个列表元素。
HTML中的列表可以分为三种类型，它们是：
- 有序列表
- 无序列表
- 定义列表
在本文中，我们将通过示例来了解有序列表规范。有序列表定义了创建列表时具体的有序信息；例如，它显示纵坐标信息或对信息进行编号。
有序列表的语法
有序列表是使用名为
- 的标签创建的元素并以
有序列表示例
让我们看看下面提到的一些例子：
示例#1
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List</title> </head> <body> <p><strong>There are 6 different airlines:</strong></p> <ol type="1"> <li>Jet Blue Airlines</li> <li>Frontier Airlines</li> <li>South West Airlines</li> <li> Spirit Airlines</li> <li> United Airlines</li> <li>America Airlines</li> </ol> </body> </html>
登录后复制
输出：
这会给你这样的结果
示例#2
带颜色的有序列表。在下面的示例中，我们使用了某个计数器属性，定义了
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List with colors</title>
</head>
<body>
<style>
ol li {
counter-increment: list;
list-style-type: none;
position: relative;
}
ol li:before {
color: #ff0000;
content: counter(list) ".";
left: -22px;
position: absolute;
text-align: center;
width: 24px;
}</style>
<ol>
<li><span> Norway is a Scandinavian Country</span></li>
<li><span>Oslo is the capital city</span></li>
<li><span>norway is known for its beauty , hiking, fishing</span></li>
<li><span>Ranked among the toppest country in europe</span></li>
</ol><br/>
</body></html>登录后复制
输出：
HTML 有序列表的属性类型
为了表示有序列表，该标签有五种重要的属性类型。作为 HTML
- 标签表示有序列表中的项目列表，它们可以是字母数字、数字或简单的字母顺序，前提是顺序是首要的。以下是有序列表的可能属性：
1.类型属性
此属性给出要在列表中使用的编号类型。
- type =’a’ – 按字母顺序排列
- type =’A’- 按大写字母顺序
- type =’i’ – 罗马数字小写
- type =’ I’- 给出大写罗马数字
这些类型的编号如下：
我。 属性类型='a.'
要以字母小写形式创建列表，请使用此类型。以下示例以小写形式显示有序列表，并将其设置为斜体。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List types</title>
</head>
<body>
<style>
ol li span {
font-weight: normal;
}
</style>
<p>Did you know that:</p>
<p>Skills required to become a data Scientist</p>
<ol type="a" >
<li><span><i> steps</span></i></li>
<li><span><b>There should be a prior knowledge in SAS and R programming.</b></span></li>
<li><span><b>They should have a strong calibre in creativity and analysis</span><b></li>
</ol>
</body>
</html>登录后复制
输出：
二。属性类型='A.'
有序列表可以具有小写字母的属性类型。下面的示例演示了如何在列表结构中使用此属性以及如何将字母设置为粗体。要将有序列表显示为粗体，需要使用
示例：
<!DOCTYPE html>
<html>
<head>
<title> Example for Nested list</title>
</head>
<body>
<p> State capitals of the united States</p>
<style>
ol {
font-weight:bolder;
}
ol li span {
font-weight: normal;
}
</style>
<ol type="A">
<li> <span>Alabama
<ul>
<li>Montgomery</li>
</ul>
</span>
</li>
<li><span>Arizona
<ul>
<li>Phoenix</li>
</ul>
</span>
</li>
<li> <span>California
<ul>
<li>Sacramento</li>
</ul>
</span>
</li>
<li> <span>New jersey
<ul>
<li>Trenton</li>
</ul>
</span>
</li>
<li><span>Washington
<ul>
<li>Olympia</li>
</ul></span>
</li>
<li> <span>Pennsylvannia
<ul>
</span> <li>Harisburg</li></ul>
</li>
</ol>
</body>
</html>登录后复制
输出：
三。属性类型='i.'
此功能指示小写罗马字母。
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List types</title> </head> <body> <p> EDUCBA HTML List Tutorial:</p> <ol> <li value="4" >Ordered list</li> <li>unordered list</li> <li>Definition list <ol type="i" > <li> <i>Introduction to list </i></li> <li><i>Syntax a List</i></li> <li><i> Types with an example</i> </ol> </li> <li>Snapshots</li> </ol> </body>
登录后复制
输出：
四。属性类型=’I.’
此功能提供大写罗马数字的输出。
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List Demo</title> </head> <body> <h2> List of Vegetables</li> <ol type="I"> <li>Carrot</li> <li> Radish</li> <li> Sweet Corn</li> </ol> <ol> <li>Fruits List <ol type="a"> <li>Pomegrante</li> <li>Bananas</li> <li>Pears</li> </ol> </li> </body> </html>
登录后复制
输出：
2.开始属性
start 属性定义有序列表编号的起始值。您可以从头开始使用任何数字，而不仅仅是从默认数字“1”开始。示例：开始=6。现在已经在 HTML5 中使用了。
示例：
在下面的示例中，我使用了 upper_alpha 的样式类型以及从 =3 开始的值；因此，输出显示为“C”。
<!DOCTYPE html>
<html>
<head>
<title> Example for Nested list</title>
</head>
<body>
<p> RICHEST COUNTRIES IN THE WORLD</p>
<style>
ol { list-style-type: upper-alpha;
font-weight:bolder;
}
ol li span {
font-weight: normal;}
</style>
<ol start="3">
<li>Quatar known for his oil and petrochemical reserves</li>
<li>Norway known for the beauty of nature with petroleum producer</li>
<li>Singapore with global trade center</li>
</ol>
</body>
</html>登录后复制
输出：
3.反向属性
这是 HTML5 中引入的新属性，表示项目在 Web 浏览器中以相反的顺序显示。使用时，
- 它是一个布尔属性，可以使用任何值来反转计数器。声明
- 这里使用的标签非常容易记住。
- 在
- 中标签。
示例：
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List</title> </head> <body> <h2>How to do Balle Technique</h2> <ol> <li>Turn out</li> <li>Alignment</li> <li>Pointed Toes</li> </ol> <hr> <h2> Balle Steps</h2> <ol reversed="True"> <li>Seven Movements</li> <li>Plier</li> <li>Etendre </li> <li>Glisser</li> <li>Eliever</li> </ol> </body> </html>
登录后复制
输出：
结论
因此，我把有序列表做了什么总结到底，几乎所有浏览器都支持。当然，您可以在 HTML 标签元素中创建任意数量的列表；在本文中，我们仅关注选定的示例来了解基本实现。因此，学习这个主题可能不是最困难的工作，因为
以上是HTML 有序列表的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前
By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
Inzoi：如何申请学校和大学
1 个月前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
在哪里可以找到Atomfall中的站点办公室钥匙
1 个月前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
