如何使用 HTML5 構建應用程序

如何使用 HTML5 構建應用程序，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

HTML5 已經推出，Web 不是一成不變的。

您以前一定聽說過這句話或類似的內容。 我想，當您聽到這句話時，可能會變得很激動，轉動眼珠、皺著眉頭一臉疑問。 也可能這三種反應您都會有。

有這些反應，我非常能理解。 HTML5 十分令人稱道，正如我們所知，它可能會改變 Web，但它的作用也被夸大了。 而且，它的真正意義還難以琢磨。 在使用 HTML5 構建應用程序時，我自己也有過上面所說的每一種反應。 HTML5 是一個寬泛的話題，要掌握它很困難，更不用說知道從哪里開始使用這套激動人心的新技術了。

本文是 MSDN 雜志 系列文章中的第一篇文章，旨在讓您全面了解本文中第一句話為什么是正確和重要的。 在接下來的幾個月，我希望幫助大家了解 HTML5 對您（既是 Web 開發人員也是使用 Microsoft 工具和技術的開發人員）的意義。 我希望可以幫助您簡化 HTML5 的一些復雜性，揭示過分夸大的真相。 我還將介紹一些現在可用的 HTML5 功能，以及一些值得關注的激動人心的技術，盡管這有點延伸遠了。 最后，我會提供一些提示，幫助您在立即采用 HTML5 技術的同時，繼續使用舊式瀏覽器為用戶提供出色的體驗。

如果您對 HTML5 感到十分興奮，我希望幫助您將這種興奮感轉化為可以立即付諸實踐的想法。 如果您存在疑問，我希望幫助您了解 HTML5 為什么十分重要。 如果只是不清楚 HTML5 的意義何在，您不必擔心：這就是本系列中的第一站要解決的問題。

什么是 HTML5？

到現在為止，您可能會發現 HTML5 對不同的人有著不同的意義。 對有些人來說，它只意味著諸如 <header> 和 <footer> 之類的新標記以及可用在標記中的一些新屬性。 對另一些人來說，它意味著 Web 上一切嶄新和有趣的功能，包括在單個瀏覽器中實現的技術或未正式包含在 HTML5 中的其他規范。 當然，了解 HTML5 的真正意義通常是很多人面臨的第一個障礙。

坦率地講，存在各種各樣的定義是有道理的。 HTML5 十分龐大！ HTML5 由國際標準團體萬維網聯盟 (W3C) 正式定義，包含與下一代 Web 技術相關的 100 多項規范。 將所有這 100 多項規范統稱為 HTML5，您可能會認為 W3C 過度簡化了這些規范的定義。 HTML5 涉及的內容非常廣泛，很難為它下一個合適的明確定義。我認為 W3C 是通過引入 HTML5 作為 Web 變化的統一概念，從而界定這種變化的范圍。

實際上，HTML5 是描述一組 HTML、CSS 和 JavaScript 規范的泛稱，這些規范旨在幫助開發人員構建下一代網站和應用程序。 這個定義主要由三部分組成：HTML、CSS 和 JavaScript。 這三個部分規定開發人員如何使用改進的標記、更豐富的樣式功能以及新的 JavaScript API 以充分利用新 Web 開發功能。 簡單地說，HTML5 = HTML + CSS + JavaScript。

就是這樣。 HTML5 是關于對 HTML、CSS 和 JavaScript 的更改的。 這三個術語描述了 HTML5 的廣度和范圍，您不必擔心所有這 100 多條規范。 還是認為這有點簡略？ 可能是這樣，但您很快會明白，全面的 HTML5 定義并不像您選擇采用的技術那樣重要，因為這些技術值得您花費時間和精力。

對定義有所了解后，下面讓我們花點時間說一下 Microsoft 在哪些方面涉及了 HTML5 領域。

HTML5 和 Internet Explorer

正如我所提到的，構成 HTML5 的規范集由 W3C 管理。 W3C 由致力于幫助推動和規定 Web 未來的團體、組織和個人組成。 WC3 是以共識為基礎的組織，運營方式通常是：建立委員會（也稱為工作組），按相關規范劃分工作領域。 規范可由任何成員發布，所有歸范（包括 HTML5 之外的規范）均歸 W3C 所有，需要經過從最初起草到正式推薦的五階段流程。

Microsoft 是 W3C 成員，在許多 HTML5 標準和工作組的規范流程中起著十分積極的作用。 和所有主要瀏覽器供應商一樣，Microsoft 也在 HTML5 上進行了大量投入，與 W3C 及其他供應商一起協作，確保開發人員能夠依賴在所有主要瀏覽器中以互操作方式可靠實現的 HTML5 技術。

就瀏覽器供應商 Microsoft 而言，方法有四：

1. 通過 Internet Explorer 9 提供網站適用的最佳 HTML5。

2. 通過 Internet Explorer 平臺預覽版向開發人員公開即將發布的功能。

3. 通過提交給 W3C 的測試在互操作性方面進行投入。

4. 通過 HTML5 實驗室提出不穩定標準的原型。

“網站適用的 HTML5”是 Microsoft 用于描述當今可使用的 HTML5 技術的術語，這些技術已經廣泛支持所有主要瀏覽器。 諸如新 HTML 標記、畫布、可縮放的向量圖形、音頻和視頻、地理位置、Web 存儲之類的技術及許多新 CSS3 模塊都屬于這個領域，它們在 Internet Explorer 9 中以及其他主流瀏覽器中實現。 我們將在本系列中花大量時間討論這些技術以及當前如何采用這些技術。

除了目前所提供的方法之外，Microsoft 還使用了公共平臺預覽版通知開發人員下一版瀏覽器即將推出的功能，并向他們收集反饋。 對于 Internet Explorer 9，Microsoft 每六到八周就會發布一次平臺預覽版，每次都會宣布新的 HTML5 增強功能、特性及性能改進，供開發人員進行試用和評估。 Internet Explorer 9 是在三月發布的，截止到六月初，Microsoft 已發布了 Internet Explorer 10 的兩個平臺預覽版，可以看出 Microsoft 一直在定期發布 Internet 預覽版。 作為一名開發人員，您將需要利用最新預覽版了解、測試和影響瀏覽器的發展。 您可以下載最新的 Internet Explorer 平臺預覽版，網址是 IETestDrive.com。

為確保 HTML5 在所有瀏覽器中一致地工作，Microsoft 已在互操作性方面進行了大量投入，創建了與 HTML5 相關的唯一最大測試用例組，并將其提交給 W3C。 W3C 將這個測試用例組用作 HTML5 在每個瀏覽器中的“就緒度”的權威來源，這在歷史上是首次。 作為開發人員，我和大家所得到的最終結果就是，可以一次性地采用并實現 HTML5 技術，并確信它們將在所有瀏覽器中一致地工作。 有關 Microsoft 解決互操作性問題的詳細信息，請訪問 bit.ly/dxB12S。

盡管 Internet Explorer 9 已采用了一些 HTML5 技術，并通過 Internet Explorer 平臺預覽版宣布了 Internet Explorer 10 將采用其他 HTML5 技術，一些常用和值得發布的規范還需要 W3C 和瀏覽器供應商再做一些工作，然后才能在應用程序中實現。 其中一個例子就是 Web 套接字，這個令人振奮的規范使開發人員可以公開與后端服務器的雙向通信通道，從而實現一定的“實時”連接，以前在 Web 應用程序中是無法實現這一點的。 作為一名開發人員，您一定會想馬上在所構建的應用程序中大量使用 Web 套件字。 但 Web 套接字規范還在快速變化著，W3C 還在討論這項規范的主要方面，仍未定稿。 在這種情況下，現在很難在所有瀏覽器中可靠一致地提供此功能。

對于像 Web 套接字（我們將在以后的文章中深入介紹）這樣不穩定或不斷演變的規范，Microsoft 創建了 HTML5 實驗室，這是供開發人員對這些技術的初步實現進行試驗的網站。 這個網站提供了可下載和本地試用的原型，還提供了某些規范的托管演示版本。 這個網站旨在為您提供一個親自試用這些規范的地點，以便您可以在這些規范在瀏覽器中趨于穩定和快要實現時向 Microsoft 和 W3C 給予相關反饋。 有關 HTML5 實驗室的詳細信息，請訪問 html5labs.com。

HTML5 和 Microsoft 開發工具

除了參與 W3C 和在瀏覽器中支持 HTML5 技術之外，Microsoft 還從另一方面參與對開發人員十分重要的 HTML5：這就是參與 HTML5 工具。

2011 年初，Microsoft 更新了兩個開發工具的 Service Pack：Visual Studio 2010 和 Expression Web 4。 這兩個工具的 Service Pack 提供了用于驗證的 HTML5 文檔類型以及用于新 HTML5 標記和屬性的 IntelliSense。 如果您使用的是 Visual Studio 2010 SP1，可以啟用 HTML5 架構，方法是：單擊“工具”|“選項”|“文本編輯器”|“HTML”|“驗證”，然后在“目標”下拉列表中選擇“HTML5”選項，如圖 1 所示。 也可以在任何 HTML 文件中通過 HTML 源編輯工具欄將 HTML5 設置為默認架構，如圖 2 所示。

圖 1 通過“選項”對話框啟用 HTML5 架構

圖 2 在 HTML 源編輯工具欄上設置 HTML5 架構

在設置好默認架構后，您就會在 Visual Studio 中獲得對 HTML 中的 28 個新語義標記以及標記特定的新屬性和新全局屬性的 IntelliSense 支持，如圖 3 所示。

圖 3 Visual Studio 2010 SP1 中的 HTML5 IntelliSense

2011 年 6 月，Microsoft 通過發布的 Web Standards Update for Microsoft Visual Studio 2010 SP1 進一步更新了它對 HTML5 的支持。 這一擴展適用于所有版本的 Visual Studio 2010，在 Visual Studio 中增強了 HTML5 IntelliSense 和驗證，提供了用于地理位置和 DOM 存儲等新瀏覽器功能的 JavaScript IntelliSense，還提供了綜合 CSS3 IntelliSense 和驗證。 可以從 bit.ly/m7OB13 下載此擴展，此擴展將定期進行更新，為 HTML5 開發提供增強工具。

對于 Expression Web 4 SP1，在“工具”|“頁面選項”下設置 HTML5 架構可提供相同的 IntelliSense，這一工具還為 border-radius、box-shadow 和 transform 等多個草擬 CSS3 模塊提供 CSS3 IntelliSense。

如果您使用的是 WebMatrix（請訪問 web.ms/WebMatrix），您可能會發現所有新創建的 .html、.cshtml 或 .vbhtml 文檔所包含的默認標記與圖 4 所示的類似。 正如我將在本系列中的下一篇文章所討論的，這就是有效的基本 HTML5 文檔。 最值得注意的是，文檔類型和元數據字符集標記精簡多了。 使用這一簡單文檔類型可在現今的所有瀏覽器中觸發 HTML5 模式，默認情況下，使用 WebMatrix 可以更方便地提供 HTML5 文檔。

圖 4 WebMatrix 中的默認 HTML 文檔

   
   
  
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body></body>
</html>

順便說一下，如果對您來說這還不是足夠新的 HTML5 工具（全部是自 2011 年 1 月推出的），那么最近您可以通過四月在 MIX11 發布的 ASP.NET MVC 3 Tools Update 體驗使用 ASP.NET MVC 的樂趣。 除了很多其他新工具特性之外，ASP.NET MVC 3 Tools Update 還提供了對新項目使用 HTML5 文檔類型的選項，并在新應用程序的 Scripts 文件夾中附帶了 Modernizr 1.7。 Modernizr 是一個可顯著簡化 HTML5 開發的 JavaScript 庫，我將在以后的文章中進行深入討論。

這里的關鍵在于，即使只是剛剛用在瀏覽器中的 HTML5，也會迅速地增加正式工具支持，Microsoft 甚至會通過社區增加對庫（例如 Modernizr）的支持。 如今，在面向 HTML5 時，可以通過 Microsoft 中的工具獲得一些幫助，預計 HTML5 支持將會隨著時間不斷地發展和改進。

在應用程序中“采用”HTML5

到現在為止，您應當意識到 HTML5 并不是一下子便可采用或遷移到的單個實體。 采用而不是大規模使用 HTML5，就是要進行逐一技術評估，確定哪些技術適合您的應用程序。 對于所評估的每項 HTML5 技術，請在確定這項技術是否可供采用時，（至少）考慮以下因素：

1. 這項技術在所有主要瀏覽器中的實現廣度如何？

2. 如何采用這項技術并為不支持給定功能的瀏覽器提供“填充代碼”支持？

第一個因素是最重要的，再加上對于網站訪問者常用瀏覽器的了解，您會很清楚這 100 多項規范中哪部分值得進一步評估。 這部分應包含您當前可為用戶可靠采用的一組穩定規范。

不過，即使使用這組穩定的 HTML5 技術，也不應忽略尚未轉向較新瀏覽器的用戶。 如果您大量參與網站的日常開發，一定會對使用給定瀏覽器訪問網站的用戶百分比有大致的了解。 對于我們大多數人來說，可以很容易查看使用舊式瀏覽器進行訪問的用戶百分比，因而會得出這樣一個結論：無論采用什么 HTML5 技術，都會對這些用戶產生負面影響。 幸運的是，正是有了“填充代碼”，我們采用 HTML5 就不會遙遙無期了。

Paul Irish（jQuery 和 Modernizr 項目的開發人員）將填充代碼定義為“…模擬未來 API 的填充程序”，為舊式瀏覽器提供備用功能。”填充代碼就像網站的填補物；該方法可確定給定 HTML5 功能是否適用于當前瀏覽網站的用戶，并相應地提供“填入”這種支持的填充程序或一系列妥善降級，從而使網站仍能發揮全部功能。

與填充代碼相關的最常用庫是 Modernizr，也就是我前面提到的 JavaScript 庫。 Modernizr 為語義標記提供了一些基本填充代碼，為主要 HTML5 技術提供了功能檢測，還提供了基于支持功能的條件 CSS。 如前所述，Modernizr 將成為下一篇文章的主題；它與許多其他填充代碼庫一起構成了本系列的核心內容。 要了解詳細信息，請從 modernizr.com 下載 Modernizr。

在涉及選擇采用哪些技術時，最終列出的，可能既有受到廣泛支持的規范，也有必須針對某些瀏覽器為其提供填充代碼支持的其他規范。 您只需根據當前需要和實際情況了解列表的組成部分。

在接下來的幾個月里，我將介紹幾個重要規范，從地理位置、窗體和畫布到 Web 工作線程、Web 套接字和 IndexedDB。 其中一些規范受到廣泛支持并且是“網站適用的”，比如 Web 套接字，它們很具有創新性，無論在哪里使用都令人無法忽略。 對于每個規范，我都將介紹現有的支持、已知的將來支持、有關可在網站中實現規范功能的一些基本知識，以及如何對不支持給定功能的瀏覽器提供填充代碼支持。

最重要的是，立即開始采用 HTML5。 實際上，Web 不會停止變化，您可以通過使用 HTML5 構建出色的下一代 Web 應用程序，從而促進 Web 的發展。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。