前言：HTML5不能簡單的被理解爲是HTML的第5個版本，而是指代HTML5及所有相關標準，甚至更寬泛的表示“下一代網頁編寫技術”。
初步的推測理解，HTML5技術=HTML+CSS+javascript。爲保證學習HTML5必備的基礎知識，書中附錄包括CSS和javascript的簡明教程。所以先看附錄。
HTML5的核心概念即語義化、javascript和CSS3。
CSS簡明教程
在網頁中添加CSS樣式有三種方式：直接在標籤中嵌入樣式信息style="..."；在<style></style>標籤中嵌入樣式信息；通過<link ref="stylesheet" href="">鏈接外部樣式文件，第三種方式最常用效果最好。
CSS樣式的設定通過選擇器完成，如果有多個選擇器選擇了同一個元素，那麼這些選擇器的樣式都會起作用，但首先會應用最通用的樣式，例如對於title標籤選擇器和類名爲title選擇器都適用於同一個元素，那麼title標籤的元素會被先應用，也就是從最終效果上來說，會導致後者覆蓋更爲通用的前者。若針對性一樣，則會應用後面的樣式。
除了與js類似的類選擇器.xxx和ID選擇器#xxx之外，還包括僞類選擇器，僞類選擇器以冒號:開頭，僞類考慮的不是元素顯而易見的屬性，而是指並不存在的標記，或者根據用戶操作來確定的信息。例如:link爲新的、未訪問過的鏈接樣式，:visited用於訪問過的鏈接樣式等等。
書中列出了常用的css屬性。
javascript簡明教程
在頁面標籤中嵌入<script>，是使用js的最簡單方式，瀏覽器會在<script>標籤所在的位置運行其中的js代碼。也可以將js代碼放在函數中或是js腳本文件中，在需要的時候進行調用。
注意：html不區分大小寫，而javascript區分。
書中列出了js支持的HTML對象事件。
js創建自定義對象，採用定義函數的方式，如下
定義一個circle對象用var mycircle = new Circle(); mycircle.radius=10;
js中的null值可以表示對象不存在，也可能表示某個功能無效。
js可以更新頁面，從服務器取得數據，向服務器發送數據，操作元素，給元素動態添加事件，但是需注意如下事項。
關於js的調試，見下圖：
window. $(document).ready(function(){})的區別：1.執行時間不同，前者必須等到頁面內包括圖片的所有元素加載完畢後才能執行，後者是DOM結構繪製完畢後就執行，不必等到加載完畢；2.編寫個數不同，前者不能同時編寫多個，如果有多個window.onload方法，只會執行一個，後者可以同時編寫多個並且都可以得到執行；3.簡化寫法，後者可以簡寫爲$(function(){})
w3school HTML5初探
HTML5支持視頻標籤<video>、音頻標籤<audio>，無需採用控件方式進行音視頻的播放，這兩種標籤有一些屬性控制播放/暫停、大小等。
拖放（Drag 和 drop）是 HTML5 標準的組成部分。實現拖放有如下4個步驟：設置被拖放元素爲可拖放draggable="true"，規定當元素被拖動時會發生什麼ondragstart 和 setData()，元素被放到何處ondragover設置允許放置event.preventDefault()，進行放置ondrop取得被拖動元素並放置。
HTML 5 Canvas用於在網頁上繪製圖形，canvas標籤元素表示一個矩形區域的畫布，與javascript配合完成圖像的繪製。
HTML5 支持內聯 SVG (Scalable Vector Graphics)， SVG標籤用於定義用於網絡的基於矢量的圖形，使用 XML 格式定義圖形，SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失。使用 SVG 的優勢在於： SVG 圖像可通過文本編輯器來創建和修改，SVG 圖像可被搜索、索引、腳本化或壓縮，SVG 是可伸縮的 ，SVG 圖像可在任何的分辨率下被高質量地打印，SVG 可在圖像質量不下降的情況下被放大。
Canvas與SVG區別：SVG用XML描述圖形，Canvas通過javascript繪製圖形。http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp
HTML5 Geolocation（地理定位）用於定位用戶的位置，主要用javascript實現。
HTML5 Web存儲即HTML5提供兩種在客戶端存儲數據的方法：localStorage - 沒有時間限制的數據存儲 ，sessionStorage - 針對一個 session 的數據存儲。之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因爲它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成爲可能。對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。 HTML5 使用 JavaScript 來存儲和訪問數據。
HTML 5 應用程序緩存：使用 HTML5，通過創建 cache manifest 文件，可以輕鬆地創建 web 應用的離線版本。
HTML 5 Web Workers是運行在後臺的 JavaScript，不會影響頁面的性能。
HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。script和後臺合作完成。
HTML5爲表單提供了新的輸入類型，提供了更好的輸入控制和驗證。包括：email ，url ，number，range ，Date pickers (date, month, week, time, datetime, datetime-local) ，search ，color。
HTML5爲表單提供了新的表單元素標籤，包括datalist（類似select標籤效果，與input標籤的list屬性結合使用），keygen（密鑰對生成器），output（用於不同類型的輸出，比如計算或腳本輸出）。
HTML5 爲form和input標籤提供了新的表單屬性。
其實在已有的項目中已經用到了一些HTML特性，特別是HTML5提供的表單功能。
不是所有的瀏覽器都支持HTML5特性。
認識新語言
HTML5簡介
HTML5的文檔類型聲明非常簡單，只需要簡單聲明<!DOCTYPE html>。
HTML5驗證器http://validator.w3.org。
HTML5新增刪除了一些元素，修改一些已有元素。
瞭解各個瀏覽器對HTML5各個功能的支持，參考caniuse.com網站。
在頁面代碼中檢測HTML5可以用javascript代碼，更爲方便的方式是用Modernizr js包。
當檢測發現瀏覽器支持的不足後，可以找一些膩子腳本換一種瀏覽器支持的方式實現，例如Google Chrome Frame改造IE。
2.構造網頁的新方式
HTML5一個重要的改變就是爲HTML添加更多的語義性。新增或修改了一些標籤元素，賦予其語義性。例如<time><nav><footer>等標籤。
<header>標識標題元素，<footer>標示頁腳元素。<hgroup>標註副標題。
<figure>添加插圖。<aside>添加附註，<nav>標註導航鏈接。
但是瀏覽器對這些新元素的支持並不是那麼令人滿意，特別是IE，只有IE9以上的版本可以支持HTML5。可以自己用js創建新元素，或者直接從google下載html5.js引進對html5的支持。
<section>區塊元素應該是最後考慮的語義元素，它可能包含的內容有很多種。
HTML5定義了一組規則，用於說明如何爲網頁創建文檔綱要。
綱要可以提供很多便利，比如瀏覽器可以讓用戶從綱要的一處跳到另一處。查看綱要可以用在線生成器，也可以通過安裝chrome擴展。
要確定網頁的綱要，可以用標籤元素來確定，這些元素包括：<h1><h2><h3>等構成層級關係，分塊元素<article><aside><nav>和<section>會產生新的嵌套綱要，區塊根元素<body><blockquote><td><fieldset><figure><details>產生自己的綱要而非向下嵌套分支。
這種綱要機制使得組合文檔更加容易。
綱要機制中存在一些比較讓人困惑的地方，在遇到編號標題元素<h1>等，只要該元素不在某個區塊頂部，就會爲它自動創建一個新的區塊<section>。綱要機制可以作爲一種質量保障工具，如果對其中的概念還有點迷糊也沒有關係。
3.有意義的標記
之前提到的標記都是與頁面結構相關的語義元素，對於文本級語義，HTML5的策略是雙管齊下，一方面定義了幾個文本級語義元素，另一方面跟重要的是支持一個獨立的微數據標準。
文本級語義元素：
<time>標註日期和時間；<output>標註javascript返回值，與form表單結合；<mark>標註突顯文本。
其他語義標準：
ARIA(Accessible Rich Internet Application無障礙富因特網應用)，通過在HTML元素上使用屬性，提供語義信息，例如role屬性，<header role="banner">。ARIA與HTML5語義元素有一定重複。屏幕閱讀器支持ARIA但不支持HTML5。
RDFa(Resource Description Framework資源描述框架)，也是一個通過屬性向網頁嵌入詳細信息的標準，針對XHTML。
Microformats，是一種在網頁中嵌入元數據的簡單而又合理的方式。兩個最常見的microformats就是hCard或hCalendar。hCard用來標註聯繫信息，應用hCard的方式是爲hCard找個根元素，指定其class屬性值爲vcard，在根元素內部至少要包含一個格式化的名字，其class值爲fn，其他聯繫信息如電話、生日、郵箱等，以任何順序列在根元素內，通過class值進行指定。雖然瀏覽器不能識別microformats，但是可以安裝插件，如oomph等，提取hCard（聯繫人），hCalendar（活動）和hMedia（媒體文件）。也可以用javascript調用oomph的js包。
Microdata是另一種解決語義標記問題的選擇，它使用自己的屬性，相較microformats犧牲了簡潔性，更講究邏輯性。使用microdata需要給相應元素添加itemscope和itemtype屬性，itemscope表示開始一段新的語義內容，itemtype表示內容中包含的數據類型。屬性信息用itemprop來標註。
microdata支持嵌套。
microdata與RDFa非常類似。
雖然沒有插件或者js腳本從頁面中提取microdata的數據，但是它對於增強網頁搜索效果非常有用。
Google Rich Snippets工具能夠將RDF,microformats,microdata結合，提取網頁語義信息。其中給出了使用上述方式的例子。
只要頁面中語義標記格式正確，google會利用這些語義信息增強搜索結果，將語義信息放在搜索引擎返回的結果中。以下幾種情況，google會對語義數據視而不見：1.語義數據不是頁面的主要內容；2.語義數據被css隱藏；3.網站中只包含很少的語義數據。
除了增強搜索結果以外，語義數據還可以被google用於更智能的搜索，例如簡歷搜索引擎。
製作新網頁
web表單
form表單負責告訴瀏覽器把數據提交到哪兒，方法是在action中提供一個URL，如果用javascript操作表單，只要在action屬性裏寫一個井號#即可，表示表單提交到本頁。
HTML5提供新的標籤屬性form，可以支持將表單控件放在表單標籤之外。
placeholder屬性：用來在input標籤中通過佔位符文本添加提示。並不是每個文本框都需要placeholder，佔位符用來消除歧義，避免用佔位符完成以下兩種情況的工作：1.不用它代替字段描述說明，字段描述說明考慮放在輸入框下方，或者作爲title屬性值，當用戶鼠標懸浮到該字段上時，彈出窗口告訴用戶做什麼；2.爲了表示佔位符只是一個例子而非真正的內容，就選擇特殊字符作爲佔位符。
autofocus屬性：自動取得焦點，只能給一個input或textarea標籤添加這個屬性。
HTML5表單驗證：例如required屬性，驗證會在用戶點擊提交按鈕時發揮作用，攔截提交併在旁邊顯示提示。如果有多個數據不符合要求，瀏覽器的處理方式是，從上而下檢查，只要發現一個無效的值就停下，不再繼續驗證別的字段。
關閉驗證，可以在form表單中添加novalidate屬性，也可以增加一個提交按鈕來繞過驗證，該按鈕添加formnovalidate屬性。
驗證與樣式掛鉤，用css僞類實現，例如input:required{} input:required:invalid{}。
HTML5支持正則表達式方法進行驗證，只需要在input標籤中添加屬性pattern="[a-z]{3}"，pattern屬性值爲正則表達式。
也可以通過HTML5提供的js屬性自定義驗證，onInput=“validate(this)”，onInput屬性值爲javascript函數。
HTML5添加了新的表單輸入控件類型，包括email、網址、搜索框、電話號碼、數值、滑動條、日期和時間、顏色。
HTML5增加新的元素，<datalist>顯示輸入建議，進度條<progress>和計量條<meter>，<command>創建工具條和<menu>菜單。
網頁中的HTML編輯器，由IE5率先引入，設置屬性contentEditable使頁面元素可編輯，設置屬性designMode使頁面可編輯。
2.音頻與視頻
之前向網頁添加視頻的方式有兩種：一種是用<embed>元素把視頻添加進頁面中，瀏覽器可以使用windows media player、apple quicktime等視頻播放器創建一個視頻窗口，第二種方式是使用瀏覽器插件，比如silverlight或adobe flash。
HTML5使用<audio>和<video>添加音頻和視頻。
<audio src="a.mp3">支持屬性controls進行播放控制，下載緩衝控制的屬性preload，值可設爲auto/metadata/none，自動播放屬性autoplay，自動重新播放loop。
<video>擁有與<audio>共同的屬性，另外還有三個屬性height,width和poster，poster屬性用於設置替換視頻的圖片，瀏覽器會在以下三種情況用到poster設置的圖片：1）視頻第一幀未加載完畢；2）把preload屬性設置爲none；3）沒有找到指定的視頻文件。
關於音視頻格式問題，包括mp3，ogg，wav，mp4等，瀏覽器對各種格式的支持不盡相同。爲了滿足不同的瀏覽器需要，有兩種方案：1.主選flash，HTML5作爲後備；2.主選HTML5，flash作爲後備。
下面主要說明方案2：
要想使HTML5支持多種格式，從<audio>和<video>標籤中刪除src屬性，使用<source>元素，如下，type的值是MIME類型：
用flash作後備，甚至以指向視頻文件的下載鏈接爲後備。
瀏覽器會對不認識的標籤視而不見。
<video>和<audio>標籤也有一個擴展的javascript對象，可以利用該對象，通過js+<audio>添加音效，創建自定義視頻播放器，添加播放控制按鈕，添加播放進度條。
更爲方便的是使用網上免費的基於js的媒體播放器，例如VideoJS，和JPlayer。
關於爲視頻添加字幕，現在還沒有最佳的方案，只能先選擇javascript來實現。
3.基本canvas繪圖
HTML5的<canvas>元素與javascript結合在網頁中畫圖。
<canvas>元素指定以下三個屬性即可：id，width和height。width和height一定要通過屬性指定，不要在樣式表中設置。javascript通過id找到對應的canvas畫布。
首先用document.getElementById取得canvas對象，然後取得二維繪圖的上下文。
var canvas = document.getElementById('drawingCanvas');//取得canvas對象
var context = canvas.getContext('2d');//取得二維繪圖上下文
context.moveTo(10,10);//找到起點
context.lineTo(400,40);//找到終點
context.stroke();//繪製直線
context.lineWidth=10;//設置線寬度
context.strokeStyle='rgb(205,40,40)/#cd2828/red';//設置線顏色樣式
context.lineCrap='butt/round/square';//設置線端點（方頭，圓頭，長方頭）
context.beginPath();//開始繪製新直線
context.closePath();//關閉路徑
context.fillStyle="blue"；//設置填充色
context.fill();//填充
contex.fillRect();//填充矩形
context.strokeRect();//繪製矩形
繪製曲線：arc(),arcTo(),bezierCurveTo(),quadraticCurveTo()，利用這些函數都需要一些數學計算。
變換：通過變化canvas座標系達到繪製目的，可用的方式有translate平移，scale縮放，旋轉rotate和矩陣matrix
context.translate(50,50);//把座標系向下向右各移動50像素
context.save();//保存座標系當前的狀態
context.restore();//返回保存過的前一個狀態
透明度設置
1.用rgba()函數
context.fillStyle="rgba(100,150,185,0.5)";//設置透明填充，0.5爲不透明比例。
2.設置globalAlpha屬性，即rgba中的最後一個參數，然後再設置fillStyle。
context.globalCompositeOperation="xor";//設置合成操作，canvas兩個圖形重疊的部分不顯示。
將canvas中的圖像保存canvas提供了三種方式：
1.使用數據URL;
2.使用getImageData()方法；
3.保存繪圖的一組步驟。
對於不支持canvas的瀏覽器，有兩種處理方式：
1. 可以利用第三方工機具模仿HTML5的canvas，例如ExplorerCanvas庫（採用的是javascript和VML矢量標記語言技術），引入該腳本即可使用canvas。
2.在canvas元素中添加後備內容，無視canvas則顯示後備內容，如下圖
高級canvas技術
1.繪製圖像
context.drawImage(img, 10, 10);//在畫布中繪製已有圖片，參數img可以用createImageData()創建，也可以從img元素中取，也可以用javascript創建。後面的參數可以用來對圖片進行裁剪。第一個參數不僅可以是一個image，還可以是整個canvas元素或video元素。
2.繪製文本，相對於繪製圖像和線條，繪製文本的速度稍慢一些。優化速度的方式，可以先將文本存爲圖片在drawImage()進行繪製。
context.font="20px Arial";//設置字體
context.textBaseline="top";//文字位置，設爲頂點處
context.fillStyle="black";//文字顏色
context.fillText("hello world",10,10);//座標（10,10）位置作爲頂點，繪製一行文本
context.strokeText()//繪製文本輪廓
3.添加陰影
context.shadowBlur=20;//設置陰影的模糊程度
context.shadowColor="blue";//設置陰影顏色
context.shadowOffsetX和context.shadowOffsetY設置陰影相對內容的位置
在fill……函數前設置上述參數即可達到添加陰影的效果，可以是陰影文字也可以是圖片等。
4.填充圖案
var pattern=context.createPattern(img,"repeat/repeat-x/repeat-y");//創建圖案對象
context.fillStyle=pattern;//用圖案對象填充
5.填充漸變
與填充圖案不同的是首先創建漸變對象
var gradient = context.createLinearGradient(10,0,100,0);//創建線性漸變對象
gradient.addColorStop("0.25", "blue");//設置漸變顏色，第一個參數爲0~1之間的數值，表示顏色在漸變中的偏移值位置。
var gradient = context.createRadialGradient(180,100,10,180,100,50);//創建放射漸變對象，漸變起點在心形內部，座標爲（180,100），內部顏色是一個半徑爲10px的圓表示，外部顏色一個半徑爲50px的圓表示。
6.記錄圖案
可以用自定義js對象，並用數組記錄canvas中的圖案。
7.canvas添加動畫
設置定時器，反覆調用繪圖函數（一般30、40秒）
有兩個函數可以設置定時器：setTimeout()，setInterval()。後者保證精確地按時重繪，但可能犧牲性能。所以一般都採用setTimeout()。
4.使用CSS3
CSS3包含大約50個模塊，沒有一款瀏覽器支持全部模塊。
使用CSS3有三個選擇：用能用的；將CSS功能作爲增強；先列出兼容性好的屬性，再列出好的屬性以覆蓋老屬性，或者設置兩套樣式屬性，使用Modernizr爲不支持某個樣式屬性的瀏覽器設置替代的樣式。
瀏覽器開發商提供“開發商前綴”，爲還在開發中的CSS屬性和功能加上特定瀏覽器實現的前綴。
web排版
原本web設計人員只能用少數幾種安全字體，CSS3通過@font-face爲瀏覽器增強了字體功能。
使用該功能的步驟如下：
1.把字體上傳到網站：字體的格式可以是eot,ttf,otf,svg,woff，可以從網上下載現成的字體包http://www.fontsquirrel.com/fonts
2.使用@font-face命令註冊每個想要在樣式表中使用的字體：將字體文件複製到網頁所在的文件夾中，就可以註冊該字體。
3.在樣式表中使用註冊過的字體
4.瀏覽器在遇到使用web字體的樣式表時，就會把字體下載到頁面和圖片的臨時緩存中
除了下載字體包之外，還可以使用google的web字體http://www.google.com/webfonts，也可以將自己本地獲得授權許可的字體上傳轉換並使用。
CSS3通過屬性column-count和column-width支持多欄文本
適用不同的設備
CSS3提供媒體查詢功能，可以取得設備的關鍵信息（大小、分辨率、色深等），web開發人員可以根據該信息應用不同的樣式。
媒體查詢的格式如下：@media後小括號中爲要查詢的屬性及值，大括號中的內容爲對應的新樣式
高級媒體查詢支持and和not關鍵字
除了採用樣式塊的方式之外，還可以通過樣式錶鏈接替換整個樣式表，格式如下：
<link rel="stylesheet" media="max-width:480px" href="small_style.css">//當前窗口中頁面的寬度等於或小於480px時用的樣式
<link rel="stylesheet" media="max-device-width:480px" href="small_style.css">//最大屏幕寬度等於或小於480px時，用於創建移動版網頁
<link rel="stylesheet" media="screen" href="small_style.css">//屏幕顯示時用的樣式
<link rel="stylesheet" media="print" href="small_style.css">//打印頁面用的樣式
媒體查詢功能也可以進行移動設備的識別。HTML5爲視頻的source標籤添加media屬性可以滿足移動網站的視頻播放。
對於移動版除了樣式的改變以外，還得考慮帶寬和用戶體驗的因素，例如提供更小的圖片，把內容重新組織成無需滾動頁面的小塊。
多變的盒子
透明盒子：有兩種實現方式，可以用rgba(170,240,0,0.5)函數，最後一個參數爲不透明度；也可以用opacity屬性也表示不透明度+rgb()函數。
在下列情況下，建議使用opacity屬性而非rgba()函數：實現多種顏色（元素）的半透明效果；不知道顏色的情況下，實現半透明效果；實現圖片的半透明效果；實現漸變元素的半透明效果
圓角盒子：用border-radius屬性可以畫出圓角盒子，還可以用border-top-left-radius這樣的屬性把圓拉成橢圓，或者創建出形狀各異的盒子。
背景盒子：CSS3支持多個背景圖片，並且可以爲背景圖片設置不同的位置，如下：
陰影盒子：CSS定義了兩種陰影分別是盒子陰影和文本陰影，生成這兩種陰影的屬性分別是box-shadow和text-shadow。
box-shadow：5px 5px 10px gray；//前兩個值是水平和垂直方向的偏移量，第三個值是模糊距離也就是陰影的模糊程度，最後一個值是陰影顏色，可以用rgba()函數設置這個值。
box-shadow：5px 5px 10px 5px gray；//新增的第四個參數5px用於設置陰影伸展範圍，即增大模糊邊界之前的實心顏色面積。
box-shadow：5px 5px 10px gray inset；//inset在元素內部創建一個陰影
text-shadow：gray 10px 10px 7px；//參數順序與box-shadow稍有不同
漸變盒子：漸變是多種顏色混合而成的效果，關於漸變類似canvas中的漸變，支持兩種漸變：線性和放射性，
background：-moz-linear-gradient（top，white，blue），還可以用漸變點控制每個漸變色的起點-moz-linear-gradient（top，red 0%，orange 20%，yellow 80%，violet 100%），0%爲漸變起點，100%爲終點。漸變屬性有四個函數支持：linear-gradient()，radial-gradient(), repeat-linear-gradient(), repeat-radial-gradient()。
漸變也可以通過background-image屬性實現。
創建過渡效果
過渡效果是爲了避免僞類創造的樣式變換過於突然的問題，爲了通過過渡使整個過程更加平衡，需要爲正常狀態下的樣式設置transition屬性，如下，表示background屬性的變換效果會慢半拍出現。
除了顏色過渡之外，還可以考慮其他的過渡屬性包括透明度、陰影、漸變、變形。
變形（變換）用transform屬性，變換包括移動、縮放、斜切和旋轉。加上transition屬性可以使變換過程更自然。
構建桌面式web應用
數據存儲
在HTML5之前，本地存儲的唯一方案就是使用cookie。利用cookie保存少量數據固然方便，但是cookie也有不好的一面，就是必須處理過期數據，而且要跟着請求來回發送和接收這些沒有用的數據。
HTML5新增了更好的本地功能，讓我們在用戶計算機上保存數據更加方便。這些數據可以無限時間地保存在用戶機器上，不會發送到服務器，有充裕的空間存儲它們，而且能夠通過幾個簡單的javascript對象操作它們。這一功能叫做web存儲。
web存儲分兩種，分別對應兩個javascript對象：
本地存儲，localStorage對象，用於長期保存整個網站的數據，除非用戶手動的清除本地緩存數據。
會話存儲，sessionStorage對象，用於臨時保存一個窗口或標籤頁的數據。
這兩種存儲，都是與網站所在的域對應的。兩種javascript對象存儲的方式都是鍵值對，例如
localStorage[keyname]=data;
刪除數據項：localStorage.removeItem();
清空網站在本地保存的所有數據：sessionStorage.clear();
查找所有數據項：var key=localStorage.key(i);//取得索引i對應數據項的鍵
var item=localStorage[key];//取得以該鍵保存的數據值
保存數值和日期：web存儲保存數據時，數據會自動被轉換爲文本。
保存數值：
保存日期：
保存對象：用JSON編碼保存。JSON是把結構化數據轉換爲文本的一種簡便格式。
JSON.stringify()把對象連同其數據轉換爲文本形式；JSON.parse()把文本轉換回對象。
響應存儲變化：當web存儲產生變化時，同一頁面或同一站點中其他頁面的窗口會出發window.onstorage事件。
存儲變化包括添加新數據項、修改既有數據項、刪除數據項或清除所有數據。
讀取文件：HTML5的javascript提供File API進行文件的讀取。大部分瀏覽器支持File API的部分功能，
取得文件：file類型的input元素，用javascript函數處理提交的文件
<input id="fileInput" type="file" onchange="processFiles(this.files)" mutiple>，mutiple支持多個文件處理。
javascript中用FileReader對象讀取文件內容，FileReader提供readAsText()//處理文本文件, readAsBinaryString()//處理二進制編碼數據, readAsDataURL()//處理圖片數據, readAsArrayBuffer()等方法。
除文本字符串web存儲和簡單文件FileAPI之外，瀏覽器也提供了對數據庫的支持Indexed DB標準。
2.離線應用
並不是所有網站都需要做成離線的應用，但是對於某些應用離線功能是非常必要的。
通過描述文件緩存資源，即下載文件並在用戶計算機上保存一份副本。
步驟如下：
1）創建描述文件：告訴瀏覽器保存什麼文件，描述文件的擴展名推薦使用.manifest和.appcache
2）修改網頁，引用描述文件：給離線應用包含的每個頁面添加同樣的屬性<html lang="en" manifest="PersonalityTest.manifest">
3）配置web服務器：web服務器須添加值爲text/cache-manifest的MIME類型，以便正確交付配置文件。
一旦瀏覽器緩存了應用，那麼它就不會向web服務器請求新內容。但是這時服務器的更新會被瀏覽器忽略。
要觸發瀏覽器更新緩存的應用，必須同時滿足以下三個條件：瀏覽器沒有緩存描述文件；描述文件的保存日期必須是最新的；描述文件中的內容要更新。
NETWORK區塊：不緩存的文件在描述文件中註明在NETWORK:之後，告訴瀏覽器這些文件需要聯網訪問獲取。
FALLBACK區塊：不能上網時請求的後備文件。
javascript可以通過navigator.onLine屬性來檢測連接，查看是否在線。
也可以通過javascript指定更新。通過javascript的applicationCache對象的status屬性和事件函數，可以與離線應用功能交互。
3.與web服務器通信
向web服務器發送消息：依靠javascript的XMLHttpRequest對象，AJAX.
服務器發送事件：上述通信方式是一對一的，當服務器返回響應之後，通信就結束了。爲了保持與web服務器長期的聯繫，可以採用輪詢技術，但是許多客戶端的輪詢會給服務器造成無謂的壓力。
還有一種方案是服務器發送事件（server-sent event）：
1）消息格式：每條消息每一行必須以“data:”開頭，然後是實際的消息內容；除了消息本身之外，web服務器還發送唯一的ID值和一個連接超時選項retry:，ID和retry值是瀏覽器要用的，一般網頁不會關注。
2）通過服務器腳本發送消息：以php爲例，首先要設置頭部信息，header("Content-Type:text/event-stream");//設置MIME類型，另外，消息一定要按格式返回。
3）在網頁中處理消息：javascript創建EventSource對象source，將處理函數指定給onmessage事件，該函數會在收到服務器消息時觸發。
輪詢服務器端事件，網頁的輪詢時間由服務器通過retry:xxxx告知。
Web Socket：
服務器發送事件非常適合從服務器連續不斷的接受消息，但整個通信過程是完全單向的，無法知道瀏覽器是否響應，也不能進行更復雜的對話。
XMLHttpRequest對象支持瀏覽器與服務器的對話，但是它不適合來回發送多條消息，沒辦法將一次調用跟下一次調用聯繫起來，每一次網頁發送請求，服務器都要確定請求來自何方。
Web Socket方案可以解決這一問題。Web Socket目前的支持還並不完善。
爲了使用Web Socket，需要在web服務器上運行一個程序。這個程序負責協調各方通信，而且啓動後就會不間斷的運行下去。
Web Socket功能：
一般都是安裝別人寫好的web socket服務器，然後再設計網頁與之通信。
web socket客戶端：
1）創建WebSocket對象，傳入一個以ws://開頭的URL，web socket標準還支持以wss://開頭，表示安全、加密的連接；
2）爲WebSocket對象的事件添加響應函數，包括onOpen、onError、onClose和onMessage；
3）使用現成的web socket服務器
Web Socket非常適合做聊天程序和多人繪圖板等應用。
4.更酷的javascript技術
Google Gears
1）地理定位
地理定位的原理，包括根據IP地址定位，無線網絡、信號塔位置、GPS、RFID芯片、藍牙設備、GoogleMaps設置的cookie等等。
查找訪客的座標，用javascript中navigator.geolocation對象的方法getCurrentPosition()//異步取得訪客位置、watchPosition()//跟蹤訪客位置，在訪客位置改變時觸發成功函數和clearWatch()//與watchPosition()搭配使用，將watchPosition()的返回值傳給clearWatch()取消關注位置變化。
getCurrentPosition()有三個參數：成功函數、失敗函數和地理定位選項。
Google Maps API提供的接口可以方便的使用
2）Web Workers：後臺執行javascript代碼。
將比較費時的工作放在後臺完成，創建一個新的web worker對象，把要運行的代碼交給這個對象。
網頁和web worker之間不允許共享數據。
創建worker對象，讓worker運行的代碼都要放在一個單獨文件中，避免worker引用全局變量或直接訪問頁面中的元素。
網頁與worker對象通信通過消息來進行，worker.postMessage(myData);//給worker發送消息
worker通過onMessage事件接收上述數據的一個副本。
worker.onerror=workerError;//onerror事件告訴網頁有錯誤發生
取消後臺任務的方式有兩種：1.worker對象調用自己的close()方法；2.創建worker對象的頁面調用該頁面的terminate()方法。
取消之後要執行新的任務，必須創建一個新的worker對象。
web worker還可以把進度百分比信息發送給頁面，通過給postMessage()的消息對象參數中定義新的屬性，使onMessage()能夠區分進度信息和消息數據並分別處理即可。
3）會話歷史：瀏覽器URL與當前內容同步。
javascript歷史對象包含一個屬性和三個簡單的方法，屬性length表示瀏覽器的歷史列表中有多少條記錄，back()方法能讓訪客在歷史記錄中回退一步，forward()前進一步，或者調用go()方法並指定後退或前進的步數。
HTML5又爲該對象添加了一些新功能，新功能的核心是pushState()方法，通過它可以改變瀏覽器地址欄中的URL，同時不會導致頁面刷新。pushState()接受三個參數，第一個參數可以是任意數據用來表示頁面的當前狀態，第二個參數是頁面標題，第三個參數是新的URL。
hushbang技術：在URL末尾加上#！，實現同一URL中不同頁面內容的鏈接。
但是hushbang技術存在一些問題，包括URL複雜，缺乏靈活性，搜索引擎優化等問題。
onpopstate事件意味着用戶返回了某個狀態。