HTML5學習碎片
春節在家讀了兩本介紹HTML5的書：《HTML5 Up and Running》和《Pro HTML5 Programming》，得益于Kindle的便捷，一邊讀一邊標注了一些內容，隨感覺而標記，不成體系，所以稱之為“碎片”，記錄于此作為存檔。
- 瀏覽器支持情況檢測
- Modernizr是一個開源的JavaScript腳本庫，可以用它來檢查瀏覽器對HTML5和CSS3的支持情況。
- IE是個很有意思的瀏覽器，它只識別它的DOM字典里存在的標簽。如果你的HTML中包含它不認識的標簽，只需要用JavaScript創建一下，IE就會把該標簽加到它的DOM字典中，那么也就可以識別該標簽并為它應用樣式了。例如，讓IE支持article標簽的方法是：
根據這個原理，有人寫了一段腳本來讓老版本的IE支持HTML5標簽：
document.createElement(“article”)
或者直接在線引用這段腳本：<!--[if lt IE 9]> <script> var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]—><!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
- ORIGIN（源）
- HTML5通過引入origin這個概念來明確和細化了域安全性，origin是由scheme（協議）、host（域名）和port（端口）組成的。譬如http://windstyle.cn和https://windstyle.cn是不同的origin，但http://windstyle.cn和http://windstyle.cn/example.html是同一origin。
- DOCTYPE
- Web頁面有幾種不同的渲染模式：
- Standards mode
- Almost Standards mode
- Quirk mode
- DOCTYPE就是用來告訴瀏覽器應該用哪種模式來渲染頁面，符合HTML5標準（Standards mode）的DOCTYPE很簡單：
<!DOCTYPE HTML>
- 沒有DOCTYPE或者聲明了不同的DOCTYPE會導致瀏覽器以Almost Standards mode或Quirks mode來渲染頁面。《HTML5 Up and Running》的作者說，目前至少有5種DOCTYPE ，它們會觸發瀏覽器的almost standards mode和至少73種quirks mode，光IE8就支持4種呈現模式（見下圖），于是作者在書中要大喊：“Kill it. Kill it with fire!”。
- Web頁面有幾種不同的渲染模式：
- 文檔大綱
- 在HTML4中，創建文檔大綱的唯一方法是使用<h1>到<h6>這幾個標簽，為了確保大綱只有一個根節點，頁面中就不能多次使用<h1>。而在HTML5中，每個section都可以包含自己的<h1>，這并不會影響大綱結構。
- <time>標簽
- 用法示例：
<time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time>
- pubdate特性有兩個含義，如果<time>標簽位于<article>標簽中，pubdate表示該article的發布日期，否則，pubdate表示整個文檔的發布日期。
- 用法示例：
- <canvas>標簽
- 設置<canvas>標簽的寬度或高度會清除它的內容，并且還會將繪圖上下文中的所有屬性重設為默認值。IE目前上不支持<canvas>，可以使用ExplorerCanvas這個開源的JavaScript腳本庫來間接實現畫布API。
- 向context.drawImage方法傳遞img對象可以將img表示的圖片繪制在畫布上，但img所引用的圖片必須完全加載完畢，否則會拋出異常。
- 如果向context.drawImage方法傳遞video對象，那么將會在畫布上繪制視頻的當前幀畫面。
- context.getImageData方法可以獲取畫布的像素數據，但如果畫布上繪制了來自不同origin的圖片時，調用此方法會拋出異常。
- Web Storage
- Cookie的缺點：
- 每次HTTP請求都會包含Cookie，會降低請求速度；
- Cookie數據未加密，在不使用SSL的情況下不安全；
- Cookie的尺寸限制為4KB
- LocalStorage和sessionStorage的數據以字符串鍵值對的形式儲存，他們的區別如下：
- 生存周期不同：當包含頁面的選項卡或者窗口關閉后，sessionStorage中存儲的數據就清空了，而LocalStorage中存儲的數據依然存在；
- 數據可見度不同：sessionStorage中存儲的數據只有當前頁面可以訪問，而LocalStorage存儲的數據對相同origin的所有頁面都可見。
- Web Storage事件會在相同origin的所有頁面上觸發，無論該頁面是否對Web Storage進行過操作，所以可以利用這些事件來進行頁面之間的通信。
- Cookie的缺點：
- Offline Web Application
- Offline Web Application需要一個離線清單文件（*.manifest），該文件可以位于服務器上的任何位置，但必須以text/cache-manifest為內容類型提供。
- Offline Web Application中所有頁面的<html>標簽中都要添加指向該清單文件的manifest特性。
- 清單文件示例：
CACHE MANIFEST
FALLBACK: / /offline.html
NETWORK: * - 無論當前是否在線，CACHE MANIFEST中的所有資源都會被緩存起來；NETWORK節表示“白名單”，該節中的所有資源都不會被緩存下來，只能在線獲取；FALLBACK則為那些無法獲取的資源提供一個備用路徑。
- window.applicationCache對象包含許多事件
- 當瀏覽器發現<html>標簽中的manifest特性時，就會觸發checking事件；
- 如果瀏覽器之前從未見過此清單文件：
- 觸發downloading事件，然后開始下載清單中的資源。
- 下載過程中會觸發progress事件，該事件包含了已下載文件的數量和待下載文件的數量等信息。
- 清單中的資源都下載完畢后，會觸發cached事件，這表明該Offline Web Application已經可以在離線使用了。
- 如果瀏覽器之前訪問過包含同一清單文件的頁面，就會去檢查該清單是否發生了變化：
- 如果沒有變化：觸發noupdate事件；
- 如果發生了變化：會觸發downloading事件，當清單中的資源都下載完畢后，會觸發updateready事件，這表明該Offline Web Application已經更新成功。但瀏覽器仍然在使用舊版本，想要切換到新版本，需要手工調用window.applicationCache.swapCache()方法。
- 期間如果發生了錯誤，哪怕只有一個文件下載失敗這樣的錯誤，都會導致整個緩存過程失敗，并會觸發error事件，最要命的是這個事件并不會告訴你具體錯在哪里。
- window.applicationCache.status指示了緩存的狀態：
- 0：UNCACHED
- 1：IDLE
- 2：CHECKING
- 3：DOWNLOADING
- 4：UPDATEREADY
- 5：OBSOLETE
- 可以調用window.applicationCache.update()方法來向瀏覽器請求更新緩存。
- Web Server應當通過一些HTTP headers（譬如Expires和Cache-Control）來將文件的一些信息告訴瀏覽器。如果瀏覽器通過HTTP headers發現清單文件過期，就會向服務器請求新版本并下載它。此時瀏覽器會將服務器上一次通過HTTP headers發送給它的last-modified時間發回給服務器，如果服務器發現發現清單文件在該日期之后并沒有更改過，就會返回304狀態碼，表示“Note Modified”。如果發生了變化，就會返回200狀態碼以及新文件的內容（當然也會包含Cache-Control和新的last-modified headers）；
- 所以每次修改了需要緩存的文件之后，記著也要修改清單文件，這樣服務器才會認為它更新了版本。簡單的方法是在清單文件中加一行版本注釋，每次修改注釋中的版本號即可。
- 當瀏覽器以聯機方式工作時，navigator.onLine的值為true。
- Microdata
- Microdata用一些具有范圍概念的名值對來詮釋DOM。
- 在HTML5中，<meta>標簽可以在任何地方使用，不局限于<head>中。
- Google Rich Snippets tool可以提取頁面中的Microdata，并以“Google See”的形式展現出來。
- Selector API
- 新增加的和CSS Selector一樣的Selector API，檢索更加簡單：
querySelector("input.error");//返回第一個class為error的input標簽querySelectorAll("#results td");//檢索td中所有id為results的標簽
- 新增加的和CSS Selector一樣的Selector API，檢索更加簡單：
- 定位
- 新增加的定位服務會返回以下幾種錯誤：
- PERMISSION_DENIED，錯誤代碼為1，用戶不允許瀏覽器訪問位置信息；
- POSITION_UNAVAILABLE，錯誤代碼為2，獲取位置失敗；
- TIMEOUT，錯誤代碼為3，超時；
- UNKNOWN_ERROR，錯誤代碼為0，發生了其他錯誤，可以檢查message特性來獲取具體信息
- 新增加的定位服務會返回以下幾種錯誤：
- 跨源
- XMLHttpRequest Level 2允許使用Cross Origin Resource Sharing（CORS）來進行跨源的HTTP請求。請求需要包含一個Origin header，用于告訴服務器請求從何而來，此header被瀏覽器保護，應用的代碼無法更改它的值。Origin header和以前的sic header不同之處在于后者是完整的URL。
- 除了瀏覽器要自動發送Origin header信息之外，服務器端也需要支持CORS。 檢查瀏覽器是否支持XMLHttpRequest Level 2的方法是檢查XMLHttpRequest 是否包含withCredentials屬性。
- XMLHttpRequest Level 2的progress事件包括：
- loadstart
- progress
- abort
- error
- load
- loadend
- WebSocket
- 新增加的WebSocket API用于連接遠程主機，它大幅度減少了不必要的HTTP header，從而提高連接了速度。
- ws://和wss://協議分別表示WebSocket連接和安全WebSocket連接。
- WebSocket API也需要服務器專門支持。
- 當瀏覽器請求WebSocket URL時，服務器會回發headers來完成WebSocket握手，WebSocket握手響應的第一行內容必須是下面的格式：
HTTP/1.1 101 WebSocket Protocol Handshake
完成握手后，客戶端和服務器端之間就可以隨時發送消息了。 - WebSocket對象包含以下事件：
- open：當連接建立時觸發
- close：當連接關閉時觸發
- message：當收到消息時觸發
- FORM API
- HTML5的input標簽增加了一個placeholder特性，placeholder的值只能包含文本，不可以包含HTML標簽。
- input標簽的list特性和datalist標簽結合起來可以為input標簽提供一個備選列表。
- 新增加的valueAsNumber函數可以將控件的值從文本轉換為數字，而且還可以將控件的值設置為數據。
- 如果input控件設置了required特性，那么該控件必須包含值，否則包含它的Form就無法被提交。
- 所有Form控件都包含validity屬性（ValidityState對象），該屬性包括8種可能的驗證錯誤：
- valueMissing：缺少必需值（包含required特性的input標簽缺少值）
- typeMismatch：值的類型不匹配（email、url等類型校驗失敗）
- patternMismatch：值的格式不匹配（input標簽設置了pattern特性，但值沒有匹配該pattern。開發人員可以使用pattern來更加靈活地驗證Form控件的值）
- tooLong：值超出了控件允許的長度（超出了maxLength特性的值）
- rangeUnderflow：值小于設定的最小值（值小于min特性的值）
- rangeOverflow：值大于設定的最大值（值大于max特性的值）
- stepMismatch：值不符合控件的min、max和step特性綜合計算的結果（比如min="0" max="100" step="5"，那么值為6時就會導致stepMismatch）
- customError：表示又代碼產生的自定義錯誤，調用控件的setCustomValidity(message)方法可以設置customError，向該方法傳遞空字符串會清空customError。
- 如果Form控件有可能進行上述任何一項驗證，那么它的willValidate屬性會返回true。
- 調用控件的checkValidity方法也可以進行對控件的值進行驗證。 無論是提交Form還是調用checkValidity方法，如果Form驗證失敗，都會觸發invalid事件。
- 可以通過控件的validationMessage屬性來訪問控件的驗證失敗消息。想要阻止瀏覽器顯示錯誤消息，可以在invalid事件中調用參數evt的preventDefault方法。
- 設置Form的noValidate特性可以使其不去驗證輸入的有效性，關閉驗證的更簡單的方法是設置提交按鈕formNoValidate特性。
- Web Workers
- HTML5 Web Workers為Web應用提供了后臺工作的能力，使得JavaScript可以享受到多核CPU的好處。
- Web Workers不能直接訪問網頁和DOMAPI，這一點和Windows Forms的機制很像。
- 初始化Web Workders時需要傳遞JavaScript文件的URL，該文件包含了Worker要執行的代碼：
worker = new Worker("echoWorker.js"); - 如果想要在JavaScript文件中引用其他JavaScript文件，可以調用importScripts方法，傳遞一個或多個JavaScript文件的路徑。
- 實例化Web Worker之后，就可以調用postMessage API來在網頁和Web Worker之間發送數據了。
總的來說，這兩本書還算不錯，《HTML5 Up and Running》言語風趣，捎帶著談了許多HTML的發展歷程，《Pro HTML5 Programming》則側重于JavaScript API。這兩本書都有中文版，分別是《HTML5揭秘》和《HTML5高級程序設計》。
全站熱搜
留言列表
