H5简单总结

-webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）
-o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）
-ms-: 微软 ie 斯巴达
-moz-: 火狐 ff


HTML5 的新特性:

a).用于绘画的 canvas 元素
b).用于媒介回放的 video 和 audio 元素
c).对本地离线存储的更好的支持
d).地理定位
e).web workers 多线程
f).新的特殊内容元素，比如 article、footer、header、nav、section
g).新的表单控件，比如 calendar、date、time、email、url、search


1).HTML5的新标签


较为重要的:
媒体标签
声音标签<audio></audio> 定义声音内容。注意添加controls属性
视频标签<video></video> 定义视频内容. 注意添加controls属性
<track> 为诸如 video 元素之类的媒介规定外部文本轨道
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
画布标签<canvas></canvas> 定义图形。可以运用JS画任意图形

<nav>: 导航
<header>： 页眉
<footer>： 页脚
<section>：区块
<article>： 文章
<aside>： 侧边栏
<progress>： 进度条


-------------------------------------------------
<article></article>  定义文章
<aside></aside> 定义页面内容之外的内容
<bdi></bdi> 配合属性dir 的两个值 rtl(反向) ltr(正常)  定义文本方向  
例如 <bdi>to</bdi> go 正常是 to go  <bdi dir=rtl>to</bdi> go 结果是 go to 注意兼容  
<command></command>  定义命令按钮  目前浏览器不支持
<datalist></datalist>定义下拉列表
------------------------
案例:
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
------------------------
<details></details> 定义元素的细节。用于描述有关文档或文档片段的详细信息
<summary></summary> 为 <details> 元素定义可见的标题。
<dialog><dialog>    定义对话框或窗口。
<embed></embed> 定义外部交互内容或插件。
<figure></figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption></figcaption>标签定义 figure 元素的标题（caption）。
<footer></footer> 定义页脚部分。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
<header></header> 定义文档的页眉
<keygen> 定义生成密钥。<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">
<mark></mark> 定义有记号的文本。
<meter></meter> 定义一个度量条.<meter value="3" min="0" max="10">十分之三</meter>  ||  <meter value="0.6">60%</meter> 
<output></output> 定义输出的一些类型。
<progress></progress>定义任何类型的任务的进度
<section></section> 定义章节
<time></time> 定义日期时间
<wbr></wbr> 规定在文本中的何处适合添加换行符。如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 
<nav></nav> 定义导航链接。

2).canvas的常用操作
<canvas id="myCanvas" width="500"  height="500">您的浏览器不支持canvas</canvas> 相当于创建的一个画布
通过JS 首先获取画布的节点  var canvas=document.getElementById("myCanvas");
获取环境/画笔--创建context对象 var cxt=canvas.getContext("2d");
填充颜色 cxt.fillStyle="red";
填充区域 cxt.fillRect(0,0,200,200);
起始 X,Y, 宽 ,高
线的起始点 cxt.moveTo(10,15);//X,Y坐标
线的目标点 cxt.lineTo(0,25);
.
.
.
路径写完之后要进行描边 cxt.stroke(); 描边之后才能浏览器显示路径
线条的样式: 线条粗细 cxt.lineWidth=5; 描边的颜色 cxt.strokeStyle="red";
画圆:
起始路径 cxt.beginPath();
cxt.arc(200,200,100,0,2*Math.PI,false);
圆心坐标 起始弧度 终止弧度 顺时针false  逆时针true
可以在里面加线条  cxt.lineTo(200,200);
闭合路径 cxt.closePath();//如果不是整圆,可以将起始和终止点闭合
填充样式 cxt.fillStyle="yellow";
填充方法 cxt.fill();
自定义填充样式:
获取一块圆形区域  var cre=cxt.createRadialGradient(200,200,10,200,200,100);
小圆圆心 半径  大圆圆心 半径
0~1的阶段  变换过程
cre.addColorStop(0,"red");
cre.addColorStop(0.25,"yellow");
cre.addColorStop(0.5,"blue");
cre.addColorStop(0.75,"pink");
cre.addColorStop(1,"green");
cxt.fillStyle=cre;
cxt.fill();
线性渐变 var grd=cxt.createLinearGradient(0,0,200,100); 起始坐标 宽度 高度
0~1的阶段  变换过程
grd.addColorStop(0,"blue");
grd.addColorStop(0.4,"green");
grd.addColorStop(0.7,"pink");
cxt.fillStyle=grd;
cxt.fillRect(0,0,200,100); 填充到目标区域
画布中也可以放图片 var img=new Image(); new一个图片对象
img.src="aaa.jpg"; 引入图片
img.οnlοad=function(){cxt.drawImage(img,30,30);}//起始坐标 保证图片加载完在画图
想要临时改变改变坐标的起始中心点
首先要临时创建一个异次元空间 cxt.save();
然后改变中心的坐标 cxt.translate(250, 250);
旋转一个角度 cxt.rotate(j * 6 * Math.PI / 180);
.
.
.
需要的线条在cxt.beginPath();cxt.closePath();中画完之后
cxt.stroke();描边
cxt.restore();放置到画布中去
通过这种操作可以将很多个图形拼成一个图形

3).媒体标签的属性


audio元素支持的三种视频格式 Ogg MP3 Wav
属性有
autoplay=autoplay 自动播放 如果出现该属性，则视频在就绪后马上播放。
controls=controls 控制面板 如果出现该属性，则向用户显示控件，比如播放按钮。
loop=loop 循环播放 如果出现该属性，则当媒介文件完成播放后再次开始播放.
preload=preload 预加载 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
src=url
video元素支持的三种视频格式 Ogg MPEG 4 WebM
属性有:
autoplay=autoplay 自动播放 如果出现该属性，则视频在就绪后马上播放。
controls=controls 控制面板 如果出现该属性，则向用户显示控件，比如播放按钮。
loop=loop 循环播放 如果出现该属性，则当媒介文件完成播放后再次开始播放.
preload=preload 预加载 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
poster 视频没播放时显示的缩略图
对象属性
currentSrc 获取当前音频的 URL 地址：var x = document.getElementById("myAudio").currentSrc;
currentTime 设置或返回音频中的当前播放位置（以秒计）
audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。
ended 返回视频的播放是否已结束
error 返回表示视频错误状态的 MediaError 对象。
mediaGroup 设置或返回视频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
paused 设置或返回视频是否暂停。
seeking 返回用户当前是否正在视频中进行查找
volume  设置或返回视频的音量。
duration 返回当前音频的长度（以秒计）
对象方法
1).video:
addTextTrack() 向视频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的视频类型。
load() 重新加载视频元素。
play() 开始播放视频。
pause() 暂停当前播放的视频。
2).audio:
addTextTrack() 向音频中添加一个新的文本轨道
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间
getStartDate() 返回一个新的Date对象,表示当前时间轴的偏移量
load() 重新加载音频元素
play() 开始播放音频
pause() 暂停当前播放的音频
4).地理定位(navigator.geolocation)
<script> 
var x=document.getElementById("demo");
function getLocation(){ 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(showPosition,showError); 
} 
else{
x.innerHTML="Geolocation is not supported by this browser.";
};
};

function showPosition(position){
x.innerHTML=“纬度 : ” + position.coords.latitude + “<br />经度: " + position.coords.longitude; 
} 

function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>

若定位成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

watchPosition() 返回用户的当前位置，并继续返回用户移动时的更新位置
clearWatch() - 停止 watchPosition() 方法
<script>
var x=document.getElementById("demo");
function getLocation() { 
if (navigator.geolocation) { 
navigator.geolocation.watchPosition(showPosition);
} else{
x.innerHTML="Geolocation is not supported by this browser.";
};
}; 
function showPosition(position) {
x.innerHTML=“纬度 : ” + position.coords.latitude + “<br />精度: " + position.coords.longitude; 
};
</script>
5).Web存储
HTML5新提供了两种在客户端存储数据的方法:
localStorage----没有时间限制的数据存储
sessinonStorage--针对一个session的数据存储 浏览器关闭即清除
在之前都是由cookie完成  但是存储数据量小,速度慢,效率不高

创建和访问localStorage/sessionStorage
localStorage.lastname ="Smith"; /sessionStorage.lastname="Smith"; 
对用户访问页面的次数进行计数
if (localStorage.pagecount/sessionStorage.pagecount) { 
localStorage.pagecount=Number(localStorage.pagecount) +1; /sessionStorage.pagecount=Number(sessionStorage.pagecount)+1;
}else { 
localStorage.pagecount=1; /sessionStorage.pagecount=1;
} 
document.write("Visits "+ localStorage.pagecount/sessionStorage.pagecount + " time(s)."); 

websql
创建或打开数据库
Database openDatabase(name,version,displayName,size,callback);
openDatabase() 方法对应的五个参数说明：
1.数据库名称
2.版本号
3.描述文本
4.数据库大小
5.创建回调
第五个参数，创建回调会在创建数据库后被调用。
操作数据库
transaction(function(tx){tx.execSql(sqlquery,[],dataHndler,errorhandler);});
第一个参数为要执行的sql语句
第二个参数为sql语句中的参数的数组
第三个参数为成功时的回调函数
第四个参数为有错误时的回调函数

应用程序缓存
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<!DOCTYPE HTML> 
<html manifest="demo.appcache"> 
<body>这是一些内容 </body>
</html>

<html> 标签中包含 manifest 属性时，就启用了缓存功能
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整的mainfest文件 第一行必需是CACHE MANIFEST
CACHE MANIFEST 
# 2012-02-21 v1.0.0 这是注释
/theme.css 
/logo.gif 
/main.js 


NETWORK:
login.asp 


FALLBACK: 
/html5/ /404.html 
6).多线程编程
在创建 web worker 之前，请检测用户的浏览器是否支持：


if(typeof(Worker)!=="undefined") { 
// 浏览器支持! Web worker ! 
// 一些代码..... } else { 
// 浏览器不支持Web worker.. 
} 
创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。
如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法.
由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：
window 对象
document 对象
parent 对象
EventSource 对象
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onmessage 当错误发生
7).表单input的新类型
type=""
email
url
number
range
search
color
Date pickers(date,month,week,time,datetime,datetime-local)
required 必须填写
8).拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
拖动什么 - ondragstart 和 setData()
<img id="drag1" src="/images/logo.png" draggable="true" οndragstart="drag(event)" width="336" height="69">
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
} 数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
function allowDrop(ev){
ev.preventDefault();
}
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
ondrop 属性调用了一个函数，drop(event)：
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中