html5学习笔记新增标签理解

H5新增的很多有意思的标签,其中很多标签就是对DIV的细化,赋予了DIV很多意义,但它实际还是相当于DIV,使用这些标签能大大提高代码的可读性,H5也新增了很多媒体标签,用于插入视频、音频等媒体文件。以下HTML5学习笔记原作者 林_Han ,由W3Cschool.cn编辑整理。

1.


放置页面顶部元素(如菜单栏),块级元素

2.


放置网页底部信息(如版权、地址等),块级元素

3.


如其名,article标签就是一个涵盖文章、博客、帖子等内容的容器,块级元素

4.


放置页面的导航链接,块级元素

5.


用于文档中插入图片,实现图文混排效果(注意:figure容器自带margin值),块级元素

6.


的子元素,作为
的第一个或者最后一个元素,为
中的图片添加一个可视标题,块级元素

7.


有意思的一个标签,绘制一个进程条,可设置属性:value(当前值) max(最大值),若无value属性,根据浏览器的不同有可能显示“正在下载...”文本、一个下载的进度条动画,通常与js一起使用,用于动态显示进度

8.


progress标签很像,绘制一个计量条,与progress不同的是,它表示某种计量,适用于温度、容量等,可设置value max min等属性。另,IE不支持该控件

9.


ruby标签用于注释(中文注音或字符),rt内为注释的内容,rp内为浏览器不支持ruby元素时显示的内容

html5学习笔记新增标签理解

10.


定义文档中的节、区域,和navfooterheaderarticle等标签一样,为语义化的DIV,块级元素H5还新增了很多媒体标签,如sourcevideo等,运用蛮简单,可参考W3Cschool

你可能感兴趣的:(html5学习笔记新增标签理解)