新增的特性:
1、用于绘画的canvas(此部分内容另外写一篇,此博不涉及此内容)
2、用于媒介回放的音频audio和视频video
3、对本地存储更好的支持localstorege
4、新的特殊元素(语义化标签):header ,footer,article,side,figure,section,nav..
5、新的表单控件:calendar,date,email,search,time,url
视频:
<video src="视频路径" width="320" height="240" controls="controls">
<source src="" controls="controls">
<source src="" controls="controls">
</video>
支持的视频格式:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
标签属性
方法、属性、事件
浏览器支持情况
音频
<audio controls="controls">
<source src="song.ogg" type="audio/ogg"><!--不同类型的音频文件-->
<source src="song.mp3" type="audio/mpeg">
</audio>
标签属性
浏览器支持及文件格式
拖放
一、首先,为了使元素可拖动,把draggable属性设置为true
<img draggable="true"/>
二、拖动什么 ondragstart 和 setData()
三、放到何处 ondragover
四、进行放置 ondrog
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" οndrοp="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />
</body>
</html
关于拖放这部分有点难理解,我会另外写一篇理解博
地理定位Geolocation
getCurrentPosition方法-返回数据,始终会返回latitude,longitude已经accuracy属性,如果可用则返回下面的属性
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
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="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
存储
HTML5提供了两种在客户端存储数据的新方法
api:
- 保存数据:localStorage.setItem(key,value);
- 读取数据:localStorage.getItem(key);
- 删除单个数据:localStorage.removeItem(key);
- 删除所有数据:localStorage.clear();
- 得到某个索引的key:localStorage.key(index);
localStorage:没有时间限制的数据存储
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉!您的浏览器不支持 Web Storage ...";
}
</script>
</body>
</html>
sessionStorage:针对一个session的数据存储,当用户关闭浏览器时,数据丢失。
综合栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">网站名(key):</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址(value):</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" οnclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名:</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" οnclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
// 载入所有存储在localStorage的数据
loadAll();
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var siteurl = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是:" + siteurl;
}
//将所有存储在localStorage中的对象提取出来,并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>key</td><td>value</td></tr>";
for(var i=0;i<localStorage.length;i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空……";
}
}
</script>
</body>
</html>
.
.
.
web SQL
引用SQL操作客户端数据的api
三个核心方法:
- openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
- executeSql:这个方法用于执行实际的 SQL 查询。
openDatabase打开数据库
var data = openDatabase('mydata','1.0','text','2*1024',callback)
参数依次为:数据库名称,数据库版本号,描述文本,数据库容量,回调。回调会在创建数据库后调用
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) { //执行操作使用database.transaction()函数
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');//查询数据
});
插入数据
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "蔡毛毛")');//INSERT INTO插入数据
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});
删除数据
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
综合栗子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
//插入数据
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "蔡毛毛")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
msg = '<p>数据表已创建,且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
//查询数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
.
.
.
.