Html有序列表使用详解

在用Html开发页面时, 我们经常会使用有序列表ol来列出一些选项 。 有序列表ol标签会自动为我们的选项添加序号 。 <br/>有序列表更详细的使用, 我们下面一起看下 。 操作方法 01 先看下我们的html代码, 如图, 代码很简单 。

Html有序列表使用详解



02 【Html有序列表使用详解】运行页面, 我们得到一个默认显示的列表 。 默认下就是用阿拉伯数字列出我们的列表选项 。

Html有序列表使用详解



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

Html有序列表使用详解



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

Html有序列表使用详解



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

Html有序列表使用详解



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

Html有序列表使用详解



Html有序列表使用详解



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

Html有序列表使用详解



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

Html有序列表使用详解





以上内容就是Html有序列表使用详解的内容啦, 希望对你有所帮助哦!

    猜你喜欢