1.1HTML5发展史112346911758101HTML5概述是一本关于HTML5编程的书。不过在学习之前,有必要先了解一下背景知识,什么是HTML5?它经历了怎样的发展历程?HTML4和HTML5有什么区别?本章中,我们会集中讨论大家关注的一些实际问题。为什么是HTML5?为什么它能掀起风潮?是什么设计理念使得HTML5真正具有革命性的进步?HTML5如何在大幅改动的同时保持高度兼容?无插件范式意味着什么?HTML5包含什么,不包含什么?HTML5新增加了哪些特性,为什么能揭开整个Web开发新时代的序幕?下面我们一起来了解一下。1.1HTML5发展史HTML的历史可以追溯到很久以前。1993年HTML首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的大幅发展,从2.0版,到3.2版和4.0版(一年出了两个版本!),再到1999年的4.01版。随着HTML的发展,W3C(万维网联盟)掌握了对HTML规范的控制权。然而,在快速发布了这四个版本之后,业界普遍认为HTML已经到了穷途末路,对Web标准的焦点也开始转移到了XML和XHTML上,HTML被放在了次要位置。不过在此期间,HTML体现了顽强的生命力,主要的网站内容还是基于HTML的。为能支持新的Web应用,同时克服这第1章2第1章HTML5概述现有的缺点,HTML迫切需要添加新功能,制定新规范。致力于将Web平台提升到一个新的高度,一小组人在2004年成立了WHATWG(WebHypertextApplicationTechnologyWorkingGroup,Web超文本应用技术工作组)。他们创立了HTML5规范,同时开始专门针对Web应用开发新功能——这被WHATWG认为是HTML中最薄弱的环节。Web2.0这个新词也就正是在那个时候被发明的。Web2.0实至名归,开创了Web的第二个时代。旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站——这其中的新功能真的是数不胜数。2006年,W3C又重新介入HTML,并于2008年发布了HTML5的工作草案。2009年,XHTML2工作组停止工作。又过了一年,也就到了现在。因为HTML5能解决非常实际的问题(随后可以看到),所以在规范还未定稿的情况下,各大浏览器厂家就已经按耐不住了,开始对旗下产品进行升级以支持HTML5的新功能。这样,得益于浏览器的实验性反馈,HTML5规范也得到了持续地完善,HTML5以这种方式迅速融入到了对Web平台的实质性改进中。HTML的过去和未来“大家好,我是Brian①,HTML的铁杆老粉丝。1995年,我创建了第一个属于自己的个人主页。那时候的‘主页’就是用来介绍自己的。上面的照片通常不清晰,代码中用了很多blink标签,页面上会告诉大家我住在哪儿、读过什么书、正在做什么跟计算机相关的工作。我和我的那些所谓‘万维网开发者’不是在大学里读书①Brian,本书作者之一。——译者注1.2关于2022年的那个神话31234691175810就是在大学里工作。那时候的HTML非常初级,没有任何工具可用。Web应用几乎没有,顶多有少量的文本处理脚本。页面代码都是用大家各自喜欢的文本编辑器写出来的。页面的更新频率基本上是数周或者数月。不知不觉,我们已经走过了漫长的15个年头。今天,用户对其在线资料一天更新很多次已经是很平常的事了。当然,如果没有在线工具持续稳定的更新换代,也不会有今天这样的交互方式。提醒各位读者,大家在看这本书的时候心里要明白,我们的示例虽然现在看起来非常简单,但潜力是巨大的。就像20世纪90年代中期那些率先使用img标签的人一样,他们又怎么会知道在十年以后,很多人都已经在线编辑和储存照片了;而我们要有这种前瞻性。我们希望书中示例的基本思路能够激发读者无穷的创意,从而为Web的下个十年奠定新的基础。”——Brian1.2关于2022年的那个神话今天,我们看到的HTML5规范已经以工作草案的形式发布了——还不是最终版。那什么时候HTML5规范才能尘埃落定呢?现在就来了解一下几个关键时间点。第一个时间点是2012年,目标是发布候选推荐版。第二个时间点是2022年,目标是发布计划推荐版。哦!那等着吧,还早着呢!可能大家会这么想,然后就把书合上,扔到一边,等十年后再说。那就大错特错了,在4第1章HTML5概述明白这两个时间点的真正意义之前,可别急着下结论。第一个,也就是最近的2012年,可以说是最重要的时间点,因为这个时间点一到就意味着HTML5规范编写完成了。想象一下,这并不久远,也就两年后的事情。计划推荐版(普遍认为距今还有点远)的重要性在于届时将会有两个对HTML5的互通实现,意味着将有两个浏览器会完全支持整个HTML5规范的所有功能——这个远大的目标让2022年这个时间点看起来又似乎太近了。毕竟,现在连HTML4都还没有实现这个目标呢①。关键是现在浏览器厂家已经着手支持HTML5中很多优秀的新功能了。只要用户有需求,现在就可以利用这些新功能进行Web应用的开发。虽然一些细节方面的改造还会持续进行,相应的Web应用可能需要改动,不过,相对于使用HTML5为用户带来的体验来讲,这点付出不算什么。当然,如果用户的浏览器是IE6的话,很多新功能是不支持的,需要模拟——不过这也不能成为抛弃HTML5的理由,毕竟这些用户最终都会升级浏览器版本,很多可能会直接选用IE9,而且微软承诺在IE9中持续增加对HTML5的支持。实际上,通过使用新的浏览器和改进的模拟技术意味着用户现在和不久的将来便可以使用很多HTML5功能了。1.3谁在开发HTML5我们都知道开发HTML5需要成立相应的组织,并且肯定需要有人来负责。这正是下面这三个重要组织的工作。①HTML4最早于1997年成为W3C推荐标准,到现在10多年早已经过去了,仍然不存在两个完全支持这一规范的浏览器。——编者注1.4新的认识51234691175810WHATWG:由来自Apple、Mozilla、Google、Opera等浏览器厂商的人组成,成立于2004年。WHATWG开发HTML和Web应用API,同时为各浏览器厂商以及其他有意向的组织提供开放式合作。W3C:W3C下辖的HTML工作组目前负责发布HTML5规范。IETF(InternetEngineeringTaskForce,因特网工程任务组):这个任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API(WebSocketAPI)依赖于新的WebSocket协议,IETF工作组正在开发这个协议。1.4新的认识HTML5是基于各种各样的理念(在WHATWG规范中有详述)进行设计的,这些设计理念体现了对可能性和可行性的新认识。兼容性实用性互通性通用访问性1.4.1兼容性和存在即合理别担心,HTML5并不是颠覆性的革新。相反,实际上HTML5的一个核心理念就是保持一切新特性平滑过渡。一旦浏览器不支持HTML5的某项功能,针对功能的备选行为就会悄悄进行。再说,互联网上有些HTML文档已经存在20多年了,因此,支持所有现存HTML文档是非常重要的。6第1章HTML5概述HTML5的研究者们还花费了大量的精力来研究通用行为。比如,Google分析了上百万的页面,从中分析出了DIV标签的通用ID名称,并且发现其重复量很大。例如,很多开发人员使用DIVid=header来标记页眉区域。HTML5不就是要解决实际问题吗?那何不直接添加一个header标签呢?尽管HTML5标准的一些特性非常具有革命性,但是HTML5旨在进化而非革命。毕竟没有从头再来的必要。(就算有必要的话,也不应该是HTML5,起码也要发明一个更好的!)1.4.2效率和用户优先HTML5规范是基于用户优先准则编写的,其宗旨是“用户即上帝”,这意味着在遇到无法解决的冲突时,规范会把用户放到第一位,其次是页面作者,再次是实现者(或浏览器),接着是规范制定者(W3C/WHATWG),最后才考虑理论的纯粹性。因此,HTML5的绝大部分是实用的,只是有些情况下还不够完美。看看这个示例,下面的几种代码写法在HTML5中都能被识别。id=prohtml5id=prohtml5ID=prohtml5当然,肯定会有人反对这种不严格的语法,我们不去辩论对错,只去关心一个底线,那就是最终用户其实并不在乎代码怎么写。当然,我们并不提倡入门者一开始写代码就这么不严谨,毕竟归根结底,受害者还是最终用户,因为一旦由于开发人员的原因造成页面错误导致不能正常显示,那么被折磨的肯定是最终用户。1.4新的认识71234691175810HTML5也衍生出了XHTML5(可通过XML工具生成有效的HTML5代码)。HTML和XHTML两种版本的代码经过序列化应该可以生成近乎一样的DOM树。显然XHTML的验证规则严格得多,刚才示例中后两行代码是无法通过验证的。1.安全机制的设计为保证HTML5足够安全,HTML5在设计时就做了大量的工作。规范中的各个部分都有专门针对安全的章节,并且安全是被优先考虑的。HTML5引入了一种新的基于来源的安全模型,该模型不仅易用,而且对各种不同的API都通用。这个安全模型可以让我们做一些以前做不到的事情,不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。在这方面,我们肯定不会怀念过去的“好”时光了。2.表现和内容分离在清晰分离表现和内容方面,HTML5迈出了巨大的步伐。HTML5在所有可能的地方都努力进行了分离,也包括CSS。实际上,HTML5规范已经不支持老版本HTML的大部分表现功能了,但得益于先前提到的HTML5在兼容性方面的设计理念,那些功能仍然能用。表现和内容分离的概念也不是全新的,在HTML4Transitional和XHTML1.1中就已经开始用了。Web设计者把这个概念当做最佳实践使用了很久,不过现在清晰地分开表现和内容显得更为重要,否则会有如下弊端:可访问性差;不必要的复杂度(所有样式代码都放在页面中,代码可读性很差);文件变大(样式内容越多,文件越大),带来的后果就是页面载入变慢。8第1章HTML5概述1.4.3化繁为简HTML5要的就是简单、避免不必要的复杂性。HTML5的口号是“简单至上,尽可能简化”。因此,HTML5做了以下这些改进:以浏览器原生能力替代复杂的JavaScript代码;新的简化的DOCTYPE;新的简化的字符集声明;简单而强大的HTML5API。随后我们将详细讲解这些改进。为了实现所有的这些简化操作,HTML5规范已经变得非常大,因为它需要精确再精确。实际上要比以往任何版本的HTML规范都要精确。为了达到在2022年能够真正实现浏览器互通的目标,HTML5规范制订了一系列定义明确的行为;任何歧义和含糊都可能延缓这一目标的实现。另外,HTML5规范比以往的任何版本都要详细,为的是避免造成误解。HTML5规范的目标是完全、彻底地给出定义,特别是对Web应用。所以也难怪,整个规范超过了900页!基于多种改进过的、强大的错误处理方案,HTML5具备了良好的错误处理机制。非常有现实意义的一点是,HTML5提倡重大错误的平缓恢复,再次把最终用户的利益放在了第一位。比如,如果页面中有错误的话,在以前可能会影响整个页面的显示,而HTML5不会出现这种情况,取而代之的是以标准方式显示“broken”标记,这要归功于HTML5中精确定义的错误恢复机制。1.4.4通用访问1.5无插件范式91234691175810这个原则可以分成三个概念。可访问性:出于对残障用户的考虑,HTML5与WAI(WebAccessibilityInitiative,Web可访问性倡议)和ARIA(AccessibleRichInternetApplicaions,可访问的富Internet应用)做到了紧密结合,WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。媒体中立:如果可能的话,HTML5的功能在所有不同的设