详解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 17 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
CSS基础详解
Oct 16 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 文件上传模型,支持多文件上传
2009/08/13 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
uni app仿微信顶部导航条功能
2019/09/17 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
js编写简易的计算器
2020/07/29 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
C#的几个面试问题
2016/05/22 面试题
毕业生教师求职信
2013/10/20 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
网页美工求职信范文
2014/04/17 职场文书
民主评议党员总结
2014/10/20 职场文书
2014年收银工作总结
2014/11/13 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
django中websocket的具体使用
2022/01/22 Python
python标准库ElementTree处理xml
2022/05/20 Python
Python中的socket网络模块介绍
2022/07/23 Python