html5新增标签理解

H5新增的很多有意思的标签,其中很多标签就是对DIV的细化,赋予了DIV很多意义,但它实际还是相当于DIV,使用这些标签能大大提高代码的可读性,H5也新增了很多媒体标签,用于插入视频、音频等媒体文件。

1.<header>

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


2.<footer>

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


3.<article>

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


4.<nav>

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


5.<figure>

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


6.<figcaption>

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


7.<progress>

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


8.<meter>

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

另,IE不支持该控件


9.<ruby> <rt> <rp>

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


10.<section>

定义文档中的节、区域,和nav、footer、header、article等标签一样,为语义化的DIV,块级元素






H5还新增了很多媒体标签,如source、video等,运用蛮简单,可参考W3school

另,简书编辑器好难用!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,082评论 1 25
  • H5新增的很多有意思的标签,其中很多标签就是对DIV的细化,赋予了DIV很多意义,但它实际还是相当于DIV,使用这...
    编程狮W3Cschool阅读 524评论 0 5
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,955评论 25 708
  • 美剧《黑暗物质》中有这么段剧情,六个失忆的人在飞船上依次醒来。奇怪的是他们虽然没了记忆却仍然拥有自己的能力和技术。...
    沧海一木阅读 2,182评论 10 10