详解HTML5中ol标签的用法


Posted in HTML / CSS onSeptember 08, 2015

定义和用法
<ol> 标签定义有序列表。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的。
在 HTML 4.01 中,不赞成使用 "compact" 和 "type" 属性,在 HTML 5 中,不再支持这两个属性。
提示和注释
提示:请使用 CSS 来定义列表的类型。
例子

XML/HTML Code复制内容到剪贴板
  1. <ol>  
  2.    <li>Coffee</li>  
  3.    <li>Tea</li>  
  4. </ol>  
  5.   
  6. <ol>  
  7.    <li start="60">Coffee</li>  
  8.    <li>Tea</li>  
  9. </ol>  

详解HTML5中ol标签的用法

HTML5提供的OL标签序号控制
OL这标签是以有序列表的形式来显示数据的,它会自动为数据加上编号。但是有时候数据并不是从1开始编号的,或者编号是倒序排列的,又或者编号是完全杂乱的,这时就需要用到HTML5中对OL标签提供的一些参数来设置。不过遗憾的是,目前它还不兼容IE。

现在,我们有一个这样的HTML文档

XML/HTML Code复制内容到剪贴板
  1. <ol>  
  2.   <li>土豆</li>  
  3.   <li>洋葱</li>  
  4.   <li>胡萝卜</li>  
  5.   <li>里脊肉</li>  
  6. </ol>  

它会显示成这样
详解HTML5中ol标签的用法

这些序号默认是从1开始递增的。如果需要让OL标签中的序号倒序排列呢?这只要对OL加个reserved属性即可。

XML/HTML Code复制内容到剪贴板
  1. <ol reversed="reversed">  
  2. 这个是继承自XHTML的写法,其实可以直接写   

  3. <ol reversed>  

这就已经符合HTML5的标准了,加上这个后就可以得到这样的结果
详解HTML5中ol标签的用法

Chrome和Firefox中都是没问题的,但是IE不兼容它(至少我测试了IE10是不兼容的)。嘛,咱现在只是了解一下这个功能,至于IE实不实现暂时就不再讨论了。

接着,如果不想让它从1开始呢?比如要让它从3开始,我们就可以给OL标签添加start属性,并设置为3。

XML/HTML Code复制内容到剪贴板
  1. <ol start="3">  

详解HTML5中ol标签的用法

最后,对于完全无规律却又是有序的东西怎么做呢?比如我要2、1、3、4,这样的排列怎么办?其实,只要给LI加上value属性就可以控制这个序号。

XML/HTML Code复制内容到剪贴板
  1. <ol>  
  2.   <li value="2">土豆</li>  
  3.   <li value="1">洋葱</li>  
  4.   <li value="3">胡萝卜</li>  
  5.   <li value="4">里脊肉</li>  
  6. </ol>  

详解HTML5中ol标签的用法

HTML / CSS 相关文章推荐
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 #HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 #HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 #HTML / CSS
详解HTML5中的元素与元素
Aug 17 #HTML / CSS
详解HTML5中download属性的应用
Aug 06 #HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 #HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 #HTML / CSS
You might like
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
季度思想汇报
2014/01/01 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
基于angular实现树形二级表格
2021/10/16 Javascript
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang