教程細(xì)節(jié)
項(xiàng)目：HTML
難度：中級
預(yù)計(jì)完成時間：1 小時
如 果你想要創(chuàng)建網(wǎng)頁應(yīng)用程序，你可能會想到使用 HTML5。HTML5 是應(yīng)用程序開發(fā)的新寵，它有可能改變軟件開發(fā)與銷售的形式。它也可以讓那上百萬會做網(wǎng)頁的人參與到應(yīng)用程序開發(fā)中，這些人從沒想過他們的技術(shù)可以應(yīng)用在其 他方面。不過在開始開發(fā)之前，關(guān)于 HTML5 的一些東西是你必需了解的。在這個教程中，我將教你一些基礎(chǔ)！
何為 HTML5？
HTML5 是正在制定的 W3C 規(guī)范。
它從 WHATWG 開始起步，將成為 HTML 未來的黃金準(zhǔn)則。如果你最近關(guān)心過這方面，你很可能知道 XHTML 2 本該是下一個重要版本，但它卻半途而廢了。其中原因很多，而爭論的一個主要原因在于沒多少網(wǎng)站的語法是完美的，而 XHTML 2 想要強(qiáng)制語法的完美。而完美語法的確切定義也向來是個難題。當(dāng)瀏覽器廠商意識到想要過渡到 XHTML 2 有多困難時，事情就不了了之了。
這時有一群人棄 W3C 而開始開發(fā) WHATWG。這些人不僅想重構(gòu) HTML，還想重構(gòu)整個標(biāo)準(zhǔn)制作流程。他們開始著手制作新的 HTML5 標(biāo)準(zhǔn)。他們開發(fā)的原則是沒有完美，而且他們并不需要告訴這個世界如何應(yīng)用 HTML 技術(shù)。他們轉(zhuǎn)而專注于 HTML 世界的實(shí)際情況。1
他們還花時間整理了在社區(qū)中涌現(xiàn)的一些想法。這就是 HTML5 規(guī)范中許多新元素（例如進(jìn)度條、視頻，和音頻標(biāo)簽）的來源。這些人創(chuàng)造出應(yīng)該創(chuàng)造的規(guī)范，他們只想制定特定的標(biāo)記，能夠幫助人們完成現(xiàn)在已經(jīng)在做的事情。
除了標(biāo)記，WHATWG 還開始創(chuàng)建一些新的 JavaScript API。這是 HTML5 變得像“應(yīng)用程序”的地方。他們創(chuàng)建了離線數(shù)據(jù)儲存標(biāo)準(zhǔn)，以及一個離線應(yīng)用程序緩存，這樣一來整個應(yīng)用程序就可以離線保存了。他們還組織了新的工作團(tuán)隊(duì)處理小工具和設(shè)備訪問（為了使用類似照相機(jī)和重力感應(yīng)之類的設(shè)備）的方面。
整個標(biāo)準(zhǔn)進(jìn)程有個小逸聞：有段時間里不同的渲染引擎之間的區(qū)別太大了，以至于若想要兼容不同瀏覽器就得先嗅探出用戶使用的是哪一種瀏覽器，然后根據(jù)瀏覽器類型給出不同的體驗(yàn)。
WHATWG 以及其他項(xiàng)目始終認(rèn)為嗅探瀏覽器并非一個好主意。現(xiàn)在普遍推薦的方式是漸進(jìn)式增強(qiáng)。一言以蔽之，漸進(jìn)式增強(qiáng)即：不要只是定下來某個瀏覽器會得到體驗(yàn) Y，另一個會得到體驗(yàn) Z，為什么不檢測高級功能支持，然后建立華麗體驗(yàn)?zāi)兀咳绻麨g覽器由于什么原因不支持高級功能 X，那么用戶就只能獲得默認(rèn)的體驗(yàn)。
最高版本的規(guī)范
這是 HTML5 規(guī)范的另一特點(diǎn)：它很可能成為版本最高的規(guī)范。將來，W3C 不會提高 HTML 版本，例如 HTML6，而只會維護(hù)最新版本的 HTML，并且將會有一個黃金標(biāo)準(zhǔn)規(guī)范。網(wǎng)頁開發(fā)人員可以利用漸進(jìn)式增強(qiáng)來應(yīng)付瀏覽器能力的差異，并等待瀏覽器廠商逐漸達(dá)到規(guī)范。
那么 HTML5 應(yīng)用程序是什么呢？
我們定義了 HTML5，那么 HTML5 應(yīng)用程序又是什么呢？
本質(zhì)上講，HTML5 應(yīng)用程序使用 HTML5 草案中所有華麗的新功能，創(chuàng)造類似應(yīng)用程序的體驗(yàn)。
這意味著離線儲存數(shù)據(jù)、函數(shù)化，以及像真正的應(yīng)用程序一樣運(yùn)行，而非僅僅是供瀏覽的內(nèi)容。你很可能現(xiàn)在就在用網(wǎng)頁應(yīng)用程序了，例如 Gmail。Gmail 實(shí)際上有個 HTML5 版本，如果你在 iPhone 或者 iPad 上訪問 Gmail，你就可以試試它。
我為什么要使用 HTML5？
為什么我要使用 HTML5，而不是對象化的 C 語言、Flash、Silverlight，或者一些其他類型的特定設(shè)備環(huán)境呢？首先，我要說明一些不使用 HTML5 的原因。
如果我要制作最新最好的三維射擊游戲，我不會選擇 HTML5。它根本沒有制作這類節(jié)奏緊張的游戲的豐富的圖形庫，不過它們也是依賴標(biāo)準(zhǔn)才能讓三維圖形程序走入瀏覽器的。
如果你想要是用設(shè)備上的照相機(jī)，或者本地文件系統(tǒng)，HTML5 也不是最好的選擇。有使用原生封包的解決方案，這我后面還會簡單說明，還有一些有所幫助的標(biāo)準(zhǔn)。
雖然有些特定情況不適合使用 HTML5，但許多如今為 iOS 和 Android 生產(chǎn)的應(yīng)用程序都可以簡單地通過 HTML5 實(shí)現(xiàn)。不僅僅是技術(shù)上能夠?qū)崿F(xiàn)，使用 HTML5 還有其他好處。
你已經(jīng)知道如何使用它了
目前，如果你是個網(wǎng)頁開發(fā)人員，你已經(jīng)擁有了所有進(jìn)入這一領(lǐng)域的工具了。HTML5 應(yīng)用程序開發(fā)只不過是改變了你看待網(wǎng)頁的方式罷了。在某些例子中你只要在 HTML 中添加幾行，然后在服務(wù)器上添加些東西，你就擁有了完整的有效的離線 HTML5 應(yīng)用程序了。
我們越遵循標(biāo)準(zhǔn)，標(biāo)準(zhǔn)就越有用。
除 此之外，網(wǎng)頁開發(fā)人員也已經(jīng)深諳跨瀏覽器的問題。雖然跨瀏覽器的問題越來越多，但網(wǎng)頁開發(fā)人員相比其他類型的開發(fā)人員而言有個明顯優(yōu)勢，因?yàn)樗麄冊缫阎?知彼。跨瀏覽器開發(fā)的另一部分在于標(biāo)準(zhǔn)。我們越遵循標(biāo)準(zhǔn)，標(biāo)準(zhǔn)就越有用。網(wǎng)頁開發(fā)人員已經(jīng)在某些方面吃足苦頭，現(xiàn)在它開始回報(bào)了。你不需要學(xué)習(xí)一整套其他 的非標(biāo)準(zhǔn)兼容性組件，而只要簡單地依賴于標(biāo)準(zhǔn)體系所制定的方法。
最后，當(dāng)說到寫代碼的時候，你很難察覺到自己也許帶有派別性。
當(dāng)你觀察一家手持設(shè)備生產(chǎn)商如何管理自身，以及它如何靠著決定在系統(tǒng)之外工作而選擇留住其開發(fā)人員，你就正在支持自由的概念。
這是個小概念，但它很有意義，因?yàn)閺拈L遠(yuǎn)來看我們希望我們的手持設(shè)備開發(fā)人員能夠變得開放，讓我們盡可能地破解它們。
我該如何使用 HTML5？
實(shí)際上使用 HTML5 并不困難。它可能只是寫幾行代碼，也可能是寫出一整個新的應(yīng)用程序。下面是你開始的一些方法。
1. 創(chuàng)建一個適合移動設(shè)備的網(wǎng)站
許多網(wǎng)站只要作些改動就可以讓移動設(shè)備體驗(yàn)更友好。首先應(yīng)該檢查一下 viewport。
viewport 元標(biāo)簽并不是標(biāo)準(zhǔn)，不過它是個廣泛認(rèn)可的慣例。許多移動瀏覽器使用該標(biāo)簽來設(shè)置網(wǎng)頁渲染的某些方面。
要想了解更多 viewport 信息，請查閱以下文檔：
除了僅僅 viewport 以外，還應(yīng)該確保你的網(wǎng)頁的靈活性：例如，使用動態(tài)寬度而非靜態(tài)寬度。移動設(shè)備形狀大小各異，瀏覽器窗口也是一樣。在腦子里記著靈活性的概念進(jìn)行設(shè)計(jì)將自動讓你的網(wǎng)頁更加適合移動設(shè)備。
Doctype
下一版本的 HTML5 的一個非常棒，非常有意思的地方在于：doctype 跟渡渡鳥一樣說拜拜了。由于許多原因，它依然必須待在那兒，但它的意義縮水了，幾乎毫無意義。
這太棒了。我們再也不需要復(fù)制粘貼一大串文字了，因?yàn)闊o論如何，有哪個家伙能把那玩意兒全背出來？
2. 讓你的網(wǎng)站離線工作
一些瀏覽器現(xiàn)在具有應(yīng)用程序緩存。應(yīng)用程序緩存允許你預(yù)先告訴瀏覽器，網(wǎng)頁上的哪些資源需要離線使用。接著瀏覽器就會下載這些文件供離線之用。當(dāng)客戶端離線工作，瀏覽器就會使用那些緩存的資源。
不過應(yīng)用程序緩存可不是你只要修改標(biāo)簽就可以搞定的。你將需要能夠修改服務(wù)器上的 content-type 頭文件。在 Apache 中，你要么將這些放在設(shè)置文件中，要么放在一個 .htaccess 文件中。
AddType text/cache-manifest manifest
這樣做了以后，你就可以在網(wǎng)頁的 html 元素中添加如下標(biāo)簽。你可以給你的 manifest 取任何名字，不過請確保它在你的網(wǎng)站的根目錄下，而且文件名以 .manifest 結(jié)尾。
然后，你可以創(chuàng)建你的 manifest 文件了。簡單地列出所有你想要在離線時使用的東西就行了。你不能在這里存放跨域名的文件，而且你不應(yīng)該存放任何經(jīng)常改變的東西。下面是個 manifest 文件示例。
CACHE MANIFEST
# Version 1
my.html
my.css
my.js
my.png
當(dāng)你將這些設(shè)置妥當(dāng)時，就在支持應(yīng)用程序緩存的瀏覽器里測試一下吧。
如果你想要更新某個資源，只要修改 manifest 文件即可。即使只是添加一條注釋都會提醒瀏覽器更新應(yīng)用程序緩存。
眾所周知應(yīng)用程序緩存很難調(diào)試。這里有本書提供了一些檢查你的應(yīng)用程序緩存狀態(tài)的好方法。
3. 讓你的視頻在任何地方都可用
如果你在網(wǎng)站上放有視頻內(nèi)容，而且通過 flash 播放器播放，那么你可就錯過了將視頻展現(xiàn)給使用 iOS 設(shè)備和不支持 flash 的手機(jī)（大部分手機(jī)）的人們的機(jī)會了。
HTML5 有兩個新的標(biāo)簽可以讓顯示多媒體更加方便：audio 和 video。下面是 video 標(biāo)簽的示例。
現(xiàn)在，如果你想要盡可能支持更多的瀏覽器，你就需要將你的內(nèi)容以多種不同格式編碼。然后，如下列出。
這將保證你的內(nèi)容可在 Firefox、Safari、Chrome，以及移動電話上播放。最后，對于那些不支持 video 標(biāo)簽的瀏覽器，你仍然可以回頭選擇 flash 播放器。當(dāng)瀏覽器不支持某個標(biāo)簽時，它通常就不會處理該標(biāo)簽，然后繼續(xù)檢索直到找到一個它認(rèn)識的標(biāo)簽。在這種情況下，如果你將一個 embed 或者 object 放在 video 標(biāo)簽中，那么類似 IE 的瀏覽器就會使用 object。但是，支持 video 標(biāo)簽的瀏覽器就會忽略嵌入的 flash。
總結(jié)：現(xiàn)在就開始使用 HTML5 標(biāo)簽
類似 header、footer、nav、aside、article，以及 section 的標(biāo)簽由于是語義標(biāo)簽所以很好用。他們部分告知了網(wǎng)頁訪問者你放置內(nèi)容的意圖。使用它們是很好的。在將來，他們的幫助將會比現(xiàn)在還要大，不過沒有任何理由阻止你現(xiàn)在就開始使用它們。
如果你使用這些新標(biāo)簽，有些類似 IE 的瀏覽器會“出亂子”，不過別擔(dān)心。IE 支持在 DOM 中添加標(biāo)簽類型，而你只需要告訴 IE 這一情況。為了解決這個問題，Remy Sharp 創(chuàng)造了 HTML5 Shiv。如果你將其以 IE 選擇性注釋包含在網(wǎng)頁的頭部，你的頁面就能正常渲染了。
現(xiàn)在你就用上了好用的語義 HTML 了！
附加信息：在應(yīng)用商店里銷售你的應(yīng)用程序
沒錯，就是現(xiàn)在，你可以將你的 HTML5 應(yīng)用程序拿到移動應(yīng)用程序商店里銷售。下面兩個項(xiàng)目可以幫助人們僅使用 HTML、JavaScript，和 CSS 開發(fā)“原生”移動應(yīng)用程序。看看吧：
另外，我們自己的 CodeCanyon 在幾個月內(nèi)將會發(fā)布 HTML5 應(yīng)用程序的新分類。在這個分類中，我們將銷售從高級自定義的視頻播放器，到庫，再到演示應(yīng)用程序的所有東西。
為了給這個分類做準(zhǔn)備，我們已經(jīng)發(fā)起了獎金 7000 美元的競賽。要是感興趣的話，你還有兩周時間參加！
一句話
沒有任何理由阻止你探索 HTML5，如果你想要在這場游戲中一馬當(dāng)先，你就應(yīng)該現(xiàn)在就開始建立 HTML5 應(yīng)用程序。感謝你的閱讀！
關(guān)于作者
Alex Kessinger是一位前端網(wǎng)頁開發(fā)人員，目前為雅虎！（Yahoo!）效力