html5整理
HTML5新的Input类型
输入类型：color,data,datetime,datetime-local,email,month,number,range,search,tel,time,url,week
HTMLWeb存储localStorage
没有时间限制的数据存储
以键/值对的形式表示
setItem(),getItem()
localStorage.name="Smith";
sessionStorage
当用户关闭浏览器窗口时，数据会被删除
以键/值对的形式表示
setItem(),getItem()
sessionStorage.setItem('name','smith');
WebSQL数据库（略）
核心方法：
openDatabase使用现有的数据库或新建的数据库创建一个数据库对象
transaction这个方法使我们能够控制一个事务，以及基于这种情况执行提交或者回滚
executeSql这个方法用于执行实际的SQL查询
一个完整实例
<!DOCTYPEHTML>
<html>
<head>
<scripttype="text/javascript">
vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);
varmsg;
db.transaction(function(tx){
tx.executeSql('CREATETABLEIFNOTEXISTSLOGS(idunique,log)');
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(1,"菜鸟教程")');
tx.executeSql('INSERTINTOLOGS(id,log)VALUES(2,"www.runoob.com")');
msg='<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML=msg;
});
db.transaction(function(tx){
tx.executeSql('SELECT*FROMLOGS',[],function(tx,results){
varlen=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>
<divid="status"name="status">状态信息</div>
</body>
</html>
复制代码
应用程序缓存（略）
如需启用应用程序缓存，请在文档的标签中包含manifest属性：
<!DOCTYPEHTML>
<htmlmanifest="demo.appcache">
...
</html>
复制代码
Manifest文件
CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存
NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）
完整的Manifest文件实例
CACHEMANIFEST
#2012-02-21v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html//offline.html
复制代码
WebWorkers
webworker是运行在后台的javascript,独立于其他脚本，不会影响页面的性能
functionstartWorker(){
if(typeof(Worker)!="undefined"){
if(typeof(w)=="undefined"){
w=newWorker('demo_worker.js');
}
w.onmessage=function(event){
document.getElementById('result').innerHTML=event.data;
};
}
}
functionstopWorker(){
w.terminate();
w=undefined;
}
复制代码
/*demo_worker.js*/
vari=0;
functiontimedCount(){
i=i+1;
postMessage(i);
setTimeout('timedCount()',500);
}
timedCount();
复制代码
服务器发送事件（SSE）
Server-Sent事件指的是网页自动获取来自服务器的更新。
WebSocket
WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
在WebSocketAPI中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。
当你获取WebSocket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。
varSocket=newWebSocket(url,[protocal])
WebSocket属性
Socket.readyState
0-表示连接尚未建立
1-表示连接已建立，可以进行通信
2-表示连接正在进行关闭
3-表示连接已经关闭或者连接不能打开
WebSocket事件
Socket.onopen-连接建立时触发
Socket.onmessage-客户端接收服务端数据时触发
Socket.onerror-通信发生错误时触发
Socket.onclose-连接关闭时触发
WebSocket方法
Socket.send()
Socket.close()
更多精彩请戳：
解放号平台：https://www.jointforce.com?f=JF_ZY_YL12
解放号论坛：http://bbs.jointforce.com
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...