一.兼容性

原则:不破坏现有web,给广泛应用的非标准行为正名,实用至上
W3C官方HTML5标准网址:www.w3.org/TR/html5

非官方新功能: 1. whatwg.org/html     2. blog.whatwg.org

html5验证 :1. validator.w3.org    2.  modernizr.js,插入此js到html5页面,便能检测出浏览器html5兼容情况

html5浏览器支持情况 :  caniuse.com

腻子脚本 : google chrome frame    老浏览器用js   tinyurl.com/polyfills 

现成的正则表达式  regexlib.com

二.语义化

语义化html : 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览功能

分区级语义元素,article  aside  figure  figcaption  footer header hgroup nav section

文本级语义元素,time  output  mark

其它语义标准, ARIA,RDFa,Microformats(microformats.org/wiki,其中hCard和hCalendar最流行,Oomph的js可以丰富其效果),

Microdata(元数据,由html5规范分离)

语义数据被google忽略的原因: 语义数据不是主要内容, 语义元素被css隐藏 ,网站中语义页面过少

查看html纲要

三.表单

水印(站位)文本:  html5  <input id="name" placeholder="Cohlint"> 

首次焦点: 只能给一个input或者textarea添加, <input id="name" placeholder="Cohlint"  autofocus>

验证:<input id="name" placeholder="Cohlint"  autofocus required>  required(必填) optional(选填) valid(有效) invalid(无效) in-range(范围内) out-of-range(超出范围),以上属性可用于css伪类:如input:required:invalid{color:yellow;}

关闭验证: 1.<form id="f" action="sev.asp" novalidate>  2.<input type="submit" value="save" formnovalidate>

正则验证:不必使用^和$,html5自动确保匹配的是字段中完整的值,例:<input type="submit" value="save" patten="[A-Z]{3}-[0-9]{3}">

自定义验证:<textarea id="comments" oninput="validateComments(this)"></textarea>  这里,onInput事件会触发一个名为validateCommnets()的函数,代码自己写,然后调用setCustomValidity()方法,

              function validateComments(input){

                   if(input.value.length<20){

                    input.setCustomValidity("You need to comment in more detail.");

                    } else {

                    input.setCustomValidity("");  //没有错误,清除任何错误消息

                    }

              }

html5几个非验证属性:Spellcheck(true|false) 英文拼写检查;  Autocomplete(on|off) 自动完成 ;Autocorrect autocapitalize(移动设备纠错和自动大小写);Multiple(可为部分input元素添加,比如file,email)

新的input控件: <input type=(email|url|search|Tel|number|range|datetime|date|month|week|time|color)>

新元素<datalist>,可以让文本框显示一个下拉建议列表

进度条和计量条:<progress> <meter>,<progress value="0.25"></progress>   <progress value="50" max="200"></progress>   <meter min="5" max="70" value="28">28 pounds</meter>

元素编辑contentEditable:  <div id="ce" contentEditable>here can edit</div>,不过网页一旦可编辑,元素便不会触发事件

整页编辑designMode: document.designMode="on",可利用iframe实现

改良元素:

      dl     :  术语列表 ====>带有多个名字的列表项,每一项包含一个dt和dd

      cite  :  不能引用作者了,只能引用作品

      small:  专门用来标识"小字印刷体"元素,通常用在免责声明,注意事项,法律规定,同时不允许出现在页面主内容中

文件API:

     FileList对象:用户选择的文件列表,file对象数组

     file对象:属性name表示文件名,不包括路径;lastModifiedDate属性表示文件最后修改日期

     Blob对象: 表示原始二进制数据,提供一个slice方法,访问字节内部原始数据块,size属性表示对象字节长度,type属性表示mime类型,切都以"image/"开头;file对象也集成自blob对象

     FileReader接口:把文件读入内存,提供了一个异步API,有4个方法

          readAsBinaryString(file):将文件读取为二进制码

          readAsText(file,[encoding]):将文件读取为文本

          readAsDataURL(file):将文件读取为DataURL

          aboit():中断读取操作

          6个事件:onabort,onerror,onloadstart(读取开始),onprogress(读取中),onload(成功),onloadend(成功或失败)

拖放API:

     相关事件

     事件                    产生事件的元素                    描述

     dargstart             被拖放的元素                        开始拖放操作

     drag                    被拖放的元素                        拖放过程中

     dragenter            拖放过程中鼠标经过的元素     被拖放的元素开始进入本元素的范围内

     dragover             拖放过程中鼠标经过的元素     被拖放的元素正在本元素范围内移动

     dragleave            拖放过程中鼠标经过的元素     被拖放的元素离开本元素的范围

     drop                    拖放的目标元素                     有其它元素被拖放到了本元素中

     dragend               拖放的对象元素                     拖放操作结束

     DataTransfer对象专门用来存放拖放时携带的数据,它可以被设置为拖动事件对象的dataTransfer属性,有setData("text/plain","你好")方法,getData(DMOString format)方法,clearData(DMOString format)方法,setDragImage(Element image,long x,long y)

四.音视频

缺点:

1.没有版权保护

2.不支持客户端之间音视频传送,比如在线聊天视频

3.不支持精细化控制,比如调整质量,分辨率,缓冲等

4.不支持高性能音频,比如虚拟合成器,音乐观察器

5.不支持动态创建或编辑音视频

<audio src="hello.mp3" controls autoplay loop preload="metadata|auto|none"></audio>

<video src="hello.mp4" controls autoplay loop preload="metadata|auto|none" width="600" height="400"  poster="pre.jpg"></video>

以下三种情况视频窗口会使用poster图片:(1)视频第一帧未加载完毕 (2)preload设置为none (3)没有找到指定视频文件

兼容多种格式:

<audio id="audio3">

<source src="boing3.wav" type="audio/wav">

<source src="beep.mp3" type="audio/mp3">

<p>don't support html5</p> //此行对于不支持html5的浏览器显示

</audio>

js控制:

video.pause();   

video.currentTime = 0; //当前时间

video.duration //视频时间   

video.play();   

video.playbackRate =2; //播放速度

属性:

src,autoplay,preload,poster(video独有),loop,controls,

width与height(video独有),error(error.code=1|2|3|4),currentSrc(只读),buffered(实现TimeRanges接口,已缓存数据TimeRanges.start(0),TimeRanges.end(0)),

readyState(0|1|2|3|4,媒体就绪状态),seeking与seekable(表示浏览器是否正在请求某一特定播放位置的数据),

currentTime,startTime与duration:读取和计算媒体当前播放位置,

played,paused,ended,defaultPlaybackRate与palybackRate

方法:play,pause,load,canPlayType

html5视频播放插件: (1)jquery  www.jplayer.org  (2) vedeojs.com   两个都支持flash后备

web常用音视频格式

mp3           .mp3   audio收费

ogg vorbis  .ogg    audio免费

wav           .wav    audio未压缩,大

H.264        .mp4    video收费

ogg theora  .ogv     video免费,质量稍次

webm        .webm  video免费,google收购推广,有潜力

五.canvas (这个信息量很大,要另外整一篇)

六.数据存储

本地存储 localStorage,长期保存整个网站的数据,大多数浏览器限制在5M以下

会话存储 sessionStorage,临时保存一个窗口或标签页的对象

localStorage[keyName] = data;

sessionStorage["lastUpdateTime"] = data;

sessionStorage.setItem(key,value);

sessionStorage.getItem(key);

localStorage.removeItem("user_name");

localStorage.clear();

localStorage.key(); 取得保存过的所有数据项;

localStorage[keyName] = JSON.stringify(score);  /*用JSON.parse() 转成对象

被保存的数据会自动被转化成string格式,

数据存储发生变化时,同一域下打开的页面会触发window.onStorage 事件,事件属性有key,oldValue和newValue

SQLLite: 

     var db = openDatabase('dbname','dbversion','db descirption','db size');

     db.transaction(function(tx){

          tx.executeSql(sqlquery,[],dataHandler,errorHandler);     

})

更强大的数据库: Indexed DB

七.离线应用

一个MANIFEST文件告诉页面存什么,可以一个页面一个MANIFEST,也可以多个页面共享MANIFEST

safari默认限制5MB,Firefox默认限制50MB,mime类型: text/cache-manifest

<html lang="en"  manifest = "PersonalityTest.manifest">

CACHE MANIFEST(必写,下面列表中页面本身不需要写)

test1.html

test2.html

1112.png

NETWORK:    (不进行本地缓存的资源文件,支持通配符)

Images/logo.png  

FALLBACK:   (备胎,在线/离线,支持通配符)

test3.html  test4.html

*.jpg   test.jpg

applicationCache 对象代表本地缓存,可以通知用户本地缓存中已经被更新,也允许用户手工更新本地缓存.

     onUDateReady事件,通知本地缓存已被更新;swap方法控制如何进行本地缓存更新

八.通信API

短轮询:客户端定期setTimeOut或者setInterval请求;服务器端马上响应

长轮询:客户端定期请求,服务器端先hold住,有数据再响应

服务器发送时间:保持链接,服务器端推, header("Content-Type:text/event-stream"),header("Cache-Control:no-cache")

     格式  id:495\n

             retry:15000\n  (失去连接后,客户端到时把数据和ID一起重发)

             data:Hello World.\n\n

     客户端网页接收到的消息不会包含data:和\n\n,只有其中的消息内容,监听代码如下:

     var source = new EventSource("TimeEvents.php");

     source.onmessage = receiveMessage;

     function receiveMessage(e){

          timeDisplay = e.data ;

     }

跨文档消息传输(眉来眼去剑法)

A页:

window.addEventListener("message",function(ev){

     alert("从"+ev.origin+"那里传过来的消息:\n\"+ev.data);

},false);

otherWindow.postMessage(message,targetOrigin);

B页:

window.addEventListener("message",function(ev){

     alert("从"+ev.origin+"那里传过来的消息:\n\"+ev.data);

     //向主页面发送消息

     ev.source.postMessage("你好,这里是"+this.location,ev.origin)

},false);

Web Sockets 通信

var webSocket = new WebSocket("ws://localhost:8005/socket");  //wss,加密时使用

webSocket.send("data"); //发送

webSocket.onmessage=function(event){  //获取

var data=event.data;

}

事件:onopen,onclose

readyState属性值:  0(CONNECTING)|1(OPEN)|2(CLOSING)|3(CLOSED)

九.Web Workers

后台线程,跑与浏览器无关耗时任务

A页:

var worker = new Worker("worker.js");

worker.onmessage = function(event){

//收到的消息

}

worker.postMessage(message);

B js:

onmessage = function(event){

     var num = event.data;

     var result = 0;

     for (var i=0;i<=num;i++){

          result+=i;

     }

     postMessage(result);

}

可以使用多个子线程

十.地理位置信息 Geolocation API

window.navigator 对象新增geolocation属性,根据位置供应商提供最优选择,IP,卫星定位等

void getCurrentPosition(onSuccess,onError,options);  //获取用户地理位置

int watchPosition(onSuccess,onError,options);  //持续获取用户地理信息位置,返回watchid

void clearWatch(watchid); //停止获取

获取成功后,可得position对象,有以下属性

latitude(纬度),altitude(经度),accuracy(获取到的纬度或经度的精度,以米为单位),altitudeAccurancy(海拔高度精度),heading(设备前进方向),speed(设备前进速度),timestamp(获取地理信息时的时间)

十一.历史管理

pushState()方法,可以改变浏览器地址url,不刷新页面,感觉用处不大.