H5新特性

H5是最新版的html标准，他的主要目标是提供更多的内容而不依赖外部插件。

新增及废除的元素

1. 语义标签:

   header:头部标签； section：定义一个区域； aside：侧边栏； footer：页面或区域的底部； nav：导航； article：文章； progress：进度条； small：小字号文本； menu：菜单； details：详情； dialog：会话； 这些标签都可以理解为有语义的div；

2. 表单

   html5之前的表单

   标签为input:

    type:text:文本框
   
    type:password:密码框
   
    type:radio:单选按钮   注意以name分组，确保单选关系，也为了后台能成功获取必须有value属性，为了后台获取后的识别（不写统一为on） checked属性,选中控制
   
    type:checkbox:复选框 注意以name分组，确保为一组，也为了后台能成功获取必须有value属性，为了后台获取后的识别（不写统一为on）checked属性,选中控制
   
    type:submit:提交按钮
   
    type:reset:重置按钮
   
    type:button:普通按钮
   
    标签为select:下拉框,name属性在select标签上,multiple:可选多项,子项可以通过optgroup来进行分组,label属性用来定义组名,子项为option标签,selected属性,选中控制,必须有value属性,为了后台获取后的识别
   

   标签为textarea:文本域

   标签为button:按钮

   type:submit:提交按钮

   type:reset:重置按钮

   type:button:普通按钮

   标签为lable:控制文本与表单的关系,for属性指向一个input的id

   html5 新增

   新增表单控件

   1. type:email :email地址类型

      当格式不符合email格式时，提交是不会成功的，会出现提示；只有当格式相符时，提交才会通过,在移动端获焦的时候会切换到英文键盘;

   2. type:tel :电话类型

      在移动端获焦的时候会切换到数字键盘;

   3. type:url :url类型

      当格式不符合url格式时，提交是不会成功的，会出现提示；只有当格式相符时，提交才会通过;

   4. type:search :搜索类型

      有清空文本的按钮

   5. type:range : 特定范围内的数值选择器 属性:min、max、step

   6. type:number : 只能包含数字的输入框

   7. type:color: 颜色选择器

   8. 日期：

              type:datetime        :  显示完整日期(移动端浏览器支持)
      
              type:datetime-local  :  显示完整日期，不含时区
      
              type:time            :  显示时间，不含时区
      
              type:date            :  显示日期
      
              type:week            :  显示周
      
              type:month           :  显示月
      

   新增表单属性

             placeholder  :  输入框提示信息，适用于form,以及type为text,search,url,tel,email,password类型的input
   
             autofocus  :  指定表单获取输入焦点
   
             required  :  此项必填，不能为空
   
             pattern : 正则验证  pattern="\d{1,5}
   
             formaction 在submit里定义提交地址
   
             list和datalist  :  为输入框构造一个选择列表，list值为datalist标签的id
   

3. canvas

   常用方法：

   var c=document.getElementById("myCanvas");//获取元素
   var ctx=c.getContext("2d");//创建context对象
   // ctx.fillStyle="#FF0000";//填充，可以是颜色，渐变，图案
   // ctx.fillRect(0,0,50,50);//绘制矩形（x,y,width,height）
   // ctx.moveTo(10,10)//设置起点（x,y）
   // ctx.lineTo(11,11)//结束坐标（x,y）
   // ctx.stroke();//绘制
   // ctx.beginPath();//开始一条路径，或重置当前的路径
   // ctx.arc(30,30,30,0,2*Math.PI);//绘制圆
   // ctx.stroke();//绘制
   // ctx.font = "30px Arial";//字体
   // ctx.fillText('hello',0,40)//实心填充
   // ctx.font = "30px 华文行楷";
   // ctx.strokeText('world',70,40)//空心填充
   //创建渐变
   // var grd=ctx.createLinearGradient(0,0,200,0);
   // grd.addColorStop(0,"red");
   // grd.addColorStop(1,"white");
   var grd = ctx.createRadialGradient(75,50,5,90,60,100);;
   grd.addColorStop(0,'green');
   grd.addColorStop(1,'white');
   // 填充渐变
   ctx.fillStyle=grd;
   ctx.fillRect(0,0,200,200);
   

4. history

   1. history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，每当url改变时都会生成一条history记录。

   2. 因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。

   3. 出于安全方面的考虑，开发人员无法得知用户浏览过的URL。不过可以在不知道实际URL的情况下实现后退和前进。

   4. api:

      length:历史记录数量；

      state:返回一个表示历史堆栈顶部的状态的值。history.repalceState和pushState(data)中的data值；

      forward（）加载到历史记录中的下一条记录，调用该方法的效果等价于点击前进按钮或调用 history.go(1)；

      back() 方法可加载历史列表中的前一个URL（如果存在）。调用该方法的效果等价于点击后退按钮或调用 history.go(-1)；

      go(number|URL)跳转至某个状态或具体的路径；也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。 go(0)相当于刷新当前页面；

      pushState(javascriptObj,"somestring","url");pushState()需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容：

       状态对象 — 状态对象state是一个JavaScript对象，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。
      
       标题 — 目前忽略这个参数被忽略，可以传一个空字符串。
      
       URL — 该参数定义了新的历史URL记录。会更新至当前的url，但不会刷新页面，新URL不必须为绝对路径。如果新URL是相对路径，那么它将被作为相对于当前URL处理。新URL必须与当前URL同源，否则 pushState()会抛出一个异常。该参数是可选的，不填为当前URL。
       pushState与window.location类似，二者都会在当前页面创建并激活新的历史记录。但pushState可以是与当前URL同源的任意URL 。而设置window.location仅在只修改了哈希值时才不会刷新。pushState可以不改变URL就能创建一条历史记录。
      

      replaceState：🌧与pushState很像，区别在于是修改当前history，而不是新建一条； popstate:当history状态发生变化时触发（默认的前进后退，js中操作go，forword，back等方法时触发，pushState和replaceState不会触发）；如触发的历史记录通过pushState或replaceState对history的state值进行了操作，会返回值的副本，否则为null；通过history.state可以查看当前状态；

5. 存储 h5标准中新增了本地存储，可以将数据存储在本地（本地内存），相对与cookie而言节省了带宽（不会随请求发送），扩大了存储的容量，可以更长时间保存（刷新或关闭浏览器也会继续存在）；

   • localStorage

     

     从图中可以看出localStorage的主要api；

       length：本地存储数据的个数
       setItem(key,value)：向key字段写入value数据
       getItem(key)：去key字段的数据
       removeItem(key)：移除key字段
       clear()：清空该域下的所有数据
       key(i)：获取第i个数据的key
     

   • sessionStorage

     

     可以看出sessionStorage的api基本和localStorage的一致；他们的区别如下：

       sessionStorage为当前页面的本地存储，生存周期为创建至页面关闭；
       localStorage为长期存储，生命周期是至手动清除。
       相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），
       但是不同页面或标签页间无法共享sessionStorage的信息。
       如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
     

6. 多媒体

   Audio(音频)

    属性：
        src:媒体文件路径
        controls:显示控制面板
        autoPlay:自动播放
        loop:循环
   

   Videos（视频）

    属性：
        src:媒体文件路径
        controls:显示控制面板
        autoPlay:自动播放
        loop:循环
        width:宽度
        hright:高度
        poster:封面 默认为视频的第一帧
   

   resource标签

    不同浏览器支持的视频格式不一样，使用<resource>标签 可以添加多个视频格式的文件，供浏览器选择
   

   <video width="320" height="240" controls>
       <resource src="movie.mp4" type="video/mp4"></resource>
       <resource src="movie.rmvb" type="video/mp4"></resource>
   </video>