Web 2.0帶來的豐富互聯網技術讓所有人都享受到了技術發展和用戶體驗進步的樂趣。作為下一代互聯網標準——HTML 5自然也是備受期待和矚目，HTML 5已成為互聯網愛好者們茶餘飯後的話題。那麼HTML 5到底是什麼，它有哪些特性，它未來的發展方向在哪裡？
9.1 HTML 5簡介
HTML 5的前身名為Web Applications 1.0。於2004年被WHATWG（Web Hypertext Application Techonlogy Working Group, Web超文本應用技術工作組）提出，2007年被W3C採納，並被轉變為
HTML 5規範的第一個草案。HTML 5已經得到大多數現代瀏覽器的支持。
談到Web設計，我們經常把Web分為三個層：
（1）結構層；（2）表現層；（3）行為層。
它們對應的技術，分別是：
（1）HTML；（2）CSS;（3）JavaScript。
隨著HTML 5的到來，這三層的內容已經發生變化。在結構層中，HTML 5添加了新的標記，例如：<header>, <article>和<footer>等。HTML 5還提供了媒體元素，例如：<audio>, <video>和<canvas>等。HTML 5中表單元素也得到了加強，新增了進度條、滑動條和顏色拾取器等，同時，表單驗證方面也可以用瀏覽器內置的驗證。
在行為層方面，HTML 5為每個新的元素規定了新的交互方式以及API。例如，我們可以自定義<video>元素，讓其播放和暫停視頻動畫等。可以使用<canvas>繪製各種圖形。而在HTML 5之前，想要直接在網頁上進行直接繪圖是不能輕易完成的，即使是最簡單的幾何圖形也不可以，多數交互只是保存和點擊。在HTML 5之前，如果希望能夠跟圖片進行更多的操作或者在瀏覽器當中畫出圖形，需要Flash這類插件來幫忙。
不僅是結構和行為發生變化，表現層也同樣得到了改進。CSS 3新增了很多模塊，比如，高級選擇器、漸變、圓角還有動畫等。而在HTML 5之前，這些工作需要編寫腳本才能實現效果。
HTML 5的改變不僅僅是這些，在瀏覽器的JavaScript API方面也做了不少改進。以前我們可以用cookie和window之類的API，而新的JavaScript API增加了很多模塊，比如Geolocation, Storage和WebSocket等。
HTML 5還有很多令人心動的特性和新功能，限於篇幅無法一一舉出，但我對於HTML 5的前景還是非常看好的，畢竟豐富Web應用的大勢已經掀起，讓我們共同期待HTML 5的降臨。
9.2 jQuery Mobile簡介
對於Web開發者來說，jQuery是非常流行JavaScript類庫，而且一直以來它都是為Web瀏覽器設計的，並沒有特別為移動應用程序設計。jQuery Mobile則是用來填補jQuery在移動設備應用上的缺憾的一個新項目。它基於jQuery框架並使用了HTML 5和CSS 3這些新的技術，除了能提供很多基礎的移動頁面元素開發功能外，框架自身還提供了很多可供擴展的API，以便於開發人員在移動應用上使用。使用該框架可以節省大量的JavaScript代碼開發時間。
9.3 jQuery Mobile主要特性
jQuery Mobile提供了非常友好的UI組件集和一個強有力的AJAX的導航系統，以支持動畫頁面轉換。它的策略可以簡單地總結為：創建一個在常見智能手機/平板電腦瀏覽器領域內能統一用戶界面的頂級JavaScript庫。概括起來，jQuery Mobile有以下特性：
（1）基於jQuery構建
它採用與jQuery一致的核心和語法，這樣能讓學習者倍感熟悉，學習曲線也是最小的。另外，它還使用了jQuery UI代碼和模式。
（2）兼容絕大部分手機平台
jQuery Mobile以「Write Less, Do More」作為目標，為所有的主流移動操作系統平台提供了高度統一的UI框架，而不必為每個移動設備編寫獨特的應用程序。它兼容iOS、Android、Blackberry、Palm WebOS、Nokia/Symbian、Windows Mobile、bada和MeeGo等，只要是能解釋標準HTML的設備就能提供最基本的支持。
（3）輕量級的庫
基於速度考慮，整個庫非常輕量級，同時對圖片的依賴也降到最小。
（4）模塊化結構
創建定製版本只包括應用所需的功能，而不需要修改應用的結構。
（5）HTML 5標記驅動的配置
快速開發頁面，把對開發人員的腳本能力需求降到最小化。
（6）漸進增強原則
jQuery Mobile完全採用漸進增強原則：通過一個全功能的標準HTML網頁和額外的JavaScript
功能層，提供頂級的在線體驗。這意味著即使移動瀏覽器不支持JavaScript，基於jQuery Mobile的移動應用程序仍能正常的使用，而較新的移動平台能獲得更優秀的用戶體驗。
（7）響應設計
通過靈敏的技術設計和工具，使得相同的基礎代碼庫可以在不同屏幕大小中自動縮放。
（8）強大的Ajax的導航系統
它使得頁面之間跳轉變得更加流暢，同時保持按鈕，書籤和地址欄的簡潔。
（9）易用性
一些輔助功能，比如WAI-ARIA，以確保頁面可以在一些屏幕閱讀器或者其他手持設備中正常工作。
（10）支持觸摸和鼠標事件
讓觸摸，鼠標，光標用戶都能通過簡單的API來流暢使用。
（11）統一的UI組件
在觸摸體驗和主題化方面，jQuery Mobile加強和統一了本地控制。
（12）強大的主題化框架
主題編輯器（ThemeRoller）能很容易地進行高度個性化和品牌化的的界面定制。
接下來我們將通過實例向大家展示jQuery Mobile的特性及好處，讓大家一起來瞭解這個新框架是如何幫助我們在短時間內建立起一個高質量的移動應用程序。當然，在這裡建議代碼使用的移動設備平台最好是iPhone或Android或是在PC電腦上使用Google瀏覽器調試。
9.4 jQuery Mobile的使用
9.4.1 準備工作
首先去官方下載最新的jQuery Mobile版本。其次，建議在頁面中使用HTML 5標準的頁面聲明和標籤，因為移動設備瀏覽器對HTML 5標準的支持程度要遠遠優於PC設備，因此使用簡潔的HTML 5標準可以更加高效地進行開發，避免了因為聲明錯誤出現的兼容性問題。代碼如下：
9.4.2 構建HTML模板
jQuery Mobile可以在普通的html標籤或html 5標籤中工作，在結構化的頁面中，完整的頁面結構分為header、content和footer這三個主要區域。一個最簡單的jQuery Mobile代碼如下：
顯示效果如圖9.1所示：
圖9.1 圖單的jQuery Mobile代碼顯示
在上面代碼中，我們引入了3個文件，這也是使用jQuery Mobile所必備的3個文件：
CSS文件：jquery.mobile.css
jQuery文件：jquery.js
jQuery Mobile文件：jquery.mobile.js
注意：1，默認情況下，移動設備的瀏覽器會像在大屏幕的Web瀏覽器那樣顯示你的頁面，寬度達到了960像素，然後縮小內容以適應移動設備的小屏幕，因此用戶在移動設備看這個頁面時感覺字體就比較小了，必須要放大才能看得清楚。幸運的是可以使用特殊的Meta元素可視區進行糾正，這個元素會通知瀏覽器使用移動設備的寬度作為可視區的寬度。對於Web應用程序，一個常見的設置是：
這個元素設置寬度為設備的最大寬度，禁止用戶放大和縮小。
2，在<head>中按順序加入框架的引用，注意加載的順序：
9.4.3 data-role屬性
在上面的代碼中可以看到頁面中的內容都包裝在p標籤中，並在標籤中加入data-role=「page」
屬性。這樣jQuery Mobile就會知道哪些內容需要處理。把代碼簡化後，如下所示：
注意：data-屬性是HTML 5新推出的很有趣的一個特性，它可以讓開發人員添加任意屬性到html標籤中，只要添加的屬性名有「data-」前綴。
表9-1 data-role屬性
類 型描 述示 例Button設置元素為button類型data-role=「button」Checkbox設置元素為復選框類型，只需要設置type=「checkbox」,不需 要data-roletype=「checkbox」Collapsible設置元素為一個包裹標題和內容的容器data-role=「collapsible」Collapsible set設置元素為一個包裹Collapsible的容器data-role=「collapsible-set」Content設置元素為一個內容容器data-role=「content」Dialog設置元素為一個對話框data-rel=「dialog」Field container設置元素為一個區域包裹容器，包含label/form的元素對data-role=「fieldcontain」Flip toggle switch設置元素為一個翻轉切換元素data-role=「slider」Footer頁面頁腳容器data-role=「footer」Header頁面標題容器data-role=「header」Link鏈接元素，它共享button的屬性data-role=「button」Listview設置元素為一個列表視圖data-role=「listview」Navbar設置元素為一個導航欄data-role=「navbar」Page設置元素為一個頁面容器data-role=「page」Radio button設置元素為一個單選框，不需要data-roletype=「radio」Select設置元素為一個下拉框，不需要data-role<select></select>Slider設置元素為一個有範圍值的文本框data-role=「slider」Text input & Textarea設置元素為一個文本框、數字框、搜索框等type=「text|number|search|等等」9.4.4 添加內容
如果我們需要在頁面中添加一個簡單列表，那麼就可以使用剛才所說的data-role屬性，將下面代碼插入到content中：
顯示效果如圖9.2所示：
圖9.2 列表顯示效果（一）
如果你不喜歡寬度為100%的列表，那麼你可以通過為ul元素設置data-inset屬性。例如為<ul>設置data-inset=「true」。顯示效果如圖9.3所示。
圖9.3 列表顯示效果（二）
9.4.5 樣式切換
jQuery Mobile自帶了一些不錯的主題，這些主題能夠快速的幫助開發人員修改頁面的UI。我們只需在組件上添加data-theme屬性即可，它的值是a、b、c、d或e。此外，jQuery Mobile還提供了一個強大的ThemeRoller組件（http://jquerymobile.com/themeroller/），可以讓你自定義主題。ThemeRoller如圖9.4所示：
圖9.4 Theme Roller界面
為列表添加data-theme=「e」後，顯示效果如圖9.5所示：
圖9.5 切樣列表樣式
9.5 其他框架
9.5.1 移動框架
在移動框架方面，除了jQuery Mobile之外，還有很多移動框架可選。
jqMobi（http://jqmobi.com）
此jqMobi不是jQuery Mobile，它們兩個完全不同，jqMobi是基於jQuery重寫的，適應於iOS和Android等移動設備的JavaScript框架，它含有jQuery Mobile的大部分功能，但是jqMobi
體積更小，速度更快，兼容性也有所不同。
jqMobi由三個組件組成：查詢庫、jqUi和jqPlugin。查詢庫庫提供了60多個API調用，包括Ajax調用、針對webkit的系統選擇器調用等。jqUi是一個用戶界面程序庫，提供了按鈕、部件、固定的header/footer以及可控的滾動部件。該工具包也僅針對移動版本的WebKit瀏覽器，同時支持Android 2.2及更高版本。jqPlugin是用於針對WebKit瀏覽器交互和接口的插件支持。
Sencha Touch（http://sencha.com）
Sencha Touch是專門為移動設備開發應用的JavaScript框架。通過Sencha Touch你可以創建一個非常像native app的web app，用戶界面組件和數據管理全部基於HTML 5和CSS3的Web標準，兼容Android和iOS。
Sencha Touch是一個重量級的框架，組件封裝較多，在各平台交互表現統一，但入門門檻較高。
Zepto.js（http://zeptojs.com/）
Zepto.js是一個專為Mobile WebKit瀏覽器而開發的一個JavaScript框架。它能夠幫助開發人員
簡單、快速地完成開發任務。更重要的是這個JavaScript框架，是超輕量級的，只有5KB。Zepto.js的語法借鑒並兼容jQuery。
9.5.2 PhoneGap
PhoneGap是一個開源的開發框架，使用HTML、CSS和JavaScript來構建跨平台的的移動應用程序。它使開發者能夠利用iPhone、Android、Palm、Symbian、Blackberry、Windows Phone和Beda智能手機的核心功能——包括地理定位、加速器、聯繫人、聲音和振動等。同時借助PhoneGap, Web開發者還可以把已有的Web應用打包成移動平台上的本地應用或者應用商店裡的App，讓用戶直接下載安裝。
PhoneGap的特性包括：將HTML/JavaScript代碼打包成本地App，幫助開發者部署到各種平
台上，並提供了訪問移動應用本地特性的接口，同時支持多語言混合的插件機制。
9.6 小結
本章首先簡單介紹了HTML 5，然後重點介紹了jQuery Mobile，包括它的特性和用法。最後對其他的移動框架進行了介紹。
移動互聯網是互聯網的未來。HTML 5作為未來移動終端的核心技術，這一點已經成為業界共識，各家瀏覽器廠商也頻頻升級瀏覽器來更好地支持HTML 5。各大開發廠商的加入，也讓移動開發領域的競爭變得異常激烈。
相信不久的將來，不論是桌面應用還是移動應用，HTML 5都是創新的主旋律。