HTML5 新增内容

1. 新增标签

• 音频

<audio>
    <source src=""/>
</audio>

• 视频

<video>
    <source src=""/>
</video>

• 画板

<canvas id="myCanvas">
    您的浏览器不支持canvas标签
</canvas>
<script>
    //先拿到canvas标签
    var cvs = document.getElementById("myCanvas");
    //准备上下文环境
    var cxt = cvs.getContext("2d");
    //绘画矩形
    cxt.fillStyle = "red";
    cxt.fillRect(0,0,200,200);
</script>

• 下拉菜单

<!--以前-->
<select name="" id="">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
</select>
<!--新标签-->
<input type="text" list="data"/>
<datalist id="data">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
</datalist>

• 包含媒介资源的标题

<figure>
    <figcaption>媒介的标题</figcaption>
    <img src="" alt=""/>
    <p></p>
</figure>

• 标题组

<hgroup>
    <h2></h2>
    <h3></h3>
</hgroup>

• 表示标记文字

<p>我是一段文本<mark>标记</mark></p>

• 拖动条

<input type="range"/>

• 度量条

<meter min="0" max="100" value="30">30%</meter>

• 进度条

<progress min="0" max="100" value="30"></progress>

2. 音频与视频

• 音频格式（audio元素支持三种音频格式）

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

• 视频格式（video元素支持三种视频格式）

	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

• audio 与 video 都有的三个属性

autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放

• <video>的方法、属性及事件

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType()	videoHeight	error
	duration	timeupdate
	ended	ended
	error	about
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

3. 本地存储

注：cookie大概4k，本地存储大概5M

• localStorage
  • 　　储存的值是永久保存，若用户不手动删除将长久存在

    //设置本地数据
    localStorage.setItem("name","David");
    localStorage.setItem("age",20);
    //删除一条数据
    localStorage.removeItem("age");
    //删除所有数据
    localStorage.clear();
    //获取本地数据
    var result = localStorage.getItem("name");
    console.log(result);

• sessionStorage
  • 　　生命周期只存在浏览器打开时，关闭则失效

    //设置本地数据
    sessionStorage.setItem("name","David");
    sessionStorage.setItem("age",20);
    //删除一条数据
    sessionStorage.removeItem("age");
    //删除所有数据
    sessionStorage.clear();
    //获取本地数据
    var result = sessionStorage.getItem("name");
    console.log(result);

4. 地理位置

<input type="button" id="btn"/>
<div id="box"></div>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    btn.onclick = function () {
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(success,error,options);
        }else{
            document.write("您的浏览器版本太低");
        }
    }
    function success(position){
        var weidu = position.coords.latitude;
        var jingdu = position.coords.longitude;
        box.innerHTML = "经度：" + jingdu + "纬度：" +weidu;
    }
    function error(error){
        switch (error.code){
            case error.PERMISSION_DENIED:
                box.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                box.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                box.innerHTML = "请求超时."
                break;
            case error.UNKNOWN_ERR:
                box.innerHTML = "An unknown error occurred."
                break;
        }
    }
</script>