HTML5是一个关于互联网技术的包罗万象的新词。类似于以前的Ajax和Web2.0,这个词在不同的上下文中使用会有不同的含义。HTML5的字面含义是表示第5版本的HTML标记语言,但是也可以用来描述下一代网络技术规范集合,包括CSS3、SVG和JavaScript API。
为了在这个背景下理解HTML5,首先需要理解的是HTML5并不是一项添加到网页应用上的简单技术。在HTML5技术集合中有超过30项不同的规范,各项规范的成熟度不同。此外,主要浏览器厂商对各个规范的采用和实施方式也不同。
网页应用开发者会根据业务需求选择合适的HTML5功能,以提高应用的性能。最终在流行网页应用中实际使用的很可能只是其中很少的几项规范。
批评家经常说,必须要等到HTML5被百分之百支持后,才能在项目中使用。这明显是不正确的。很多HTML5规范已经非常成熟,并且在流行的浏览器中已经被完全实施了。但是有些规范还处于开发早期,或者主流浏览器厂商对其不太支持。了解所使用的规范类型很重要。虽然研究这些规范会有帮助,但是唯一正确的学习方法是在所有的浏览器里测试你的应用。
对于那些新的或者还没被很好支持的规范,有一些聪明的开发者已经开放了免费且开源的工具为老式浏览器提供shim和polyfill。正如Remy Sharp定义的那样:"polyfill或者polyfiller是可以模拟浏览器的某些原生功能的一段代码(或者一个插件),并且可以提供一致的开发接口。"据我看来,最好的polyfill是不需要开发者知道某一功能是否是由浏览器原生提供的,它会在后台提供必要的支持,对于用户和开发者都是透明的。在大部分情况下,每项HTML5规范都有一个或者多个可以使用的、互相竞争的polyfill。你会在本书中看到多种网络上流行的高效的polyfill。
为什么学习HTML5
初学者也许会有这样的疑问:"为什么需要关心HTML5?"不幸的是,这个问题没有一个简单的答案。即使是一些资深的开发者也会根据他们熟悉的功能给出不同的答案。
但是总体而言,有一些功能集合是大部分开发者都认可的流行的功能。在HTML5出现之前,网页应用从来都没被当做原生桌面应用或者移动应用的竞争者。自从HTML5出现以来,网页应用才被认为是一项易于部署的、跨平台的应用平台方案。然而,由于缺少一些重要业务功能,如性能、安全和图形,HTML5受到了束缚。如果流行的浏览器能够成为一个成熟的应用平台,开发者就可以不再针对不同平台开发原生应用了。
通过XMLHttpRequest对象、JSON传输格式,以及浏览器上各种JavaScript类库的爆发(很多类库都提供了ployfill支持),Ajax技术革命提供了异步的、后台执行的服务器端更新,将网页应用世界带到了正确的道路上。然而,HTML5的目标是在流行的浏览器中为复杂应用开发提供原生的功能支持。为了实现这个目标,很多功能还需要改进,例如维护浏览器历史、异步交互过程中的书签、跨域通信、本地存储、离线支持、丰富的图形支持、为了改进速度和效率的新连接层协议等。
HTML5的实现
作为一个渴望使用本书中介绍的特性实现新功能的开发者,有必要理解这一点:很多HTML5规范还处于试验和开发期。写作本书的一大挑战就是要与不断进化的规范保持同步。
接下来的几个话题对于学习试验期的浏览器规范很重要。
浏览器前缀
为了让浏览器厂商能够实施试验期的特性(通常在规范完成之前实施),浏览器厂商需要在这个特性标识之前添加"前缀",表示这只是针对特定浏览器的功能。一个很好的例子就是requestAnimationFrame的实施方式,它是在浏览器中为页面添加动画效果的JavaScript方法。最初实施这一功能的浏览器前缀如下:
requestAnimationFrame
webkitRequestAnimationFrame
mozRequestAnimationFrame
oRequestAnimationFrame
msRequestAnimationFrame
浏览器前缀在CSS中很常见。推荐你阅读第2章的引言,了解浏览器前缀是如何在CSS中实现的。
使用HTML5检查工具验证一致性
HTML验证器是一组通过DTD(Document Type Definition)定义的网页标准解析网页代码的软件。如果你还不熟悉DTD,可以将它想象为一个处理HTML标记在浏览器中呈现方式的元数据。
HTML验证器根据选择的标准返回找到的一系列错误。我们现在可以使用HTML5 DTD来验证。
HTML5 DTD比最新的XHTML定义更宽松。W3C的新验证器(http://html5.validator. nu/)显示了其中的差别。然而,验证器不应该针对编码风格问题抛出异常,它应该关注于根据某个规范验证HTML标记。
HTML5 Lint
这意味着开发者还需要规范编码风格的工具。需要检查的常见编码风格问题包括代码的缩进是否一致、标签是否小写和关闭标签是否被忽略。
在本书写作的时候,我们推荐使用HTML5 Lint tool(http://lint.brihten.com/ html/)来检查。
HTML5实施的状态和功能支持情况
在博客中(http://html5hacks.com/blog),我们会持续对本书提供的例子进行尽可能频繁的更新。
网络上还有很多不错的资源可以参考。这些资源提供了HTML5实施状态和特定浏览器对某些HTML5特性支持的状态。
针对大部分流行浏览器:
针对Chrome:
http://www.chromium.org/developers/web-platform-status
针对IE:
http://msdn.microsoft.com/en-US/ie/ff468705.aspx
针对Mozilla Firefox:
https://wiki.mozilla.org/Features
针对Apple Safari: