HTML5开发：原理与实现

资讯频道 → Web前端

8顶
2踩

2012-05-17 17:55 by 副主编 MnouW 评论(2) 有9170人浏览

HTML5 W3C 规范教程

在这篇文章中， W3C 浏览器技术核心标准工作成员 Mike Smith 谈论了 HTML5 到底是什么，并给出了一些对开发人员有用的资源，可以让他们跟进不断演化的标准。

我们正处于Web平台更新换代的过程之中。HTML5通常被用来描述这一过程，尽管更新换代中的技术并不局限于HTML5标准所定义的特性。

我使用了“Web平台”(Web platform)这个术语，代指能被Web浏览器支持的一系列协议、格式以及APIs。开发者使用这些特性来构建时新的一些应用，这些应用支持社会交互，并且充分利用了设备的能力，比如照相功能、麦克风功能以及GPS功能。HTTP、TLS以及WebSockets是Web平台中的一部分协议；HTML、CSS以及Javascript是Web平台格式中的一些例子。Web平台中的APIs包括Geolocation API以及针对 <canvas> 元素的2D drawing API等。

最终，如果一个特性能被广泛实现，并且开发人员经常使用它来创建稳定的用户体验，那么这个特性就成为了Web平台的一部分。World Wide Web Consortium (W3C)功不可没，它让股东们坐到一起，统一开发一些免费标准，并创建配套资源，如测试集以及验证程序。

标准作为一个共享协议来说，是非常有用的，但是Web平台包括大量不同成熟度的技术，这些技术并没有都标准化。当开发者使用这些技术的时候，就会遇到一些实际的问题了，其中包括：

我该如何减少special-case code？
哪些代码现在是足够稳定可以让我使用的？
对于那些没有最新浏览器的用户，我该如何处理？

这些问题的答案随着时间发生变化，因此开发者已经制定了切实可行的解决方案，如fallback和“polyfills”（这将在稍后进一步解释）这些方案能让内容在老的浏览器以及最新的浏览器中都可用。在这篇文章中，我并没有关注HTML5标准的状态，而是探讨了一些有用资源，这些资源可用帮助开发者开始使用现在的开放Web平台技术（Open Web Platform technology）。这些资源阐明了使用HTML5的“原理与实现方法”，对标准进行了补充，并最终能加快部署。

platform.html5.org

对一个忙碌的开发人员来说，他该如何跟进最新的特性，了解什么fallbacks 以及、polyfills（如果有的话）是可以用的？我编辑了一个网站， platform.html5.org，它可以让你了解构成Web平台的最新技术。（它是由 github repository支持的，我非常鼓励你来帮助维护这个站点，只需要使用 forking the repo 就可以了，并发送更新请求）。

这个站点将技术进行了分类，如绘图和排版、多媒体以及存储。站点上的图标代表了每个技术的成熟度。绿色的小旗帜表示一个特性可以使用了。黄色闪电代表“需要谨慎使用”。然而，这些都只是很粗略的指示；要想真正了解这些特性，你需要点击后面的一些有用的链接，如下所示：

特别的，HTML5 Please site值得作进一步的评论。它是由H5BP developer collective（ HTML5 Boilerplate背后的开发者小组）创建的。它根据名字列出了各个特性，并对每个特性的成熟度做出了高屋建瓴的描述。它还展现了一个状态面板，其中显示了各个特性的状态信息（可以使用/小心使用/避免使用， use/caution/avoid）。在某些情况下，”caution” 和”use”关键字后附加了”with fallback” 或 “with polyfill”。在有”with fallback”的情况下，你可以扩大该面板查看究竟如何为该特性提供fallback。

polyfill 是指一段Javascript代码，作为一个特性的某种shim；也就是说，它模拟了一个将来的API，这个API为老的浏览器提供fallback功能。

HTML5 Please的站点管理者让任何人都可以很容易为这个站点做贡献，他们在每个面板上都提供了一个“编辑该信息”（”Edit this info”）的链接，让你可以创建页面内容的副本，并将其提交给该站点。（该机制是由 a github repository支持的，任何人对内容的修改都会作为pull requests提交）。该站点的维护者将会对内容进行审查并合并内容。

有时候你希望能看到比HTML5 Please所提供的信息更详细的一些状态信息。例如，你也许想确切知道哪些浏览器支持某个特定的浏览器，以及每个浏览器的哪些版本支持它，或者在移动浏览器中，特性受到什么程度的支持，以及那些浏览器的OS版本是什么。这时候，你就需要查看When Can I Use…站点了。

When Can I Use是由Alexis Deveria维护的。他跟进大量特性的状态，并在新版本的浏览器发布时更新站点。如果有某种特性是你想要了解但When Can I Use站点上还没有的，你可以建议该站点加上。

现在记录在When Can I Use上的每一个特性都有一个表，表中有一列是主流的桌面浏览器（IE, Firefox, Chrome, Safari以及Opera），一列是主流的移动浏览器（iOS Safari, Opera Mini, Opera Mobile以及 Android Browser），每一行是每个浏览器的版本号。和其他站点一样，用颜色标明了每个特定浏览器版本对一个特性的支持度（ support/partial （部分支持） , support/no （不支持） , support/unknown （不确定是否支持））。

例如，可以看看 CSS Counters受到的支持程度。充满绿色条目的表说明该特性受到很好的支持。其他支持不是很好的特性是用红色标出的。

When Can I Use站点中的每个特性表都提供了一个”see-also”链接到相关特性的表，还有到第三方站点的链接，这些第三方站点提供了这些特性的使用信息，教会你如何使用这些特性进行开发。

MDN (Mozilla Developer Network)是platform.html5.org 和When Can I Use都加了链接的站点。可以将MDN看作”how can I use”特性使用指南。例如，如果你想要实现Web Workers，需要一些代码示例以及链接到有详细信息的资源，那么，MDN上就有个页面是关于使用Web Workers的，它对于入门非常有帮助。

和HTML5 Please, When Can I Use以及platform.html5.org一样，MDN也是非常欢迎大家做贡献的，并让这个过程比其他站点更快捷简单：整个站点就是一个wiki，所以一旦你创建了一个账户，你就能编辑任何页面。

测试集（Test Suites）

对于评估一个特性的成熟度来说，没有什么方法比拥有一个完整的测试集更好了。你可以自己运行测试集，并分析结果。对于Web平台来说，并没有一个集中的库，也没有一个单独的地方可以让你看到所有结果，但是W3C已经开始着手建立一个共享测试框架站点，W3C CSS Working Group也在建立一个针对CSS的测试框架站点。

这些站点让你可以浏览各个浏览器以及各个浏览器版本对不同测试集的结果。你也可以在你自己的浏览器中运行测试集，并提交结果，让结果整合到框架结果数据库中去。例如， CSS的多列布局模块测试集的结果数据，或者可以让你自己在浏览器中运行测试集的启动页面。

结论

前面提到的站点可以帮你跟进新出现的Web平台。我希望随着平台的成熟以及更多人分享他们的代码和经验，更多有用的站点能够出现。我很乐意你去使用我提到的这些站点，并将你自己的发现提交到这些站点，以便让关于Web平台的高质量的、最新的信息让大家都能共享。

原文链接： Developing in HTML5: The What and How