详解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理解head_动力节点Java学院整理
Jul 13 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
详解js的六大数据类型
2016/12/27 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Python新手实现2048小游戏
2015/03/31 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
python 自动去除空行的实例
2018/07/24 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
应聘医药销售自荐书范文
2014/02/08 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
特教教师先进事迹
2014/05/21 职场文书
2014年党员整改措施
2014/10/24 职场文书
《1942》观后感
2015/06/08 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
python实现简单聊天功能
2021/07/07 Python