详解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属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP合并静态文件详解
2014/11/14 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
django使用html模板减少代码代码解析
2017/12/12 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python安装pil库方法及代码
2019/06/25 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
Hibernate持久层技术
2013/12/16 面试题
工地门卫岗位职责
2013/12/30 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
八年级音乐教学反思
2014/01/09 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
诉讼授权委托书
2014/10/15 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫