html5基礎知識提綱

最近間插着看了<<HTML.5與CSS.3權威指南>>和<<HTML5秘籍>>兩本書,將重要知識點記錄下以便沉淀

 

一.兼容性

原則:不破壞現有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可以豐富其效果),

http://microformats.org/code/hcard/creator  hcardCreator

Microdata(元數據,由html5規范分離)

google rich snippets:檢測提供的頁面,展示google從中提取出來的語義數據, (支持RDFa,微格式,微數據等, tinyurl.com/google-richsnippets, www.google.com/webmasters/tools/richsnippets)

語義數據被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后備

字幕插件: VideoSub  www.storiesinflight.com/js_videosub/     LeanBack Player dev.mennerich.-name/showroom/html5_video

 

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,不刷新頁面,感覺用處不大.