HTML5

  • 项目

使用 HTML5 构建应用程序：您需要了解的内容

Brandon Satrom

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 所示。

Enabling the HTML5 Schema via the Options Dialog

图 1 通过“选项”对话框启用 HTML5 架构

Setting the HTML5 Schema on the HTML Source Editing Toolbar

图 2 在 HTML 源编辑工具栏上设置 HTML5 架构

在设置好默认架构后，您就会在 Visual Studio 中获得对 HTML 中的 28 个新语义标记以及标记特定的新属性和新全局属性的 IntelliSense 支持，如图 3 所示。

HTML5 IntelliSense in Visual Studio 2010 SP1

图 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，我建议您挑选几本有关这一主题的书籍。 我特别推荐 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 平台预览版并了解 Microsoft 通过浏览器提供的出色 HTML5 体验。

最重要的是，立即开始采用 HTML5。 实际上，Web 不会停止变化，您可以通过使用 HTML5 构建出色的下一代 Web 应用程序，从而促进 Web 的发展。

Brandon Satrom 是 Microsoft 在德克萨斯州奥斯汀市以外的开发推广人员。他的博客网址是 UserInexperience.com，您可以通过 Twitter 地址 Twitter.com/BrandonSatrom 关注他。

衷心感谢以下技术专家对本文的审阅：Jon Box, Damian Edwards 和 Clark Sell