详解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 相关文章推荐
HTML5 CSS3给网站设计带来出色效果
Jul 16 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
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
10条PHP高级技巧[修正版]
2011/08/02 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
php源码的使用方法讲解
2019/09/26 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js单例模式详解实例
2013/11/21 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
vue2路由基本用法实例分析
2020/03/06 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python的文件操作方法汇总
2017/11/10 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python列表切片常用操作实例解析
2019/12/16 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
学生会干部自荐信
2014/02/04 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
培训通知
2015/04/17 职场文书
教师继续教育反思周记
2015/06/25 职场文书
《小小的船》教学反思
2016/02/18 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript