《HTML5实战》蜻蜓点水地概述了HTML5新增的的特性和接口,让我们大致了解用HTML5可以方便解决的问题。
书中实例也使得更有一个知性的认识。随意翻阅下,这里给自己做个记录。
1.页面结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//精简写法 <!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表单
1
2
3
4
5
6
|
//完成表单验证<br>//事实上,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属性;
1
2
3
4
5
6
7
|
window.postMessage(message, targetOrigin[, ports]); window.addEventListener( ‘message‘ , function (e){
return ;
} console.log(e.data); }) |
contentWindow返回当下html文档的iframe元素的window属性
服务端发送事件:EventSource用于服务端推送至Web页面
相对iframe和XMLHttpRequest对象方法,能节约移动设备电量
1
2
3
4
|
var
sourceURL = new
EventSource( ‘SeverSideScript.php‘ );
sourceURL.onmessage = function (e){
console.log( e.data.split( ‘\n‘ ) );
} |
消息通道
1
2
3
4
|
var
sourceURL = new
EventSource( ‘SeverSideScript.php‘ );
sourceURL.onmessage = function (e){
console.log( e.data.split( ‘\n‘ ) );
} |
XMLHttpRequest与FormData使用:
1
2
3
4
5
6
7
|
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
1
2
3
4
5
6
7
8
9
10
11
12
|
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 ); } |
6.地理定位
geolocation有getCurrentPosition(),watchPosition(),clearWatch()三个方法
后两者的用法跟setTimeout类似
对于无法支持geolocation的设备,可使用geo.js库
关于地理地位,《深入HTML5应用开发》前半部做了详细介绍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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