html5学习笔记新增标签理解

作者: 编程狮W3Cschool | 来源:发表于2017-03-30 20:16 被阅读95次

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

1.<header>

放置页面顶部元素（如菜单栏），块级元素

放置网页底部信息（如版权、地址等），块级元素

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

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

用于文档中插入图片，实现图文混排效果（注意：figure容器自带margin值），块级元素

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

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

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

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

html5学习笔记新增标签理解

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