当前位置:常识集 > 数码游戏 > IT技术 > Html有序列表使用详解
手机版

Html有序列表使用详解

来源:常识集 阅读:1.3W 次

在用Html开发页面时,我们经常会使用有序列表ol来列出一些选项。有序列表ol标签会自动为我们的选项添加序号。
有序列表更详细的使用,我们下面一起看下。

操作方法

(01)先看下我们的html代码,如图,代码很简单。

Html有序列表使用详解

(02)运行页面,我们得到一个默认显示的列表。默认下就是用阿拉伯数字列出我们的列表选项。

Html有序列表使用详解 第2张

(03)估计很多人都不知道,除了用阿拉伯数字作序号,我们还可以用罗马字母来作序号,只需要在ol标签上添加属性type=i就行了,代码如图

Html有序列表使用详解 第3张

(04)刷新页面,可以看到新的列表序号。

Html有序列表使用详解 第4张

(05)另外还有一种序号,就是用英文字母作选项序号,修改属性type=a就行,修改后效果如图

Html有序列表使用详解 第5张

(06)罗马字母,和英文字母来作序号,还会区分大小写的字母,如果要用大写的字母来显示序号,只需要用大写的i和a来做属性值就行了。type=I,或 type=A, 二者的效果如图

Html有序列表使用详解 第6张
Html有序列表使用详解 第7张

(07)在HTML5里,这个有序列表,还支持一个新的属性reversed,设置了该属性会使序号以倒序的形式显示。代码如图

Html有序列表使用详解 第8张

(08)刷新页面,可以看到现在的序列是由大到小了。(除了数字序号,其他的英文字母,罗马字母都支持倒序形式,大家可以自行验证)

Html有序列表使用详解 第9张
本文链接:https://www.changshiji.com/smyx/itjishu/98zmge.html

Copyright © 2024. 常识集 All right reserved. 浙ICP备20202586号-2

文字美图素材,版权属于原作者。部分文章内容由网友提供推送时因种种原因未能与原作者联系上,若涉及版权问题,敬请原作者联系我们,立即处理。