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>
<meter min="0" max="100" value="30">30%</meter>
<progress min="0" max="100" value="30"></progress>
2. 音频与视频
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
Ogg Vorbis | | √ | √ | √ | |
MP3 | √ | | | √ | √ |
Wav | | √ | √ | | √ |
| 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
|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放 |
方法 | 属性 | 事件 |
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.setItem("name","David");
localStorage.setItem("age",20);
//删除一条数据
localStorage.removeItem("age");
//删除所有数据
localStorage.clear();
//获取本地数据
var result = localStorage.getItem("name");
console.log(result);
//设置本地数据
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>