HTML5
一.video
1.目的：减少外部插件的需求，如flash。
2.视频格式：Safari，IE9+只支持MPEG4格式。
3.属性：（1）width，height：宽，高。（2）src：视频路径（3）autoplay：视频加载完自动播放。（4）preload：视频在页面加载完自动播放，有autoplay属性会忽略。（5）controls:显示控件，如播放按钮（6）loop：循环播放
4.方法：（1）pause（）：暂停（2）play（）：播放
二.audio
1.目的：减少外部插件的需求，如flash。
2.音频格式：safria:只能是wav和MP3格式；IE9+：只能是MP3格式
3.属性：（1）src：音频来源。（2）loop：循环播放。（3）autoplay：就绪后播放。（4）preload：页面加载完播放，会忽略autoplay属性。
三.拖放
<script type="text/javascript">
function allowDrop(e) {
<!-- 如果需要设置循序放置，必须阻止对元素的默认处理方式。 -->
e.preventDefault();
}
function drag(e) {
<!-- dataTransfer.setData()方法：设置被拖数据的数据类型和值 -->
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e) {
e.preventDefault();
<!-- dataTransfer.getData("Text")方法获得被拖的数据。
该方法将返回在setData（）方法中设置为相同类型的任何数据。 -->
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
<body>
<!-- ondragover事件规定在何处防止被拖动的数据 -->
<!-- ondrop事件：进行放置 -->
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"
style="border: 1px solid red;height: 100px;width: 1000px"></div>
<!-- 设置元素为可拖动 draggable="true"-->
<!-- 拖动什么：ondragstart事件：拖动什么 -->
<img src="D07B04C3-868E-4EA1-AD0B-0ECB0D45AC59.png" id="drag1"
draggable="true" ondragstart="drag(event)">
</body>
四.canvas
<!-- 创建canvas元素 -->
<canvas id="myCanvas" width="1000" height="1000" style="border: 1px solid red">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c= document.getElementById("myCanvas");
<!-- 创建context对象 -->
var context = c.getContext("2d");
<!-- 绘制红色矩形 -->
context.fillStyle = "red";
context.fillRect(100,100,150,75);//fillRect方法规定了形状，位置和尺寸。从左上角开始（0，0）位置绘制150*75的矩形
<!-- 绘制线条 -->
context.moveTo(10,10);
context.lineTo(150,50);
context.lineTo(10,50);
context.stroke();
<!-- 绘制圆形 -->
context.beginPath();
context.arc(150,250,25,0,Math.PI*2,true);
context.closePath();
context.fill();
<!-- 绘制渐变色 -->
var grd = context.createLinearGradient(0,0,175,10);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
context.fillStyle=grd;
context.fillRect(0,300,200,400);
<!-- 放图片到画布 -->
var img = new Image();
img.src="D07B04C3-868E-4EA1-AD0B-0ECB0D45AC59.png";
context.drawImage(img,600,600);
</script>
五.svg
1.优点：
(1)可升缩矢量图
(2)使用xml格式定义图片
(3)矢量图，不会失真。
(4)可通过文本编辑器来创建和修改
(5)可被搜索、索引、脚本化或压缩
(6)可直接嵌入HTML5
六.Geolocation
<body>
<button onclick="getLocation()">获取您的坐标</button>
<div id="text">nihao</div>
</body>
</html>
<script>
var x = document.getElementById("text");
function getLocation() {
console.log(navigator.geolocation);
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else {
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude:" +position.coords.latitude+
"<br/>Longitude:"+position.coords.longitude;
}
function showError(error) {
switch (error.code){
case error.PERMISSION_DENIED:x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
七.离线存储
1.localStorage:没有时间限制的数据存储。
2.sessionStorage：针对一个session的数据存储。
之前用的cookie不适合大量数据的存储，且它们由每个对服务器的请求来传递。
<script type="text/javascript">
//计数，关闭页面还会增加
if (localStorage.pageCount){
localStorage.pageCount = Number(localStorage.pageCount)+1;
}else{
localStorage.pageCount = 1;
}
document.write("Visits" + " "+ localStorage.pageCount +" " + "time(s).");
</script>
<script type="text/javascript">
//计数，关闭页面计数重置
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
八.应用程序缓存
1.除了IE都支持该属性
2.减少服务器负载
九.表单控件：
1.autocomplete:当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
2.list:规定输入域datalist.
Webpage: <input type="url"list="url_list"name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
