Html有序列表使用详解

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

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

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

  • 08

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

(0)

相关推荐

  • 思科Cisco路由器access-list访问控制列表命令详解

    标准型IP访问列表的格式 ---- 标准型IP访问列表的格式如下: ---- access-list[list number][permit|deny][source address][address ...

  • 安卓4.0和2.3的区别在哪里?图文详解

    安卓4.0推出已经有一段时间 但对于想升级4.0的朋友来说 4.0区别自己以前2.3的差异在哪里? 到底自己要不要升级4.0了? 下面就来看看4.0有什么区别 相比2.3,安卓4.0在系统上的9大改进 ...

  • DiskAid怎么安装使用?iOS神器DiskAid图文注册使用教程详解

    虽然苹果系统相对安卓来说比较封闭一些,但自从小编发现一款名为DiskAid的软件之后,感觉这是要让iOS散发第二春啊!轻松让iOS设备无需连接数据线的情况下在Wifi环境下进行管理,还能让我们闲置的内 ...

  • EditPlus中的正则表达式中英文使用详解(附常用实例)

    EditPlus中的正则表达式中英文详解(附常用实例) /t Tab character.tab符号 /n New line.新的一行(换行符) . Matches any character.任何字 ...

  • Linux下各种服务器的架设详解

    ########DNS########bind 篇######## 1.1 软件的相关资源。 官方网站:http://www.bind.com/ 源码软件包官方下载:http://www.isc.or ...

  • Windows 7全方位的安全保护功能详解

    怎么?对Wndows 7不了解?不知道怎么使用?没关系,IT168软件群组为您准备了《教你学Windows 7》系列教程。该教程共分为初级篇、中级篇、高级篇三部分,通过这个系列教程我们可爱的七仔将教你 ...

  • linux命令大全之crontab命令使用详解

    at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,linux系统则是由 cron (crond) 这个系统服务来控制的。Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认 ...

  • 如何设置和打开Win7移动中心 Win7移动中心功能详解

    Win7移动中心,是Win7系统专门为笔记本设置的一个功能模块,也就是说,如果你正在使用安装了Windows 7系统的笔记本,就可以使用这一功能,通过这个功能模块,你可以非常快捷的管理设置包括显示器亮 ...

  • Linux文件压缩和解压缩命令使用详解

    在Linux系统中,我们通常使用的文件压缩命令有:bunzip2 , bzip2 , cpio , gunzip , gzip ,split(切割文件) , zgrep(在压缩文件中寻找匹配的正则表达 ...