详解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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
用HTML5制作视频拼图的教程
May 13 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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
网站当前的在线人数
2006/10/09 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php实现购物车功能(上)
2020/07/23 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
js继承的实现代码
2010/08/05 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
J2EE中常用的名词进行解释
2015/11/09 面试题
《大禹治水》教学反思
2014/04/27 职场文书
计划生育工作总结2015
2015/04/03 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python