H5新特性

• HTML5： HTML、XHTML 以及 HTML DOM 的新标准

一.语义特性

增加了

,

,

以及

等标签

二.多媒体

用于媒介回放的 video 和 audio 元素

• video视频元素

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
width	无单位	设置宽度
height	无单位	高度
loop	loop	循环播放
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url

 

DOM方法：play()，pause()，load()

属性：currentSrc，currentTime，videoWidth，videoHeight，duration，muted，volume，height，width

• audio音频元素

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

 

• 之间插入的内容是供不支持 audio 元素的浏览器显示的
• audio 元素允许包含多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

三.（drag,drop）拖放

• 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
• 全局属性draggable设置元素为可拖动的

 

• 事件：1.ondragstart （元素开始拖动）， 2.ondragover（规定在何处放置被拖动的数据。ps：默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式，调用事件的 event.preventDefault() 方法。），3.ondrop（放置被拖数据时）
• 方法：event.dataTransfer.setData()（设置被拖数据的数据类型和值）

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);//text为数据类型，id为拖动的数据
}

四.图像效果

1.canvas元素

• canvas：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像；画布是一个矩形区域；canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
• 创建canvas

• 通过JS绘制

var can=document.getElementById("can");
var cxt=can.getContext("2d");  //创建context对象

//方法和属性
cxt.strokeStyle= '';   //设置边框颜色
cxt.fillStyle= ''；  //设置填充颜色
cxt.lineWidth=1; 
cxt.beginPath();  //开始绘制路径
cxt.moveTo(x,y);  //移动点位置
cxt.lineTo(x,y); //绘制线段
cxt.stroke();   //边框
cxt.fill();  //填充

closePath();  //在fill()和stroke()前使用。使和起始点闭合路径

cxt.beginPath();
cxt.rect(x,y,width,height);  //绘制矩形
cxt.fill();

cxt.fillRect(x,y,width,height);   //绘制填充的矩形
cxt.strokeRect(x,y,width,height);  //绘制边框矩形

cxt.lineJoin = "bevel";  //lineJoin属性值为折角bevel或圆角round.
ctx.strokeRect(10,10,100,100);  //只适用于带边框的矩形

clearRect(x,y,width,height);  //清除指定区域的矩形内容

cxt.arc(x,y,radius,startingAngle,endingAngle,anticlockwise);  //绘制圆
//anticlockwise为true,逆时针；反之为顺时针。
//角度为弧度制。按右下左上右的顺序，弧度分别为0pi,0.5pi,1pi,1.5pi,2pi.

var img=new Img();
img.src="flower.png"
cxt.drawImage(img,0,0);  //画布上放置图像

2.svg元素

SVG(Scalable Vector Graphics)：可伸缩矢量图形。用于定义用于网络的基于矢量的图形。 使用 XML 格式描述2D图形的语言，且 图像在放大或改变尺寸的情况下其图形质量不会有损失。

五.离线 & 存储

• 对本地离线存储的更好的支持,localStorage,sessionStotage,Cookies等

六.地理（Geolocation）API

•  支持地理位置的API的浏览器会定义navigator.geolocation
• 方法：getCurrentPosition()  （获取用户当前位置），watchPosition()  （获取并不断监视当前位置，一当有更改就会触发指定函数，clearWatch()  （ 停止监听用户位置）

if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(showPosition);  //获取当前位置
}
function showPosition(position)
{
  x.innerHTML="Latitude: " + position.coords.latitude +
  "
Longitude: " + position.coords.longitude;
}

• getCurrentPosition(showPosition,showError,opts)：若getCurrentPosition()运行成功，则向第一个参数中规定的函数返回一个coordinates对象；第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数；第三个参数为一个配置对象。该对象的属性指定是否需要高精度的位置信息，该位置的过期时间，以及系统在多长范围内获取位置信息。

七.应用程序缓存

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

优点：

1. 离线浏览 - 用户可在应用离线时使用它们
2. 速度 - 已缓存资源加载得更快
3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

  //如需启用应用程序缓存，请在文档的  标签中包含 manifest 属性.并编写manifest文件
...

八.Web Workers

• web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。可以点击、选取内容等等，而此时 web worker 在后台运行。

九.Page Visibility API

1. document.hidden：表示页面是否隐藏的布尔值。（页面在后台标签页或浏览器最小化）
2. document.visibilityState：表示浏览器的状态
3. visibilitychange事件：当文档在可见和不可见间切换时调用