html5学习笔记新增标签理解

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

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元素时显示的内容

html5学习笔记新增标签理解
html5学习笔记新增标签理解

10.<section>


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

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

推荐阅读更多精彩内容

  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 4,124评论 1 25
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • H5新增的很多有意思的标签,其中很多标签就是对DIV的细化,赋予了DIV很多意义,但它实际还是相当于DIV,使用这...
    林_Han阅读 658评论 0 0
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,654评论 32 459
  • HTML4的元素嵌套规则 在我们的印象中会有这样的嵌套规则: 内联元素不能嵌套块元素 元素和 元素不能嵌套块元素 ...
    zpeople阅读 1,108评论 0 1