详解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制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
CSS极坐标的实例代码
Jun 03 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
现金出纳岗位职责
2014/03/15 职场文书
家长给学校的建议书
2014/05/15 职场文书
销售口号大全
2014/06/11 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
租车协议书范本2014
2014/11/17 职场文书
导游词之江西赣州
2019/10/15 职场文书
python实现进度条的多种实现
2021/04/29 Python
JavaScript实现简单图片切换
2021/04/29 Javascript