新增的特性:
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" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="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" onclick="save()" value="新增记录"/> <hr/> <label for="search_phone">输入网站名:</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="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>
.
.
.
.