共用方式為

本文章是由機器翻譯。

HTML5

使用 HTML5 建置應用程式：須知

Brandon Satrom

HTML5 斯在這裡，和網頁將不會相同。

您一定聽過之前，或類似的其他項目。我會猜到，當您這樣做，您有榮幸地、 上顯型眼睛，或 mouthed 「 為什麼？ 」 這個字，有點 furrowed 您遮額。或許您反應是三個混合。

我不會針對上述任何能怪您程式。HTML5 是令人興奮，並有可能會變更網頁，如同我們所知，但是爆它也取得了解的比例。不僅如此，它真正的意義可能會難以捉摸。我遭遇那些反應的每個自行建立具有 HTML5 的應用程式時。它是一個廣泛的主題，因此很難換行您頭周圍 HTML5，更不知道從何處開始這一技術令人興奮的新組。

這是為一系列的第一個文件MSDN 雜誌，和目標是要提供您完整的本文中的第一個句子為何，則為 true，也是重要。透過未來的幾個月，我想要協助您了解 HTML5 表示您 — 同時身為 Web 開發人員和開發人員使用 Microsoft 工具和技術。我希望，可以簡化某些周圍 HTML5 的複雜性和用意大部分的手法。我也將介紹一些 HTML5 可用功能，以及一些令人興奮的技術，不過再進一步與校車，是值得注意。最後，我會讓您將會幫助您現在，採用 HTML5 技術，而您可以繼續以 
provide 好體驗到較舊的瀏覽器的使用者的一些祕訣。

如果您興奮 HTML5，我想要協助您將該刺激降到您可以立即放入練習的想法。如果您是不賴，我想要協助您了解只需為什麼 HTML5 是很重要的。如果您是剛清楚什麼 HTML5 甚至表示，害怕：這就是我們在本系列中的第一個點。

HTML5 是什麼？

現在，HTML5 表示不同的項目至不同的人，可能會有探索到的。某些，這只是像 <header> 的新標籤 和 <footer> 並可在標記中的新屬性很多。給其他人，就表示是新的所有項目和有趣的 Web 上，包括技術實作中只是單一瀏覽器或其他規格不正式部分的 HTML5。為了安全起見，了解 HTML5 的真正意義通常第一個障礙多人面對。

而且，老實說，有不同的定義數目的某些解釋。HTML5 是個大!正式的說法是由國際標準本文所謂的 「 全球資訊網協會 (W3C) 所定義，包含 100 個以上的規格與下一代的 Web 技術相關的 HTML5。藉由將所有 100-plus 在 moniker HTML5 下這些規格，您可以說 W3C 太過簡化事情。而且很難採取某些動作與 HTML5 一樣大，以及定義明確的方式，雖然我相信 W3C 正在嘗試解決什麼統一的概念，該變更介紹 HTML5 變更 Web 上的範圍。

事實上，HTML5 是一種網狀結構描述一組 HTML、 CSS 及 JavaScript 規格是為了讓開發人員建置新一代網站和應用程式。什麼是值得注意，該定義是其三個部分：HTML、 CSS 及 JavaScript。它們會定義如何開發人員使用改進的標記、 更豐富的樣式功能和新的 JavaScript Api 充分利用新的 Web 開發功能。簡單地說，HTML5 = HTML + CSS + JavaScript。

也就是它。HTML5 是 HTML、 CSS 及 JavaScript 的變更。而不是所有的 100-plus 規格之虞，那些三個詞彙會描述廣度和 HTML5 的範圍。仍然認為這是比較簡單嗎？可以，但您很快就會看到，HTML5 的完整定義無所謂相當於您選擇為您的時間和精力來採用絕對值得的技術。

與在手中定義，讓我們花一段時間的意思 Microsoft HTML5 空間中的什麼位置。

HTML5] 及 [網際網路檔案總管

我提到，組成 HTML5 規格的集合是由 W3C 所 stewarded。W3C 是由人員、 組織和個體投資在協助磁碟機，以及定義未來的網頁所組成。WC3 共識為主的組織，而且通常由形成委員會 (稱為工作群組) 來劃分區塊 (chunk) 的相關規格上工作的運作方式。規格可以提議的任何成員，和所有規格所都擁有的 W3C — 比 HTML5 傘] 底下的多個規格，移至五個階段處理程序從第一個草案正式的建議事項。

Microsoft 是 W3C 的成員，而且在許多 HTML5 標準和工作群組的規格程序中所扮演的非常活躍的角色。就像所有的主要瀏覽器廠商，Microsoft 大量投資在 HTML5，並以 W3C 及其他廠商，以確保開發人員可以倚賴 HTML5 技術可靠地實作在所有主要瀏覽器上以互通方式運作。

在 Microsoft 的瀏覽器廠商的內容，方法是 fourfold：

  1. 提供最佳站台專用 HTML5 今日透過網際網路總管 9。
  2. 即將推出的功能，以透過網際網路總管平台預覽的開發人員公開 (expose)。
  3. 透過測試送出至 W3C 投資交互操作性。
  4. 透過 HTML5 實驗室原型不穩定標準。

"可供站台的 HTML5 」 是 Microsoft 會使用來描述您可以使用今日，因為它們有廣泛的支援在所有主要瀏覽器的 HTML5 技術詞彙。技術喜歡新的 HTML 標籤、 畫布、 可縮放的向量圖形、 音訊和視訊、 Geolocation、 Web 儲存和許多新的 CSS3 模組所有屬於這個空間，以及他們正在實作網際網路總管 9，以及其他主流的瀏覽器中。我們將會花費大量的討論這些技術，以及如何今天採用此系列中的時間。

超過可用，Microsoft 會使用公用的平台預覽通知的什麼下來在下一個版本的瀏覽器中，開發人員，以及要收集意見反應。網際網路總管 9 日 Microsoft 發行的平台預覽每隔六到八週，宣告新的 HTML5 增強功能、 功能和效能改進，讓開發人員嘗試並評估每一次。在 3 月，作為的早期年 7 月發行網際網路總管 9，時，Microsoft 已發行兩個平台預覽網際網路總管 10，Microsoft 仍繼續執行定期發行頻率，用於 Internet Explorer 預覽信號方式。身為開發人員，您會想要利用了解、 測試和瀏覽器的形成方式會影響到最新的預覽。您可以下載在最新的網際網路檔案總管的平台預覽IETestDrive.com。

若要確保 HTML5 在所有瀏覽器一致地運作，Microsoft 已經投資經常在交互操作性，建立並送出至 W3C 的 HTML5 與相關的測試案例的單一最大套件。第一次，這個套件的測試案例將會當做 W3C HTML5 「 準備就緒 」 在每個瀏覽器中的授權來源。身為開發人員為您和我的最終結果是我們可以採納和一次，實作 HTML5 技術和信任它們將會運作一致地在所有瀏覽器。如需有關 Microsoft 的解決辦法互通性的詳細資訊，請移至bit.ly/dxB12S。

雖然有些 HTML5 技術已經存在於網際網路總管 9，而其他人公開的網際網路檔案總管 10 透過網際網路總管平台預覽，某些受歡迎及 newsworthy 的規格他們可以輕鬆地在我們的應用程式中實作之前，必須多執行一些由 W3C 和瀏覽器廠商。其中一個範例是通訊 Web 端，令人興奮的規格，可讓開發人員開啟雙向通訊通道與後端伺服器，因此啟用 「 即時 」 連線能力先前版本所沒有的 Web 應用程式層級。身為開發人員，您可以毫無疑問想像無數使用 Web 通訊端的目前您正在建立的應用程式中。但是 Web 通訊端規格仍變更腳步，與仍然在否則會不斷流動，W3C 內所討論的重要層面。由於這種情況發生，它將很難提供這項功能能一致而可靠地在所有瀏覽器今天。

對於像 Web 通訊端 (這我們將在未來的文章的深入討論) 不穩定或發展規格，Microsoft 會建立 HTML5 實驗室，讓開發人員，來試驗使用草稿實作這項技術的站台。站台提供您可以下載並試著在本機，以及裝載示範的某些規格的原型。目標是要為您提供一個位置來試試這些規格，為您自己，並為您提供 Microsoft 和 W3C 意見反應這些規格上如同它們穩定和附近的瀏覽器中的實作。如需有關 HTML5 實驗室的詳細資訊，請移至html5labs.com。

HTML5 和 Microsoft 開發者工具

除了 W3C 和在瀏覽器支援的 HTML5 技術的 Microsoft 的參與程度，之外還有另一個維度是很重要的開發人員的 HTML5 的 Microsoft 的方式：HTML5 修整它方法。

在早期 2011，Microsoft 更新其開發工具的兩個具有 service pack：Visual Studio 2010年和運算式 Web 4。針對這兩種工具 service pack 供 HTML5 文件類型的驗證，以及 IntelliSense 新 HTML5 標記和屬性。如果您正在使用 Visual Studio 2010 SP1，您可以藉由按一下工具啟用 HTML5 結構描述 |選項 |文字編輯器 |HTML |驗證，然後再於中所示，在 [目標] 下拉式清單中，選取 [HTML5] 選項圖 1。您也可以設定 HTML5 作為預設的結構描述從 [HTML 原始檔編輯工具列在任何的 HTML 檔案，如所示圖 2。

圖 1啟用透過 [選項] 對話方塊的 HTML5 結構描述

[圖 2設定在 HTML 原始檔編輯工具列上的 HTML5 結構描述

一旦設定您的預設結構描述，您就可以藉在 Visual Studio 中的 HTML，以及新的標記專用] 與 [通用屬性、 28 新語意的標籤的 IntelliSense 支援放映中圖 3。

[圖 3HTML5 IntelliSense Visual Studio 2010 sp1

Microsoft 進一步更新在年 6 月 2011 Microsoft Visual Studio 2010 SP1 的 Web 標準更新其發行版本的 HTML5 支援。這個延伸，適用於所有版本的 Visual Studio 2010年，新增進一步 HTML5 IntelliSense 及驗證 Visual Studio、 包含 JavaScript IntelliSense 可用於新的瀏覽器功能，就像 Geolocation 和 DOM 儲存，並提供完整的 CSS3 IntelliSense 和驗證。您可以下載這個延伸，將會定期更新以提供增強的工具，HTML5 程式開發中，從bit.ly/m7OB13。

運算式 Web 4 sp1，設定 HTML5 結構描述，在 [工具] |網頁選項] 可提供相同的 IntelliSense，和工具也提供諸如框線 radius、 方塊陰影、 轉換和類似的幾個草稿 CSS3 模組 CSS3 IntelliSense。

如果您正在使用 WebMatrix (請參閱web.ms/WebMatrix)，您可能已經注意到所有新.html、.cshtml 或.vbhtml 建立文件包含類似於在顯示的內容的預設標記 圖 4。如要探討此系列中的下一個文件中，這是基本、 有效的 HTML5 文件。最值得注意的是，文件類型和中繼字元集標籤有遺失了一大堆 cruft。使用這個簡單的文件類型跨所有現代瀏覽器和 WebMatrix 的觸發程序 HTML5 模式容易讓您藉由提供預設的 HTML5 文件。

[圖 4WebMatrix 中的預設 HTML 文件

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

如果這不是為您足夠新 HTML5 工具 — 所有自年 1 月 2011，透過的方式 — ASP。NET MVC 最近上保有與 ASP 的樂趣。NET MVC 3 工具的更新在 MIX11 年 4 月中已宣告。與新增其他大的數字一起工具 ASP 的功能。NET MVC 3 工具更新程式會提供要用於新專案的 HTML5 文件類型的選項 — 和船隻 Modernizr 1.7 新應用程式的指令碼] 資料夾中。Modernizr 是 JavaScript 程式庫，大幅減輕負擔 HTML5 開發; 我將討論它在未來的文章的深度。

這裡的 takeaway，就是即使在我們的瀏覽器新興的 HTML5 就、 正式的工具支援快速新增的且 Microsoft 甚至社群新增程式庫 (如 Modernizr) 的支援。您今天，針對從 Microsoft 工具需要幫忙的 HTML5 並且預期 HTML5 支援會繼續成長，改善經過一段時間。

' 採用 ' 在應用程式中的 HTML5

現在，您應該要瞭解 HTML5 不是單一的實體，您可以採用或移轉到其中一種是五大心意。採用 HTML5，而不會是批發的選擇，是有關進行技術的技術評估和判斷哪一個技術最適合您的應用程式。您評估每項 HTML5 技術，看看 (至少) 下列因素決定該技術是否準備好要採用時：

  1. 如何普遍實作在所有主要瀏覽器是技術？
  2. 您會採用此技術和"polyfill"支援瀏覽器不支援某一項功能的？

第一個因素是最重要的以及如果加上了解通常使用您的站台訪客的瀏覽器應該可以讓您清楚掌握 100-plus 規格的子集值得進一步評估。一組您可以安心地採用今日為您的使用者的穩定規格應該包含子集。

不過，甚至以穩定該組 HTML5 技術，您不應該忽略您還沒有移動到較新的瀏覽器的使用者。如果您是經常參與每日的開發您的網站，您毫無疑問對粗略大致造訪您的網站，以指定的瀏覽器的使用者的百分比。大多數的人，就可輕鬆查看與舊版瀏覽器瀏覽的使用者的百分比，來結束時，採用任何 HTML5 技術會造成負面影響的使用者。幸好有為"polyfilling"來拯救我們從等到將來可收養 HTML5 一些 foggy 日期。

Paul Irish (jQuery 和 Modernizr 專案的開發人員) 定義為 polyfill"… 模擬未來的 API，提供後援功能至舊的瀏覽器填隙。"Polyfill，就像 spackle 的瀏覽的網站; 它是一種方法來判斷這是否為目前瀏覽您的網站，使用者可以使用指定的 HTML5 功能，以及提供 「 填入該支援 「 填隙，或者是完全可讓您的網站仍函式的非失誤性降低的課程。

最受歡迎 polyfilling 相關聯的媒體櫃是 Modernizr，我之前說過的 JavaScript 程式庫。Modernizr 提供一些基本的 polyfills 的語意標記、 主要 HTML5 技術的功能偵測和支援條件式 CSS 根據支援的功能。如所述，Modernizr 會有的即將出版的文章。 它也會在本系列整個功能凸顯有關 (連同其他許多 polyfilling 程式庫)。若要瞭解詳細資訊，下載在 Modernizrmodernizr.com。

進行選擇採用哪些技術時，您最後的清單可能廣泛支援的規格的組合，您將會擁有 polyfill 到其他規格的某些支援的瀏覽器。只有您會知道該清單中根據您目前的需求和內容實際組成。

在未來的幾個月，我將討論幾個值得注意規格，從 Geolocation、 表單以及畫布，Web 工作者、 Web 通訊端和 IndexedDB。其中幾個受到廣泛支援以及 「 站台通用的 「 和一些像 Web 通訊端，略過，不論其中也獨立今天太 groundbreaking。與每個規格，我將討論目前與已知未來支援，關於如何實作規格的功能在您的網站] 上的一些基本概念，以及如何 polyfill 支援瀏覽器不支援某一項功能。

如果您想要今天挖到 HTML5 的詳細資訊，我建議您挑選幾個方面的書。特別是，我建議您 「 介紹 HTML5 」 (新腿，2010年) Bruce Lawson 和 Remy 井字，」 HTML5 向上及執行 」 (O'Reilly 媒體，2010年) 來標記朝聖者。此外，請務必造訪W3C.org 以取得最新資訊對所有規格，以及 BeautyoftheWeb.com 及 IETestDrive.com分別下載網際網路總管 9] 及 [網際網路總管 10 平台預覽，並深入了解 Microsoft 會將透過瀏覽器偉大 HTML5 經驗。

今天採用 HTML5 所有其他的開始。網頁將不會曾經是相同，真的，而且您可以藉由建立下一個很棒使用 HTML5 的 Web 應用程式是催化劑的一部分。

Brandon Satrom* 為之外 Microsoft 開發人員編輯運作方式奧斯丁。 他在 UserInexperience.com 的部落格，可以接著在 Twitter 上Twitter.com/BrandonSatrom。*

多虧了要對下列技術專家，來檢閱這份文件：Jon Box, Damian Edwards 及 Clark Sell