HTML5以及新增标签

HTML5:

HTML5是W3C于2014年正式发布(进入Recommentdation阶段),是HTML的第五个版本,是对原有标准的补充和拓展,我们经常会听到有人会说,“你会H5吗 ?” 这是不严谨的,因为H5是一个标准而非一种技术,狭义上讲HTML5就是第五代HTML的第五个标准。广义上讲,HTML5也包括CSS,JavaScript的部分内容,它希望减弱浏览器对于插件的需求,构建更加多样的网站和应用程序。按照功能,广义上的H5包括了

  • 标签语义化
  • 连通性
  • 离线和存储
  • 多媒体
  • 2D 3D绘图&&效果
  • 性能&&集成
  • 设备访问,Device Access
  • 样式设计

本文着重于标签语义化的新增标签部分。

新增标签:

脚本方面

<template></template>:   通过JavaScript运行时实例化内容的容器;

章节

        <section></section>:     定义文章的一个章节。

         <nav></nav>:     定义只包含导航链接的章节。

         <article></article>:    定义可以独立于内容其余部分的完整独立内容快。

         <aside></aside>:     定义和页面内容关联度较低的内容,如果被删除剩下的仍然合理。           

         <header></header>:     定义页面或者章节的头部,通常包含页面标题,logo,导航性目录。

         <footer></footer>:     定义页面或者章节的尾部,通常包括版权信息,法律信息链接,反馈用的地址。

         <main></main>:     定义文档主要或者重要的内容。

组织内容

        <figure></figure>:    代表一个和文档有关的图例。

        <figcaption></figcaption>:       代表一个图例的说明。

     文字形式

        <data></data>:   关联一个内容的机器可读的等价形式。    

        <time></time>:    代表日期和时间值,机器可读的等价形式通过datetime属性指定。    

        <mark></mark>:     代表一段需要被高亮的引用文字。    

        <ruby></ruby>:      代表ruby注释标记的文本,如中文汉字和拼音。    

        <rt></rt>:        代表ruby注释,如中文拼音。   

        <rp></rp>:    代表ruby注释两边的额外插入文本,用于不支持ruby的浏览器提供友好的注释显示。

        <bdi></bdi>:   代表脱离父元素文本方向的一段文字,它允许嵌入一段不同或未知文本方向格式的文本。        

        <wbr></wbr>:     代表建议换行,当文本太长需要换行时将在此处添加换行符。    

嵌入内容

        
        <embed></embed>:       代表一个嵌入的外部资源,如应用程序和交互内容。

        <video></video>:        代表一段视频及其视频文件和字幕,并提供播放视频的用户界面。

        <audio></audio>:       代表一段声音或者音频流。

        <source></source>:    为audio或者video媒体元素提供媒体源。

        <track></track>:    为audio或者video提供文本轨道(字幕)。

        <canvas></canvas>:    代表位图区域,可以通过脚本在它上面实时呈现图形,如图标游戏绘图等。

表格

        <datalist></datalist>:      代表提供给其他控件的一组预定义选项。

        <keygen></keygen>:     代表一个密钥对生成控件。

        <output></output>:        代表计算值。

        <progress></progress>:     代表进度条。

        <meter></meter>:     代表滑动条。

交互元素

        <details></details>:     代表一个用户可以点击额外信息或者控件的小部件。

        <summary></summary>:     代表的details的综述或者标题。

        <menuiteam></menuiteam>:      代表一个用户可以点击的菜单项。

        <menu></menu>:     代表菜单。   

兼容情况:

虽然HTML5已经正式的发布了但是仍然存在着兼容问题,标准发布由W3C组织来发布的,但是执行情况是浏览器厂商决定,一般来说,对于W3C标准支持情况最好的浏览器是Chrome,最坏的是IE。在这里引用H5评测网站HTML5test的数据,满分是555分,

貌似最新的Edge也不错哦。。。 如果想更加详细的查询全部兼容情况可以参考  http://mobilehtml5.org/

猜你喜欢

转载自blog.csdn.net/qq_41995398/article/details/103131347
今日推荐