公司的 New Case，有需要離線應用工作系統這一塊，目標是網絡無論在線或離線情況下都可以執行系統操作，這樣員工在無網絡的情況下依然可以執行公司的項目任務，進行表單填報和數據的客戶端保存，並在網絡通暢的時候與服務端進行交付和數據通信。整體設計經過討論使用HTML5的功能開發，並指定用戶使用特定的瀏覽器。
該系統包含了HTML5的Form API（表單），WebStorage API，Communication API(用於跨域訪問)，WebDataBase API，File System API，以及離線應用程序的幾個部分的操作，最后做成Chrome的應用程序插件（CRX文件），並發布給客戶使用…
使用HTML5來設計該離線工作系統的可能性和可行性：
1、 兼容性：HTML5不是顛覆性的革新，一旦瀏覽器不支持HTML5的某項功能，針對HTML5功能的備選方案就會被進行…
2、 效率和用戶優先性：HTML5規范是基於用戶優先准則編寫的：在遇到無法解決的沖突的時候，會把用戶放在第一位，其次是頁面作者，再次是實現者（或瀏覽器），接着才是規范制定者（W3C、WHATWG）
3、 安全機制的設計：每個規范都對安全機制的章節
4、 表現和內容分離
5、 通用訪問
6、 無插件范式，提供原生的支持
簡化功能 DOCTYPE聲明簡化，由原來的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改為 <meta charset="utf-8" />
字符集聲明簡化：<meta http-equiv="content-type" content="text/html" charset="utf-8" />
簡化為：<meta charset="utf-8" />
7、 HTML5片段類元素（語義化標記）：
header：標記頭部區域的內容
footer：標記腳步區域的內容
section：Web頁面的一塊區域
article：獨立的文章區域
aside：相關引文或區域
nav：導航類輔助區域
8、 便捷的Javascript日志和調試
Console.log(msg);可以在控制台輸出用戶的自定義的調試信息，它不會像alert 那樣破壞和中斷程序。
9、 window.JSON: JSON API
JSON.parse 用於將字符串序列化成DOM對象
JSON..stringify 將DOM對象轉化為字符串
10、 離線數據存儲，包括WebDataBase和 File System API 和Storage API等模塊，用於臨時或持久地在客戶端保存數據。
11、 跨域數據通信：Communication API，用於在網絡接通的情況下離線系統與服務端系統的數據同步和操作的交互。
HTLM5 開發工具：
網上有很多HTML5開發工具，
http://www.cnblogs.com/lhb25/archive/2011/10/09/10-online-tools-to-simplify-html5-coding.html
如果你是使用dreamwear開發，那就去下載一個HTML5 安裝包（HTML5 Pack），其實就是一個基於dreamware的擴展，它在 dreamweaver 中添加對 HTML5 和 CSS3 的支持。
如果你是Dreamweaver CS5，那就下載HTML5 Pack for Dreamweaver CS5
如果你是Adobe Dreamweaver CS5.5，那就下載 HTML5 Pack for Dreamweaver CS5.5
如果你的項目是在VS中進行開發，那你就去擴展管理器中下載安裝Web Standards Update for Microsoft Visual Studio 2010 SP1（基於VS2010的補丁包）, 里面包含了CSS3的級聯樣式表版本 和 HTML5的目標驗證架構 ,
官方地址：
http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83?SRC=Home
HTML5和CSS3部分的介紹：
安裝后的清單如下：
| Microsoft Visual Studio 2010 SP1 Tools for SQL Server Compact4.0 Installer for Repaire(Chinese-China) |
| Microsoft Visual Studio 2010 SP1 Tools for SQL Server Compact4.0 Installer |
| ASP.NET MVC 3 Tools Update Installer |
| Microsoft Visual Studio 2010 SP1 Tools for ASP.NET Web Pages |
| ASP.NET MVC3 Tools Update Language Packs Install |
不只是對HTML5的支持，還有其他如MVC和SQL Server之類的更新。如果你不需要，可以到控制面板里面去單個清除。安裝之后，你的VS就帥多了，可以智能感知HTML5的新的標簽屬性和樣式屬性：
支持HTML5的主流瀏覽器有：
| Chrom |
3.0以上 |
| Firefox |
1.5版本開始支持 |
| Internet Explorer |
9.0以上 |
| Opera |
9.0版本以上 |
| Safari |
1.3版本以上 |
Chrome3.0以上版本基本支持了HTML5的特性和所有API，一直處於支持度的領先地位，而且有着的易於操作的開發人員工具，所以我們的項目的瀏覽器支持平台就是谷歌Chrome。
工欲善其事必先利其器，我們先來了解下谷歌瀏覽器的開發人員工具：
可以通過點擊谷歌瀏覽器右上角的工具標簽
=》 工具 =》 開發人員工具 來選擇進入開發工具面板，或者使用 Ctrl+Shift+I （或F12）快捷鍵打開開發人員工具。
在窗口的最上方的工具欄里排列着 8 個圖標，分別對應不同的功能，每一個圖標點擊后都會打開相應的調試面板，幫助您獲取各種不同的信息，如 DOM 樹、資源占用情況、頁面相關的腳本等。通過 Ctrl+[ 和 Ctrl+] 鍵，可以在這些項之間進行切換。工具欄最右方還提供了一個搜索框，方便在當前面板中進行搜索。
開發者工具箱左下角的三個固定圖標
第一個圖標：會提示是Undock into separeter windown 還是Dock to main window,提醒你是將開發者工具箱停靠在主窗體中還是單獨一個窗體。
第二個圖標：show console， 是否顯示控制台
第三個圖標選擇相應的頁面元素
1、 元素面板（Elements）：
元素面板：元素面板允許你像瀏覽器本身那樣去查看和讀取web頁面的內容和結構，使用這個元素面板，你可以看到原生的HTML源碼，CSS樣式代碼,文檔結構模型，以及瀏覽器對頁面實時的處理和操作。
打開開發者工具箱，選擇Elaments面板
在這個元素面板中，我們可以在左邊的面板中看到HTML元素，在右邊的面板中看到樣式，框架度量（metrics），屬性（properties）和事件監聽（event listeners）等東西
Dom Element Tree (文檔元素樹)：
包含了內嵌腳本和元素，選擇相應的元素會鎖定該段源碼，如選擇看了該段<p>元素
當你選擇了這個元素的時候，你可以添加，編輯，刪除該元素的的屬性，甚至刪除整個節點
CSS Styles（CSS 樣式）：選擇某個元素之后，在右邊面板的Styles選項中，可以查看到該選定元素的所有樣式信息，並可以對其樣式進行修改
你可以使用
按鈕添加新的樣式元素，使用
設定一個元素的偽狀態 (:active, :hover, :focus, :visited)。
盒模型（Box Model）：在右邊的面板中選擇Metrics標簽，會顯示該選定元素在整個Dom文檔中的模型位置，它還允許你編輯任意的 絕對，相對，固定的頁面元素的CSS 盒模型度量,如圖：
屬性（Properties），在右邊面板中選擇屬性標簽，並修改屬性值
事件監聽：捕獲也頁面元素的的事件，如click，kendown和 mouseover
2、 資源面板（Resources）
Frames：框架資源，你可以看到從頁面上載入的資源，里面包含了HTML頁面，腳本，Font文件，Images文件，Scripts文件，StyleSheets文件，都是從顯示的網站是獲取的相關資源文件。
Databases：基於Chrome的數據庫，使用SQLite,我們的離線系統采用這個為離線存儲數據庫
LocalStorage：來源於WebStorage API，用於在緩存中存儲數據
SessionStorage：來源於WebStorage API，用於在緩存中存儲數據
LocalStorage 和 SessionStorage的區別
| 類型 |
生命周期 |
可見度 |
| SessionStorage |
數據會保存到存儲他的標簽頁或者瀏覽器關閉時 |
數據只在構建它的頁面或則瀏覽器中可見 |
| LocalStorage |
數據的生命周期比窗口或者瀏覽器的周期長 |
數據可被同源的每個窗口或者標簽頁面可見 |
Cookies：查看瀏覽器的Cookies，可以修改和刪除Cookies對象
3、 網絡面板（NetWork）：
網絡面板用以檢查資源載入的時間和詳細信息
4、 腳本面板（Scripts）：
用於調試腳本的面板，這個面板相當重要，我們的離線系統幾乎都是用腳本（JavaScript）加HTMLAPI來構建的，所以經常要在這里進行腳本調試。
如圖，左邊顯示的是當前Page所使用的腳本集合，選擇你要調試的腳本，並在左邊添加斷點（Add BreakPoint）,右邊面板上的圖標分別代表的是：運行/停止、不跳如函數（F10）、跳入下一行或者下一個函數內，跳出當前函數，使當前所有斷點都無效。
其他快捷鍵：
| Continue |
F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms. |
| Step over |
F10 or Command-' (apostrophe) on Mac or Control-' (apostrophe) on other platforms. |
| Step into |
F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms. |
| Step out |
Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on platforms. |
| Next call frame |
Control-. (period) on all platforms. |
| Previous call frame |
Control-, (comma) on all platforms. |
5、 控制台面板（Scripts）：
用以顯示控制台信息的面板，如果系統這邊有任何錯誤或者警告都會出現在這個面板里面，這個面板還能輸出開發人員自定義的信息：console.debug(message)，我們的離線系統中已經包行了對自定義信息的封裝。
6、 搜索框（Search）：
查找相應的頁面元素、腳本代碼，樣式代碼等
Chrome官方有詳細開發者工具文檔，教你認識和使用它的開發者工具，有興趣可以全面地了解下。
https://developers.google.com/chrome-developer-tools/docs/overview