详解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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
wxPython实现分隔窗口
2019/11/19 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
Collection和Collections的区别
2016/05/02 面试题
建筑专业自荐信
2013/10/18 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
项目施工员岗位职责
2014/03/09 职场文书
捐赠仪式主持词
2014/03/19 职场文书
财务情况说明书范文
2014/05/06 职场文书
抵押贷款承诺书
2014/05/30 职场文书
转让协议书
2015/01/27 职场文书
学术会议邀请函
2015/01/30 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android