详解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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php下过滤HTML代码的函数
2007/12/10 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
浅析Python中的for 循环
2016/06/09 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
银行出纳岗位职责
2013/11/25 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
先进班组材料范文
2014/12/25 职场文书
童年读书笔记
2015/06/26 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
MySQL创建管理HASH分区
2022/04/13 MySQL