详解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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
ThinkPHP 404页面的设置方法
2015/01/14 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
angular 服务随记小结
2019/05/06 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python2与Python3的区别实例总结
2019/04/17 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
办公室内勤岗位职责范本
2013/12/09 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
优秀教研组申报材料
2014/12/26 职场文书
个人创业事迹材料
2014/12/30 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js