HTML

H5新元素: 

      1、canvas执行后将会显示一个矩形效果；

 2、header,nav,article,footer:导航/菜单/内容/底部等栏；

 3、details:单击标签时显示和隐藏内容。默认为隐藏，和summary标签一起用时，单击标签时，内容标签会以切换的样式显示。

 4、menu和li列表元素结合使用，用来定义一个列表式的菜单，和menuitem元素时可以呈现树状结构显示，并加入到浏览器菜单上，和command元素使用时用来定义各种类型的命令按钮。

   5、progress元素能够动态的展示下载进度，配上一定时函数。

   6、meter元素实现百分比的效果。

   7、base元素为页面上的所有连接规定默认地址或默认目标。

   8、section元素用于标记文档中的区段或段落。

   9、nav元素用于定义导航链接的部分。

 10、hgroup元素用于对页面的标题进行分组与组合，其用来说明各组群的功能。

 11、ul元素用于在页面中有序地创建列表，ol有一属性start用于设置列表开始的编号。

 12、time元素用于定义时间或日期；

 13、mark在文本中高亮显示某个或几个字符；

 14、cite创建一个引用标记，将文献以斜体显示；

 15、iframe在网页中显示一个文本框架；

 16、object功能是定义一个嵌入的对象。使用data属性用于设置多媒体或插件对象。draggable设置是否允许用户拖动网页中的元素。

表单新标签：

  type=email验邮箱、url验url地址、number验长度、range滚动条设置、file上传文件（date、time、month、week、datetime、datetime-local自动日期和时间输入）、search搜索关键字。

元素新属性:

  1、hidden隐藏、spellcheck拼写检查、contentediable内容可编辑、address显示联系信息、DataTransfer拖曳对象、fieldset设置一个区域 、

  2、legend为fieldset设置标题、input中的autofocus自动获取焦点、pattern="^[a-zA-Z]\W{5,7}$"用正则表达式验证数据、placeholder在文本框显示提示信息、

  3、required为true时用于验证输入框是否为空、autocomplete表单自动完成功能、表单属性重写form+原有属性名、

  4、step为输入域规定合法的数字间隔、multiple在输入域设置多个选择值。用于file和email、datalist用list属性的id绑定到datalist上就可以实现自动提示输入文本、

  5、output实现不同类型信息的输出、keygen在网页中生成一个密钥、在表单中加入在onSubmit时调用的函数用于验证输入的密码;

  6、file类型input元素的accept属性用于过滤上传文件的类型，accept=image/gif；预览上传的图片：var reader=new FileReader()（此为接口）;reader.readAsDataURL(tmpfile);reader.onload=function(e){strHtml=strHtml+"$$(ulUpload).innerHTML="

音频和视频：

audio/video src="name.ogg/.MPEG4/.WebM" width="" height=""   (视频高宽度)
controls="controls"/。

1、controls用于添加播放，暂停，音量控件。

2、允许在video下面添加多个source元素。

3、自动播放，loop="loop"循环播放，poster="图片地址"表示在播放前显示的图片。networkState属性可以返回视频文件的加载状态。error.code返回当前错误值，用于视频出错时显示。

4、timeupdate事件的currentTime和duration属性，动态显示播放的当前时间和总时间量。

绘图：

canvas,步骤:1-javascript使用id来寻找canvas元素；2-创建context对象getCobtext（"id"），它拥有绘图功能。

组合方式显示图形：globaICompositeOperation属性来控制。     

clip()用于切割画布中绘制的图像。               

修改图像像素：getImageData(sx,sy,sw,sh),putImageData(image,dx,dy).                       

绘制文字：fillText()填充的方式,strokeText()方法，描边的方式。

保存，恢复，输出图形：save(),restore(),toDataURL(ImgType).

播放器截图：canvas.width=video videoWidth;canvas.height=videoHeight;    ctx.drawImage(video,0,0canvas width,canvas.height);

使用插件RGraph绘制柱状图/折线图：myGraph=new RGraph.bar/line('canvas-id',[,,,,,,]);

        当公共属性chart.resizable的值设为true时就表示这张图可以使用拖曳来定义大小。

        代码：myGrapg.set('chart.resizable',true)

canvas:是一个新的HTML元素，用来绘制图形，通过使用这个标签，加上JavaScript技术在网页上绘制图像。可绘制线、正方形、圆形、曲线、心形等形状并且可以添加效果，主要是应用坐标点的变换加以函数；还可以对图片就行处理，切割图像、改变像素、截图功能的设置、动态时钟、图像放大镜、动态加载图像、文字转图片。

数据存储：  

    本地数据存储（大小5MB）判断是否支持H5

  （if(('localStorage' in window)&&window['localStorage']!=null)），session存储和离线存储。

    短期保存数据：

              sessionStorage.setItem(key被保存内容的键名,value键值);

              提取保存的数据：sessionStorage.getItem(key)。

    长期保存数据：

              localStorage.setItem(key,value);

              提取保存的数据：localStorage。getItem(key);

              清除保存的数据：localStorage.removeItem(key);

              清空localStorage对象保存的所有数据：localStorage.clear();

              localStorage数据与JSON对象进行转换：JSON.parse(data);

              实体对象转换为JSON格式的文本数据：JSON.stringify(obj);

    内置SQLite数据库:

              1、打开、创建数据库:openDatabase(DBName,DBVerion,DBDescribe,DBSize,Callback());

              2、事务操作：transaction（TransCallback回调函数可写SQL语句,ErrorCallback当SQL语句

                       出错时,SuccessCallback当SQL语句执行成功时调用）；

              3、执行SQL语句的方法： executeSql(strSQL执行的SQL语句，[Arguments]需要的实                            参,SuccessCallback，ErrorCallback);

        例：executeSql（insert into StuInfo values(?,?,?,?)",[1234,"张三"，“男”，“0”]）；

              4、应用：可用于日记式事务提醒系统，订单制作。

 

    Cache Manifest机制：

              1、在线时将对应文件缓存在本地，离线时调用这些本地文件。可新建一个.manifest文件

                来应用离线时的web。用html manifest=tmp.manifest在html中插入后可进行离线

              2、tmp.manifest文件：

                       CACHE MANIFEST

                       #version O.O.O

                       CACHE:   //离线时浏览器需要缓存到本地的服务器资源文件列表

                       #带相对路径的资源文件

                       JS/Js0.j8

                       Css/Css0.css

                       Images/img0.jpg

                       Images/img1.png

                       NETWORK:   //在线时需要访问的资源文件列表

                       #列出在线时需要访问的资源文件

                       Index.jsp

                       Online.do

                       FALLBACK:  //以成对方式列出不访问文件的替补文件

                       #以成对形式列出不可访问文件的替补资源文件

                       /Project/Index.jsp     /BkProject/Index.jsp

更新本地缓存：

    1、window.applicationCache.addEventListener("updateready",function(){},true)

      在onUpdateReady事件中调用swapCache()方法 

    例： window.applicationCache.swapCache()写在function里面，且它是立即更新

    2、直接调用applicationCache对象的 update()方法。

    例：window.applicationCache.update();

检测网络的当前状态：

    1、online在线，window.addEventListener("online",function(){});

    2、offline离线，window.addEventListener("offline",function(){});

WebSocket API: 

    1、跨文档传输数据：（数据接收数据页面的引用对象） otherWindow.postMessage(message（所发送的

                  数据、字符类型）,targetOrlgin（发送数据的URL来源）);

    2、 WebSocket传送数据：创建连接 var  objns=new WebSocket("ws://localhost:3131/....");

                   发送数据 objns.send(dataInfo参数的字符类型);

                   接收数据 objns.onmessage=function(event){}

                   设置状态标志 readyState是连接、打开、关闭和关闭时的状态。

    3、使用jWebSocketTest框架进行通信：

                    1、在页面中加入jWebSocket.js或jWebSocket_min.js的引用。其中

                      jWebSocketjSONClient类的命名空间为jws。

                    2、客户端每隔一段时间自动发送ping令牌来声明自己处于活动状态的功能                           KeepAlive： jWebSocketClient.startKeepAlive(options);

   

Geolocation API:将用户当前地理位置信息共享给信任的站点 

  插入：<script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script>        

  调用的代码格式：navigator.geolocation.getCurrentPosition(successCallback,errorCallback,[Options])

                           参数sucessCallback(position（对象）)为一函数，当成功时调用，用于描述位置的详细数据信息

      参数errorCallback（error）为一函数，当失败时调用，用于根据error.code属性值获取失败的原因

                  纬度获取：  value.coords.latitude;       精度获取：value.coords.longitude ; 

      精准度获取： value.coords.accuracy;     时间戳获取：vaule.coords.timestamp;   

      国家：value.address.country;   省份：vaule,address.region;城市：value.address.city;

Web Workers API:前后台数据交换 

   var objWorker =new Worker("js的url");  实例化一个Worker类对象，创建一个后台进程

   objWorker.postMessage(data);        通过调用postMessage方法，向后台线程发送文本格式的data数据

           obj Worker,addEventListener('message',   function (event) {alert(event.data);}, false); 前台接收后台返回的数据

           self.postMessage(json)                   后台线程加载时返回给前台页面一个JSON对象。