html 基础（3）

一丶H5 介绍

      1.HTML5是HTML最新的修订版本，2014年10月由万维网联

        盟（W3C）完成标准制定。

      2.HTML5的设计目的是为了在移动设备上支持多媒体。

      3. HTML5 是 W3C 与 WHATWG 合作的结果。

            ①W3C 指 World Wide Web Consortium，万维网联盟。

            ②WHATWG 指 Web Hypertext Application Technology Working Group。

            ③ WHATWG 致力于web表单和应用程序，W3C专注于 XHTML 2.0。在2006年双方决定进

                合作，来创建一个新版本的 HTML。

      4.HTML5建立的一些规则：

                ①新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

               ②减少对外部插件的需求（比如 Flash）

                ③更优秀的错误处理

                ④更多取代脚本的标记

                ⑥HTML5 应该独立于设备

      5.HTML5 新特性

                ①更好的页面结构,添加<header><footer>等标签

                ②多媒体， 用于媒介回放的 video 和 audio 元素

                ③图像效果，用于绘画的 canvas 元素，svg元素等

                ④离线存储,对本地离线存储的更好的支持

               ⑤设备兼容特性 ，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以

                   直接与浏览器内部的数据直接相连，

                ⑥连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体

                   验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术。

二丶HTML5 中新增的一些元素

       1. 视频元素

                       ①H5出现之前，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所

                           有浏览器都拥有同样的插件。

                       ②HTML5 规定了一种通过 video 元素来包含视频的标准方法。

                           不需要安装插件，只需要浏览器支持H5即可。

                       ③语法：

                                <video src="" controls=””></video>

                                        src表示视频的地址，可以设置窗口的宽度和高度。

                       ④重要的HTML属性

                                controls：control：如果出现该属性，则显示控件，比如播放按钮。每个浏览

                                                   器中的播放控件都不太一样，但用途都一样，都可以控制开始

                                                   和结束，跳到新位置和调节音量

                                autoplay：autoplay：如果出现该属性，视频在就绪后马上播放。不

                                                  设置autoplay属性，必须是用户单击播放按钮才会播放音频文件。

                                loop：loop：(循环播放)告诉浏览器在音频到达末尾时，再从头开始重新播放.

 为了兼容更多浏览器，这样写更为友好：     

<video>
    <source src="video/xxx.webm" type="video/webm"/>
    <source src="video/xxx.mp4" type="video/mp4"/>
    
    您的浏览器不支持 video 元素。
</video>

        2.音频元素

                      ① 在html5还没确定之前，如果想要在网页上听音乐看视频唯一的办法就是用flash，

               意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈， html5

               audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，

               当然这些能否实现还跟你用的浏览器有关。

                    ② 使用语法
                                <audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">

                                       亲您的浏览器不支持html5的audio标签

                                </audio>

                     ③属性：  

                                src         ： 是歌曲的路径
                                controls  ：播放控制 如果给标签里写了 controls="controls" 那么网页会

                                                   显示audio自带的播放控件，如果没写就不会显示. 

                                loop         ：歌曲循环 在标签里添加该属性歌曲循

                                autoplay ：当歌曲加载后自动播放，但是只有pc端可以实现 移动端不行

                                                  (pc端的浏览器要比移动端的完善很多，对有些属性支持也会

                                                   好很多)

 比较友好的写法：

<audio controls>
  <source src="xxx.ogg" type="audio/ogg">
  <source src="xxx.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

        3.页面结构元素

                    <header>网页头部，

                    <section>网页主体部分，页面的主体

                    <footer>网页底部，文档的版权信息、使用条款的链接、联系信息等等

                    <nav> 常作为导航栏使用