HTML5的新特性

（1）新的语义标签和属性

      新的语义化标签：header、footer、nav、section、article、aside、details、time、rudy、mark等

      新的属性：表单新属性、链接新属性、其他（ol新增reversed、meta新增charset、menu新增type和label、style新增scoped、script新增async、html新增manifest、iframe新增sandbox、seamless、srcdoc）

（2）表单的新特性

     新的input type：email、 url、 number、 tel、 search、 range、 color、 date、 month、 week

     新的表单元素：datalist、progress、meter、output

     表单元素的新属性：autocomplete、autofocus、placeholder、multiple、form 

                                          required、maxlength、minlength、min、max、step、pattern

（3）视频和音频

      HTML5提供一个新的标签<video>标签，用于播放视频，该标签默认是一个300*150的inline-block，使用方法

      <video src=”x.mp4”></video>

     HTML5提供一个新的标签<audio>标签，用于播放音频，该标签若没有controls属性，则默认display:none;反之则是一个300*30的inline-block，使用方法

     <audio src=”x.mp3”></video>

（4）Canvas绘图

     https://mp.csdn.net/mdeditor/84587619#

（5）SVG

使用SVG绘制矩形：<rect width="" height="" x="" y=”">

注意：SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能用SVG元素专有的属性

SVG图形的属性不属于HTML DOM标准，只能使用核心DOM方法操作其属性：rect.setAttribute(‘’,’’)

使用JS动态创建SVG元素

         用svg.innerHTML=’’

          用document.createElementNS(‘’,’’),不能使用document.createElement

使用SVG绘制圆形：

使用SVG绘制椭圆：

使用SVG绘制直线：

可以使用 来表示公共属性

<!--group——小组-->

<g stroke-width="50" stroke="#000">

    <line x1="100" y1="100" x2="200" y2="100"></line>

    <line x1="250" y1="100" x2="450" y2="100"></line>

    <line x1="100" y1="200" x2="200" y2="200"></line>

    <line x1="250" y1="200" x2="450" y2="200"></line>

    <line x1="100" y1="300" x2="200" y2="300"></line>

    <line x1="250" y1="300" x2="450" y2="300"></line>

</g>

注意：所有的SVG图形默认只有填充色，没有描边色

使用SVG绘制折线：

使用SVG绘制多边形：

使用SVG绘制文本

提示：传统的标签不能置于SVG内部！同理，SVG的标签也不能放在其他元素内部

哈哈哈哈哈

使用SVG绘制图像 ：

提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真

（6）地图定位

      HTML5新增了获得浏览器所在地的对象

      window.navigator.geolocation{
           getCurrentPosition:fn,//用于获取当前定位信息
           watchPosition:fn,//不停的监视定位信息的改变
           clearWatch:fn//清除监视
      }

      navigator.geolocation.getCurrentPosition(
          function(pos){
             console.log('定位成功');
          },function(err){
             console.log('定位失败');
          }
       )

（7）拖放API

      拖放API——七个事件

      源对象可以触发的事件：dragstart:拖动开始 drag:拖动中 dragend:拖动结束

      目标对象可以触发的事件：dragenter:拖动着进入 dragover 拖动着在目标对象上方 dragleave：拖动着离开 drop：释放

（8）WebWoker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

（9）WebStorage
Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器，

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。
  Web Storage又分为两种： sessionStorage 和localStorage
  sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客户端本地

（10）WebSocket
服务器主动向客户端推送消息，http随时获取服务端最新的消息是需要不断向服务器发送请求，使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。但是轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。在WebSocket网络通信协议中，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种