使用 HTML5 构建应用程序：你需要知道什么

HTML5 已经到来，网络将不再相同。

您无疑已经听说过这句话，或者类似的话。我猜您当时可能感到兴奋、翻白眼，或者在心里默念“为什么？”，然后微微皱起了眉头。也许您的反应是这三种的混合。

我不会责怪您有任何一种反应。HTML5 令人兴奋，并且确实有可能改变我们所知的网络，但它也有些被夸大了。更重要的是，它的真正含义可能难以捉摸。我在使用 HTML5 构建应用程序时，经历了所有这些反应。这是一个广泛的话题，因此很难完全理解 HTML5，更不用说知道从哪里开始使用这套令人兴奋的新技术了。

什么是 HTML5？

您可能已经发现，HTML5 对不同的人意味着不同的东西。对某些人来说，它只是意味着新的标签，如 <header> 和 <footer>，以及标记中提供的一小部分新属性。对其他人来说，它意味着网络上所有新颖有趣的东西，包括仅在单个浏览器中实现的特定技术，或者其他并非正式属于 HTML5 的规范。可以肯定的是，理解 HTML5 的真正含义通常是我们许多人面临的第一个障碍。

而且，说实话，存在各种各样定义的理由。HTML5 非常庞大！HTML5 由万维网联盟 (W3C) 这一国际标准机构正式定义，包含 100 多项与下一代 Web 技术相关的规范。通过将这 100 多项规范都归于 HTML5 这个名称下，您可能会认为 W3C 简化了事情。虽然很难以一种明确的方式来定义如此广泛的 HTML5，但我相信 W3C 试图通过引入 HTML5 作为变革的统一概念，来解决网络正在发生的变化的范围。

事实上，HTML5 是一个总称，描述了一套 HTML、CSS 和 JavaScript 规范，旨在使开发人员能够构建下一代网站和应用程序。该定义中值得注意的是它的三个部分：HTML、CSS 和 JavaScript。它们定义了开发人员如何使用改进的标记、更丰富的样式功能和新的 JavaScript API 来充分利用新的 Web 开发功能。简而言之，HTML5 = HTML + CSS + JavaScript。

就是这样。HTML5 涉及 HTML、CSS 和 JavaScript 的变化。与其担心所有 100 多项规范，不如用这三个术语来描述 HTML5 的广度和范围。仍然觉得这有点太简单化了？可能吧，但正如您很快就会看到的，HTML5 的一个全面定义不如您选择值得您投入时间和精力去采用的技术那么重要。

有了定义，让我们花点时间谈谈微软在 HTML5 领域的位置。

HTML5 和 Internet Explorer

正如我所提到的，构成 HTML5 的规范集由 W3C 管理。W3C 由致力于推动和定义 Web 未来发展的员工、组织和个人组成。W3C 是一个基于共识的组织，通常通过组建委员会（称为工作组）来划分相关规范的工作块。任何成员都可以提出规范，并且 W3C 拥有的所有规范（比属于 HTML5 范围的规范还要多）都经过从初稿到正式推荐的五个阶段。

微软是 W3C 的成员，并在许多 HTML5 标准和工作组的规范过程中发挥着非常积极的作用。就像所有主要的浏览器供应商一样，微软对 HTML5 进行了大量投资，并与 W3C 和其他供应商合作，以确保开发人员可以信赖 HTML5 技术能够在所有主要浏览器上可靠地、互操作地实现。

就微软作为浏览器供应商而言，其方法是四管齐下：

1. 通过 Internet Explorer 9 提供当今最完善的“网站就绪”HTML5。
2. 通过 Internet Explorer Platform Previews 向开发人员公开即将推出的功能。
3. 通过提交给 W3C 的测试来投资互操作性。
4. 通过 HTML5 Labs 对不稳定的标准进行原型开发。

“网站就绪 HTML5”是微软用来描述您可以立即使用的 HTML5 技术的术语，因为它们在所有主要浏览器中都得到了广泛支持。像新的 HTML 标签、Canvas、可缩放矢量图形、音频和视频、地理定位、Web 存储以及许多新的 CSS3 模块等技术都属于这一范畴，并且它们在 Internet Explorer 9 以及其他主流浏览器中都有实现。在本系列中，我们将花费大量时间讨论这些技术，以及如何立即采用它们。

除了目前可用的功能之外，微软还在使用公开的 Platform Previews 向开发人员介绍浏览器下一版本将推出的内容，并收集反馈。对于 Internet Explorer 9，微软每六到八周发布一次 Platform Preview，每次都会宣布新的 HTML5 增强功能、特性和性能改进，供开发人员试用和评估。Internet Explorer 9 于三月发布，截至七月初，微软已为 Internet Explorer 10 发布了两款 Platform Preview，这表明微软正在为 Internet Explorer 预览版保持规律的发布节奏。作为开发人员，您需要利用最新的预览版来学习、测试并影响浏览器的发展。您可以在 IETestDrive.com 下载最新的 Internet Explorer Platform Preview。

为了确保 HTML5 在所有浏览器中都能一致地工作，微软在互操作性方面进行了大量投资，创建并向 W3C 提交了迄今为止最大量的与 HTML5 相关的测试用例。这是 W3C 首次将这套测试用例用作衡量每个浏览器 HTML5 “就绪度”的权威来源。对您和我作为开发人员而言，最终结果是我们可以一次性采用和实现 HTML5 技术，并相信它们能在所有浏览器中一致地工作。有关微软在互操作性方面工作的更多信息，请访问 bit.ly/dxB12S。

虽然一些 HTML5 技术已经存在于 Internet Explorer 9 中，而另一些则通过 Internet Explorer Platform Previews 为 Internet Explorer 10 发布，但一些流行且值得关注的规范需要 W3C 和浏览器供应商进行更多工作，然后才能在我们的应用程序中实现。一个例子是 Web Sockets，这是一项令人兴奋的规范，它允许开发人员与后端服务器建立双向通信通道，从而实现以前在 Web 应用程序中无法实现的“实时”连接。作为开发人员，您无疑可以想象到您目前正在构建的应用程序中有无数种使用 Web Sockets 的方式。但是，Web Sockets 规范仍在快速变化，关键方面仍然不确定，并且仍在 W3C 内部讨论。鉴于这种情况，目前很难在所有浏览器中一致且可靠地提供此功能。

对于像 Web Sockets（我们将在未来的文章中深入介绍）这样不稳定或不断发展的规范，微软创建了 HTML5 Labs，这是一个供开发人员试验这些技术草案实现的网站。该网站提供了可以下载并在本地尝试的原型，以及一些规范的托管演示。目的是为您提供一个尝试这些规范的地方，并让您在这些规范稳定并接近在浏览器中实现时，向微软和 W3C 提供反馈。有关 HTML5 Labs 的更多信息，请访问 html5labs.com。

HTML5 和微软开发人员工具

除了微软在 W3C 的参与以及浏览器中支持的 HTML5 技术之外，微软在 HTML5 方面还有一个对开发人员很重要的维度：它对 HTML5 工具的支持。

2011 年初，微软为其两款开发工具 Visual Studio 2010 和 Expression Web 4 更新了服务包。这两款工具的服务包都提供了 HTML5 文档类型用于验证，以及针对新的 HTML5 标签和属性的 IntelliSense。如果您正在使用 Visual Studio 2010 SP1，可以通过单击“工具”>“选项”>“文本编辑器”>“HTML”>“验证”，然后在“目标”下拉列表中选择“HTML5”选项来启用 HTML5 Schema，如**图 1** 所示。您也可以在任何 HTML 文件中的“HTML 源编辑工具栏”中将 HTML5 设置为默认 Schema，如**图 2** 所示。

一旦设置了默认 Schema，您将在 Visual Studio 中获得对 28 个新的 HTML 语义标签以及新的特定标签和全局属性的 IntelliSense 支持，如**图 3** 所示。

微软通过在 2011 年 6 月发布 Microsoft Visual Studio 2010 SP1 的 Web 标准更新，进一步更新了其 HTML5 支持。此扩展程序适用于 Visual Studio 2010 的所有版本，为 Visual Studio 增加了更多的 HTML5 IntelliSense 和验证功能，包括针对地理定位和 DOM 存储等新浏览器功能的 JavaScript IntelliSense，并提供了全面的 CSS3 IntelliSense 和验证。您可以从 bit.ly/m7OB13 下载此扩展程序，它将定期更新以提供增强的 HTML5 开发工具。

对于 Expression Web 4 SP1，在“工具”>“页面选项”下设置 HTML5 Schema 可提供相同的 IntelliSense，并且该工具还为 border-radius、box-shadow、transform 等几个 CSS3 草案模块提供 CSS3 IntelliSense。

如果您正在使用 WebMatrix（参见 web.ms/WebMatrix），您可能会注意到您创建的所有新的 .html、.cshtml 或 .vbhtml 文档都包含默认的标记，类似于**图 4** 中所示。正如我将在本系列的下一篇文章中讨论的，这是一个基本的、有效的 HTML5 文档。最值得注意的是，doctype 和 meta charset 标签已经去除了许多不必要的内容。使用这个简单的 doctype 会在所有现代浏览器中触发 HTML5 模式，而 WebMatrix 通过默认提供 HTML5 文档使之更加容易。

1.  <!DOCTYPE html>
2.  <html lang="en">
3.    <head>
4.      <meta charset="utf-8" />
5.      <title></title>
6.    </head>
7.    <body></body>
8.  </html>

如果这些还不够多的 HTML5 工具（顺便说一句，这些都是自 2011 年 1 月以来推出的），那么 ASP.NET MVC 最近也加入了进来，并在 MIX11 大会上于四月宣布了 ASP.NET MVC 3 Tools Update。除了许多其他出色的新工具功能外，ASP.NET MVC 3 Tools Update 还提供了为新项目使用 HTML5 doctype 的选项，并在新应用程序的 Scripts 文件夹中附带了 Modernizr 1.7。Modernizr 是一个 JavaScript 库，极大地简化了 HTML5 开发；我将在未来的文章中深入讨论它。

这里的重点是，即使 HTML5 刚刚在我们的浏览器中出现，官方的工具支持也在迅速添加，微软甚至在支持社区提供的库（如 Modernizr）。您今天可以在微软工具的帮助下以 HTML5 作为目标，并期望 HTML5 支持将随着时间的推移不断增长和改进。

在您的应用程序中“采用”HTML5

现在，您应该意识到 HTML5 不是一个单一的实体，您可以一举采用或迁移到它。采用 HTML5，与其说是一个全盘的选择，不如说是一个逐项评估技术并确定哪些技术适合您的应用程序。对于您评估的每一项 HTML5 技术，在决定该技术是否已准备好供您采用时，请至少考虑以下因素：

1. 该技术在所有主要浏览器中的实现程度如何？
2. 如何采用这项技术并为不支持特定功能的浏览器“填充”支持？

第一个因素是最重要的，并且结合对访问您网站的访问者常用浏览器的理解，应该能让您清楚地了解 100 多项规范中的哪些子集值得进一步评估。该子集应包含一套稳定的规范，您现在可以为您的用户可靠地采用。

然而，即使有这套稳定的 HTML5 技术，您也不应忽略尚未升级到较新浏览器的用户。如果您深度参与您网站的日常开发，您无疑会大致了解访问您网站的旧版浏览器用户所占的百分比。对于我们大多数人来说，很容易查看使用旧版浏览器访问的用户的百分比，并得出结论认为采用任何 HTML5 技术都会对这些用户产生负面影响。幸运的是，有“Polyfilling”技术可以拯救我们，不必等到某个模糊的未来日期才能采用 HTML5。

Paul Irish（jQuery 和 Modernizr 项目的开发人员）将 Polyfill 定义为“……一个模拟未来 API 的填充程序，为旧浏览器提供回退功能。” Polyfill 就像您网站的找平腻子；它是一种方法，用于确定当前浏览您网站的用户是否可以使用某个 HTML5 功能，并提供一个“填充”该支持的填充程序，或者提供一个优雅降级的方案，使您的网站仍然可以完全运行。

与 Polyfilling 最相关的库是 Modernizr，我之前提到的 JavaScript 库。Modernizr 为语义标记提供了基本的 Polyfills，为主要 HTML5 技术提供了功能检测，并支持基于受支持功能的条件 CSS。如前所述，Modernizr 将是即将到来的一篇文章的主题；它也将（以及许多其他 Polyfilling 库）在本系列中占有重要地位。要了解更多信息，请在 modernizr.com 下载 Modernizr。

在选择要采用的技术时，您的最终列表可能是一系列广泛支持的规范与其他需要为您某些浏览器填充支持的规范的组合。只有您自己知道这个列表的确切构成，这取决于您当前的需求和上下文。

在接下来的几个月里，我将讨论几个值得注意的规范，从地理定位、表单和 Canvas，到 Web Workers、Web Sockets 和 IndexedDB。其中一些得到了广泛支持且“网站就绪”，而另一些，如 Web Sockets，则过于具有开创性而不能忽视，无论它们目前的地位如何。对于每个规范，我将讨论当前和已知的未来支持，关于如何实现规范功能的一些基础知识，以及如何为不支持特定功能的浏览器填充支持。

如果您想今天就深入了解 HTML5，我建议您阅读几本相关书籍。特别是，我推荐 Bruce Lawson 和 Remy Sharp 的《Introducing HTML5》（New Riders, 2010）和 Mark Pilgrim 的《HTML5 Up and Running》（O’Reilly Media, 2010）。此外，请务必访问 W3C.org 获取所有规范的最新信息，以及 BeautyoftheWeb.com 和 IETestDrive.com 分别下载 Internet Explorer 9 和 Internet Explorer 10 Platform Preview，并了解更多关于微软通过浏览器提供的出色的 HTML5 体验。

最重要的是，从今天就开始采用 HTML5。网络真的再也不会一样了，您可以通过使用 HTML5 构建下一个伟大的 Web 应用程序来成为催化剂的一部分。