HTML5每日一练之OL列表的改良

在HTML5中的OL被改良了,为它增加了两个新属性。

start属性:
start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推

  1. <ol start="50">
  2. <li>首页</li>
  3. <li>阅览室</li>
  4. <li>我的</li>
  5. <li>简历</li>
  6. <li>社区</li>
  7. <li>教程</li>
  8. <li>HTML5</li>
  9. <li>专题</li>
  10. <li>酷站</li>
  11. <li>TShirt</li>
  12. <li>作品</li>
  13. <li>学院</li>
  14. </ol>

复制代码

reversed属性:
reversed属性表示将列表进行反转,但是目前还没有任何一款浏览器对其提供支持,在这里就不细说了。



运行一下看看效果:

    1. <ol start="50" reversed>
    2. <li>首页</li>
    3. <li>阅览室</li>
    4. <li>我的</li>
    5. <li>简历</li>
    6. <li>社区</li>
    7. <li>教程</li>
    8. <li>HTML5</li>
    9. <li>专题</li>
    10. <li>酷站</li>
    11. <li>TShirt</li>
    12. <li>作品</li>
    13. <li>学院</li>
    14. </ol>

HTML5每日一练之OL列表的改良

时间: 2024-08-03 16:31:42

HTML5每日一练之OL列表的改良的相关文章

HTML5每日一练之input新增加的URL类型与email类型应用

1.URL类型: <form> <input name="urls" type="url" value="http://www.w3cfuns.com/"/> <input type="submit" value="提交"/> </form> 复制代码 设置此类型后,从外观上来看与普通的元素差不多,可是如果你将此类型放到表单中之后,当点击提交按钮,如果此输入框

HTML5每日一练之视频标签的应用

与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了. video标签:   IE9 FireFox 5.0 Safari 5.5 Chrome 12 Opera 11.5 Mpeg4 √ × √ √ × Ogg × √ × √ √ WebM × √ × √ √ Ogg:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPE

HTML5每日一练之progress标签的应用

progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_progress" max="100"></progress> 复制代码 progress属性:value:表示当前进度max:表示总进度注:value和max属性的值必须大于0,value的值小于或等于max属性的值. 案例: <!DOCTYPE HTML&

HTML5每日一练之details展开收缩标签的应用

details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. detalis标签: 案例1: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conte

HTML5每日一练之figure新标签的应用

igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例. figure用友一个子标签——figcaption标签. 注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置. 案例1:不带有标题的figure元素: <!DOCTYPE HTML> <html> <head> <meta

HTML5每日一练之input新增加的5种其他类型1种标签应用

今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器 1.number类型: <form> <input id="w3cfuns_date" name="w3cfuns.com" type="number"/> <input type="sub

HTML5每日一练之input新增加的六种时间类型应用

今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好,外观取决于浏览器 1.Date类型: <form> <input id="w3cfuns_date" name="w3cfuns.com" type="date"/> <input type=&q

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro

每日一练

<meta name="viewport" content="width=device-width,initial-scale=1.0">修正网页在大部分移动设备上的显示 <meta name="keywords" content="关键字一,php,apache,mysql,linux"> <!--[if lt IE 9]> <script src="http://html