<article> 是html5中引入的新标签可以实现正向反向列表排序功能

使用以前的html4进行列表排序,可以使用下列形式

<h1>Top Three Teams</h1>
     <ol>
          <li value="3">Third Place</li>
         <li value="2">Runner Up</li>
         <li value="1">Top Team</li>
</ol>

其网页显示形式如下

然而使用html5的article标签进行排序将变得更加方便灵活,源码如下

<article>

<h1>Top Three Teams</h1>
     <ol reversed="reversed">
          <li >Third Place</li>
         <li >Runner Up</li>
         <li >Top Team</li>
</ol>

</article>

通过reversed属性来实现正向或反向排序

显示效果如下

html5 article标签举例的更多相关文章

  1. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  2. html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  3. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  4. html5新标签转

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

  5. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  6. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  7. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  8. HTML5 布局标签

    HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站,相对HTML4,HTML5新增的带有语义化的标签可以代替div进行页面布局(与html5.js结合起来时可以放心使用 ) ...

  9. HTML5新标签

    <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...

随机推荐

  1. 常用的meta标签总结

    <!-- 关键字,搜所引擎 SEO --><meta http-equiv="keywords" content="关键字1,关键字2,..." ...

  2. [Q]自定义快捷键

    打开CAD批量打图精灵主界面可以使用以下三个命令其一:“QuickPlot”.“QPlot”.“QP”.“PP”,其中“PP”可以更改, 方法如下:进入AutoCAD传统界面,点“工具”-“自定义”- ...

  3. DateTime & UTC 相互转化

    public long ToUnixTime(DateTime date) { var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.U ...

  4. Shell 脚本计算时间差

    在shell脚本中统计程序执行完毕所需要的时间不像在java中使用System.currentTimeMillis()方便 稍微记录一下,以供备用,免得又去花时间想(统计程序执行消耗多少s): sta ...

  5. cookie会话技术

    会话技术 B/S请求是无状态无记忆的,脚本与脚本之间是没有联系的,导致不能进行连续的业务逻辑 Cookie技术:将会话数据保存在浏览器端 原理:服务器向浏览器发送指令,用来管理存储在浏览器端的cook ...

  6. OBJECT-ORIENTED

  7. 解析Properties文件

    /** * 传入需要解析的文件属性,传入文件的路径 * @param para 需要获取的属性名称.也就是键值对中的键名称 * @param filepath * @return */ public ...

  8. Qt 解压/压缩文件

    很久没有在博客园写随笔了,今天项目需要解压和压缩文件,所以去了解哈. 参考的是大神的代码:https://yq.aliyun.com/articles/24428. 使用的是 QuaZIP类. 类 说 ...

  9. CodeForces 659F Polycarp and Hay

    并查集,$dfs$. 从大的数字往里加,每加一个数字合并一下连通块,判断连通块内数字个数是否够,以及k能不能被当前加入的数字整除.然后$dfs$一下构造答案. #pragma comment(link ...

  10. eclipse中link方式安装插件

    今天需要给eclipse安装svn插件,觉得link方式便于管理于是就打算用这种方式来安装. 我电脑上的eclipse的安装目录是   E:\tools\eclipse   下面开始安装 1.在ecl ...