详解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制作精致的照片墙特效
Jun 07 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
vue.js的提示组件
2017/03/02 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python版本的仿windows计划任务工具
2018/04/30 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Django实现文件上传和下载功能
2019/10/06 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
班级出游活动计划书
2014/08/15 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python