《HTML5实战》蜻蜓点水地概述了HTML5新增的的特性和接口，让我们大致了解用HTML5可以方便解决的问题。
书中实例也使得更有一个知性的认识。随意翻阅下，这里给自己做个记录。
1.页面结构
//精简写法 <!DOCTYPE html>,<meta charset='UTF-8'/> //结构含义分明 <section>(分割文档内容),<article>,<aside>,<header>,<footer>,<nav> //图解元素 <figure> <img/>(<br/>) <figcaption>description<figcaption> </figure> //用于存储h1-h6元素 <hgroup><h1...h6></h1...h6></hgroup> //插入媒体元素,类似<iframe> <embed type="jpg | vedio/Quicktime"/> //<area>用于区域超链接，与<map>联合使用 <img src="" usemap="#a"/> <map name='a'> <area coords="x1,y1,w1,h1" href="" shape="rect" hreflang="en" rel="license" meida="screen"/> <area coords="x2,y2,w2,h2" href="" shape="rect" hreflang="en" rel="license" meida="print"/> </map> //微数据自定义语义（利于搜索引擎）: //itemtype自定义词汇表,itemscopt创建条目，itemporp定义条目的属性 <section itemtype="www.data.org/xxx" itemscopt> <p>Name: <span itemprop="name">name1</span></p> <p>Address: <span itemprop="address">address1</span></p> </section>
2.HTML表单
//完成表单验证
//事实上，email只检查'xx@xx'格式,包括url的检查相当简单 <input type="email | url | number(数字微调) | range(滑动条) | time | day"/> <input type="file" multiple/> //多文件上传 <datalist><option value='a'></datalist> //类似select <input type="" pattern=""(正则表达式) placeholder=""(占位符) required/> //CSS伪类 :valid, :invalid, :optional, :required
3.通信
CORS(Cross-Origin Resource Shanre)：跨资源共享，一种浏览器技术标准，定义了Web服务在同源策略下为来自不同域的沙箱脚本提供接口的方法。
window.postMessage可以实现跨源通信；
postMessage被调用后，一个消息事件就被分发到目标窗口上；
该接口有一个message事件，具有data,origin属性；
window.postMessage(message, targetOrigin[, ports]);
window.addEventListener('message', function(e){
if(e.origin !== 'http://www.domain.com'){
return;
}
console.log(e.data);
})
contentWindow返回当下html文档的iframe元素的window属性
服务端发送事件：EventSource用于服务端推送至Web页面
相对iframe和XMLHttpRequest对象方法，能节约移动设备电量
var sourceURL = new EventSource('SeverSideScript.php');
sourceURL.onmessage = function(e){
console.log( e.data.split('
') );
}
消息通道
var sourceURL = new EventSource('SeverSideScript.php');
sourceURL.onmessage = function(e){
console.log( e.data.split('
') );
}
XMLHttpRequest与FormData使用:
var formData = new FormData(document.getElementById('fileInput'));
var xhr = new XMLHttpRequest();
xhr.open("POST",url,false);
xhr.send(formData);
//formData.append()可用于添加值
formData.append('name','Rayner');
formData.append('file',fileName.files[0]); //文件输入类型中取得的文件数据
window.WebSocket
var ws = new WebSocket('ws://localhost/socket');
ws.onopen = function(){
ws.send(message);
ws.close();
}
ws.onmessage = function(e){
console.log( e.data );
}
ws.onclose = function(){}
ws.onerroe = function(error){
console.log( error );
}
4.媒体控制
<video><audio>,都具有的属性：preload,autoplay,loop,contorls,poster
media的常见属性：paused,ended,played,volume(音量),muted(静音),currentTIme; 方法：play(),pause()
5.激动人心的绘图
<canvas id='canvas' width height>不支持canvas的文字说明</canvas>
<script type="text/javascript">
var content = document.getElementById('canvas').getContext('2d'); //获取绘图上下文
//绘图API(包括文本)、变换省略...
</script>
<canvas>的出现使得WebGL，可视化图形库，HTML5游戏等等得到很好的支持，大兴土木~个人觉得超级赞
6.地理定位
geolocation有getCurrentPosition(),watchPosition(),clearWatch()三个方法
后两者的用法跟setTimeout类似
对于无法支持geolocation的设备，可使用geo.js库
关于地理地位，《深入HTML5应用开发》前半部做了详细介绍
navigator.geolocation.getCurrentPosition(success, fail);
function success(position){console.log(position); }
function fail(error){console.log(error);}
//浏览器会询问是否允许使用计算机位置
//success的情况
Geoposition {timestamp: 1394282087530, coords: Coordinates}
coords: Coordinates
accuracy: 30
altitude: null
altitudeAccuracy: null
heading: null
latitude: 23.060268
longitude: 113.38763229999999
speed: null
__proto__: Coordinates
timestamp: 1394282087530
__proto__: Geoposition
7.本地存储
离线存储使用window.localStorage && window.sessionStorage 对象;
数据以键值对形式保存;
localStorage.setItem(key,value); localStorage['key'] = value; localStorage.key = value; localStorage.getItem(key) localStorage['key'] localStorage.key localStorage.removeItem(key); localStorage.clear(); localStorage.length localStorage.key(0)
缓存状态使用window.applicationCache对象，拥有status属性
还有一章‘无障碍访问’没有细看...读者有兴趣可以自行查阅
Tips
查看浏览器是否支持HTML5的某些API，书中也提供了几个网址/工具：
www.caniuse.com ：支持搜索来查询某个特性
www.modernizr.com ：提供下载js库，用来检查、调整代码
www.findmebyip.com ：测试浏览器对HTML5的兼容性
