<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. 【01背包】HDU 2602 Bone Collector (模板题)

    Problem Description Many years ago , in Teddy's hometown there was a man who was called "Bone C ...

  2. 用R语言 做回归分析

    使用R做回归分析整体上是比较常规的一类数据分析内容,下面我们具体的了解用R语言做回归分析的过程. 首先,我们先构造一个分析的数据集 x<-data.frame(y=c(102,115,124,1 ...

  3. 【转】SQL Server 2008 事件探查器(SQL SERVER Profiler)

    跟踪数据库sql语句的执行情况.例:一个系统,用到了sql server 数据库,这个系统共有500张表,当用户在前台页面做某一个操作时,比如插入,登录等等,我们想知道此刻是在对哪一张表操作,打开事件 ...

  4. ios在项目中打开word文档、ppt等总结

    最近在项目开发中遇到下载附件文档预览需求,在这里总结一下我的实现方法,本文最后会附带我写的demo下载地址 这里我总结了三种实现方法(1)用webView预览(2)通过UIDocumentIntera ...

  5. 【ARM】S3C6410芯片的启动流程

    S3C6410芯片的启动流程 (1) 上电后首先运行iRom(BL0)内的代码,主要完成时钟和看门狗等外围器件的初始化.(2) 拷贝SD卡或者NnadFlash中的前4k(BL1)代码到片内ram(垫 ...

  6. SeleniumServer3.0

    package base.test.demo; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import ...

  7. 使用python修改QQ密保(脚本)

    一.基于以下目的: 1.为了增加对Http协议理解能力,对QQ密保修改的请求进行了分析 2.为了锻炼python的编写能力 3.对web综合知识的理解 花了点时间写了这个脚本,下面介绍脚本的过程 二. ...

  8. put a favicon for github pages

    put the picture "favicon.ico" in the root of your web page repo.then add the following lin ...

  9. ABAP字符串操作 截取字符长度 取位数

    ABAP字符串操作   ABAP對字串的操作方法與其他語言的操作有較大差別,以下是較常用的對字串操作的方法: 1. 字串的連接:CONCATENATEDATA: t1 TYPE c LENGTH 10 ...

  10. JS正则表达式的test()方法检查汉字

    汉字的检查: var reg1=/[^\u4e00-\u9fa5]/g; var text="正则表达式1"; var res1=reg1.test(text);//为true表示 ...