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=”"></rect>

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

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

   使用JS动态创建SVG元素

             用svg.innerHTML=’’

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

  使用SVG绘制圆形：<circle r=”” cx=”” cy=””></circle>

  使用SVG绘制椭圆：<ellipse rx="200" ry="50" cx="200" cy="50" fill="#0f0" fill-opacity=".2" id="e1"></ellipse>

  使用SVG绘制直线：<line x1="0" y1="0" x2="600" y2="400" stroke="#f00" stroke-width="2px"></line>

可以使用<g></g>来表示公共属性  
<svg width="600" height="400">

    <!--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绘制折线：<polyline points="100,100 400,100 150,350 250,0 350,350 100,100" stroke="#000" fill-opacity="0"></polyline>

   使用SVG绘制多边形：<g  stroke="#030">     <polygon points="100,100 300,200 500,100"></polygon>     <polygon points="100,150 100,300 500,300 500,150 300,230 100,150"></polygon> </g>

   使用SVG绘制文本

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

 <text alignment-baseline="before-edge" font-size="40" x="100" y="200">

    哈哈哈哈哈

 </text>

    使用SVG绘制图像 ：<image xlink:href="../img/22.png" width="400" height="200"></image>

    提示：在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

（9）WebStorage

（10）WebSocket