<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. flexbox备忘

    伸缩项目的父元素: display:flex || display:inline-flex fiex-direction: row(默认) | row-reverse | column | colum ...

  2. 2016 ACM/ICPC Asia Regional Qingdao Online 1002 Cure

    Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  3. mysql版本,根据经纬度定位排序sql

    SELECT id,lng,lat,ROUND(6378.138*2*ASIN(SQRT(POW(SIN((lat1*PI()/180-lat*PI()/180)/2),2)+COS(lat1*PI( ...

  4. 问题记录1:The VMware Authorization Service is not running.

    问题 VMware Workstation cannot connect to the virtual machine. Make sure you have rights to run the pr ...

  5. WPS Office 二次开发简易教程。

    http://bbs.wps.cn/forum.php?mod=viewthread&tid=22004642

  6. sql时间转换函数--备忘

    总是忘记 一.语法: CAST (expression AS data_type) 参数说明: expression:任何有效的SQServer表达式. AS:用于分隔两个参数,在AS之前的是要处理的 ...

  7. CodeForces 670A Holidays

    简单题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #inclu ...

  8. hdu 3006 The Number of set

    二进制的状态压缩.比如A集合里面有{1,5,7}那么就表示为1010001.B集合有{3,4},二进制表示1100.A|B=1011101. 按照这样的思路 可以用01背包 把所有的组合全部求出来. ...

  9. NYOJ 299

    (前言:这是一道关于矩阵快速幂的问题,介绍矩阵快速幂之前,首先看"快速幂"问题. 在前面的博客里有记录到快速幂取模算法,不过总体的思想总是和取模运算混淆在一起,而忽略了" ...

  10. <T> List<T>前面<T>的意思

    先看例子: import java.util.*; class Fruit { public String toString() { return "Fruit"; } } cla ...