详解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 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
详解flex:1什么意思
Jul 23 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判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
jQuery自动或手动图片切换效果
2017/10/11 jQuery
js前端导出Excel的方法
2017/11/01 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python实现百度语音识别api
2018/04/10 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
高三自我鉴定
2013/10/23 职场文书
任课老师推荐信范文
2013/11/24 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
百年校庆感言
2015/08/01 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
5个实用的JavaScript新特性
2022/06/16 Javascript