首页 > Web开发 > 详细

WEB前端开发学习----8. Html5一些新增标签

时间:2014-12-22 23:56:12      阅读:653      评论:0      收藏:0      [点我收藏+]

先看一张图

技术分享

明显看出Html5的页面布局方式要比html4.0  div+css传统布局模式简洁许多,同时对搜索引擎更加友好。语义化标签的好处就不多说了。

说几个有意思的新增标签:

<meter></meter> 显示一个测量计,可用于温度,气压等

meter演示

<progress><progress/> 显示一个进度条,配合js可以显示动态加载效果。用于加载进度,下载进度等。

progress演示

<details></details>只有chrome支持。配合<summary></summary>和<dd></dd><dt></dt>等可以替代js效果。

details演示

<mark></mark>可以高亮文字

mark演示

<ruby></ruby>给生僻字注音。配合<rt></rt><rp></rp>使用,rt用来注音,rp用来定义当浏览器不支持 "ruby" 元素时显示的内容。

ruby演示

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等),配合<figcaption></figcaption>给figure 添加标题

 

当然还有很多其他的新标签,比如canvas画布,audio,video媒体标签等等。

先记录这些,有时间回来补记。

WEB前端开发学习----8. Html5一些新增标签

原文:http://www.cnblogs.com/cdh-fw/p/4179175.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!