1.6 HTML 5介绍
本节开始介绍HTML 5技术的内容,具体包括HTML 5的发展历史、特点及使用方法。
1.6.1 HTML 5的发展历史
HTML 5是万维网的核心语言、标准通用标签语言下的一个应用超文本标签语言(HTML)的第五次重大修改版本。万维网联盟(W3C)于2014年10月29日宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。
其实,HTML 5的发展历程还是非常有意思的,可以说是一波三折。先说说万维网联盟(W3C)这个组织。万维网联盟(W3C)是一个纯粹为了标准化而存在的非营利性组织,其初衷确实很美好,不涉及单独某一方的利益。但是,由于该组织太过于纯粹而忽略了各大浏览器厂商的利益,因此来自苹果的Safari浏览器团队、Mozilla基金会以及Opera软件等浏览器厂商于2004年成立了WHATWG工作小组(Web Hypertext Application Technology Working Group),意为网页超文本技术工作小组。不难理解,他们意图回到超文本标签语言HTML上来。
WHATWG动作很快,因为他们实力都很强,均是多年战斗在第一线的浏览器厂商。该组织成立后不久就提出了作为HTML 5草案前身的Web Applications 1.0,那时候HTML 5还没有被正式提出。WHATWG致力于Web表单和应用程序,而W3C专注于XHTML 2.0,双方可谓是渐行渐远。
当然,这个世界最终还是靠实力说话的,看着自己被冷落的W3C在2006年10月决定停止XHTML的工作并与WHATWG合作。双方决定进行合作,来创建一个新版本的HTML,并为其建立了一些规则,具体如下:
- 新特性应该基于HTML、CSS、DOM以及JavaScript。
- 减少对外部插件的需求(比如Flash)。
- 更优秀的错误处理。
- 更多取代脚本的标签。
- HTML应该独立于设备。
- 开发进程应对公众透明。
以上这些规则就是HTML 5的最初雏形了。
2007年,苹果、Mozilla基金会以及Opera软件建议W3C接受WHATWG的HTML 5,正式提出将新版HTML标准定义为HTML 5,于是HTML 5就正式和大家见面了。
HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5仍处于完善之中。然而,当时的大部分浏览器已经具备了某些HTML 5支持。随着浏览器JavaScript引擎大幅提速,以及人们对HTML 5预期逐步提高,HTML 5的流行度出现了显著的上升,但最初的HTML 5并没有给人们真正更多的惊喜。不过随着每一次Flash Player爆出漏洞、安全、性能之类的负面新闻时,人们对HTML 5的关注度又大幅升高。
2010年1月,YouTube开始提供HTML 5视频播放器。
2010年8月,Google联合Arcade Fire推出了一个HTML 5互动电影:The Wilderness Downtown,此项目由著名作家兼导演Chris Milk创作。之所以叫做互动电影,是因为在开始时电影会问你小时候家住在哪里,而随后的电影剧情将在这里展开。电影使用了Arcade Fire刚刚推出的新专辑《The Suburbs》中的We Used to Wait作为主题音乐。在电影发表一年后,该电影在戛纳广告大奖赛中获得了网络组特别奖项。
2010年4月,苹果CEO乔布斯发表公开信“Flash之我见”。引发Flash和HTML 5阵营之间的空前口水仗,也刺激了浏览器厂商。
2012年1月10日在拉斯维加斯正在举行的CES大会上,微软CEO鲍尔默宣布了基于IE9和HTML 5版的割绳子游戏,这是一款由微软及游戏开发商ZeptoLab共同推出,用于促进IE9的使用及网页的美化。
2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量开发人员心血的HTML 5规范已经正式定稿。根据万维网联盟(W3C)的发言稿称:“HTML 5是开放的Web网络平台的奠基石。”
2013年5月6日,HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标签语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者努力提高新元素互操作性。根据本次草案的发布内容,HTML 5进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML 5的图像<img>标签及<svg>标签也进行了改进,性能得到进一步提升。
2014年10月29日,万维网联盟(W3C)终于正式宣布,经过几乎8年的艰辛努力,HTML 5标准规范终于最终制定完成了,并已公开发布。
看过上面的HTML 5的发展历程,读者也许觉得足够写一本书或拍一部电影了,这当然是题外话。
不过,HTML 5的正式发布确实将会给Web开发带来革命性的变化。目前,国外支持HTML 5的主流浏览器包括Firefox(火狐浏览器)、IE9及其更高版本、Chrome(谷歌浏览器)、Safari、Opera等。国内支持HTML 5的浏览器包括傲游浏览器、360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等,不过国内的很多浏览器的内核都是基于Firefox、Chrome或IE开发的。
另外,在移动设备上开发HTML 5应用只有两种方法,一种是全使用HTML 5的语法,一种就是仅使用JavaScript引擎。纯HTML 5移动应用运行缓慢并错漏百出,但优化后的效果会好转。尽管不是很多设计人员愿意去做这样的优化,但依然可以去尝试。
HTML 5移动端应用的最大优势就是可以在网页上直接调试和修改。最初,移动端应用的开发人员可能需要花费非常大的力气才能达到HTML 5的界面效果,但需要不断地重复编码、调试和运行。但现在不同了,对于基于HTML 5标准的移动应用,开发人员可以轻松地进行调试修改。
1.6.2 HTML 5的设计理念
HTML 5的最终设计理念是为了在移动设备上支持多媒体,这也是区别于之前HTML4的主要理念。在桌面Web应用中,HTML4已经能够很好地完成绝大部分工作了,但HTML4在移动应用上却显得能力不足,当然这也是由HTML4的规范所限制的。
HTML 5新的语法特征可以很好地支持移动应用,例如:video、audio和canvas标签。另外,HTML 5规范还引进了新的功能特性,可以真正改变用户与网页的交互方式,具体包括:
- 新的解析规则增强了灵活性。
- 增加很多适应移动应用的新属性。
- 淘汰了过时的或冗余的属性。
- 增加了HTML 5文档间的拖放功能。
- 增加了离线编辑功能。
- 增强了信息传递功能。
- 具有详细的解析规则。
- 增加了多用途互联网邮件扩展(MIME)和协议处理程序注册功能。
- 增加了在SQL数据库中存储数据的通用标准(Web SQL)。
1.6.3 HTML 5的新特性
HTML 5具有很多HTML4所不具有的新的特性,具体包括:
- 语义特性
HTML 5赋予了网页更好的意义和结构,更加丰富的标签,增加了对微数据与微格式等方面的支持,将真正形成以数据驱动的Web应用。
- 本地存储特性
基于HTML 5开发的网页应用拥有更短的启动时间和更快的联网速度,这全是因为HTML 5具有的APP Cache以及本地存储功能。
- 设备兼容特性
HTML 5为网页应用开发人员提供了前所未有的数据与应用接入开放接口,基于这些接口可以让外部应用直接与浏览器内部的数据进行交互,例如:调用移动设备的摄像头和麦克风,等等。
- 网页多媒体特性
HTML 5支持网页端的Audio、Video等多媒体功能,可与网站自带的影音多媒体功能互为助力。
- 三维、图形及特效特性
HTML 5支持基于SVG、Canvas、WebGL及CSS3的3D功能,这些功能会在浏览器中呈现出惊人的视觉效果。
- 服务器推送特性
HTML 5具有更有效的连接工作效率,使得诸如快速的网页游戏体验,优化的在线聊天功能得到了实现。HTML 5拥有更有效的服务器推送技术,譬如Server-Sent Event和Web Sockets技术就是其中的两个特性,这两个特性能够帮助设计人员实现服务器将数据“推送”到客户端的功能。
- 异步加载特性
HTML 5会通过XMLHttpRequest2等技术,解决以前的跨域问题,有效地避免了用户在浏览器加载过程中无法等待的Loading过程,帮助设计人员在开发的Web应用多样化的环境中更快速地工作。
- CSS3特性
HTML 5还对CSS3新特性提供了很好的支持,在不牺牲性能和语义结构的前提下,CSS3中特殊风格和增强效果将会在浏览器中得到完美体现。
- Web排版
HTML 5较之以前的Web排版,支持全新的Web的开放字体格式(WOFF),该字体格式提供了更高的灵活性和控制性。
1.6.4 HTML 5的新变革
HTML 5规范提供了一些新的元素和属性,具体如下:
- 取消了一些过时的HTML4标签
诸如像纯粹为了显示效果的标签,如u、font、center和strike这些标签,已经被CSS3样式表所取代了。b和i标签虽然保留了下来,但已经没有粗体或斜体样式功能了,仅仅就是为了标识一段文字。
- 借鉴XHTML的优点
HTML 5借鉴了XHTML2的一些优点,包括一些用来改善文档结构的功能。增加了新的语义化的HTML标签来表示网页内容,例如:header(表示文档页眉)、footer(表示文档页脚)、dialog(表示对话框)等。我们知道,之前的开发人员在实现这些功能时一般都是使用div标签的。
- 全新的表单输入对象
HTML 5增加了包括日期、URL、Email地址等,全新的表单输入对象。同时,还引入了微数据对象来帮助机器识别标签内容的方法,语义化的标签使得Web处理变得更为简单。
- 全新的多媒体标签
HTML 5规范中,多媒体对象将不再全部绑定在object或embed标签中,而是视频有视频的标签video,音频有音频的标签audio。
- Canvas对象
HTML 5规范提供了全新的canvas标签,用来在浏览器上直接绘制矢量图,这意味着设计人员可以摆脱Flash和Silverlight,直接在浏览器中显示图形或动画。
- 本地数据库
HTML 5提供了在浏览器中内嵌一个本地的SQL数据库的功能,以加速交互式搜索,缓存以及索引功能。同时,类似离线Web程序也将因此获益匪浅。
- 浏览器中的真正程序
HTML 5将提供API实现浏览器内的编辑、拖放,以及各种图形用户界面的能力。内容修饰标签将被弃用,而是直接使用CSS样式。
1.6.5 HTML 5的新标签
下面,总结HTML 5规范为设计人员带来了那些新的标签元素。
- 语义结构类(详见表1-1)
表1-1 HTML 5语义结构类标签
- 表单类(详见表1-2)
表1-2 HTML 5表单类标签
- 多媒体类(详见表1-3)
表1-3 HTML 5多媒体类标签
- 矢量画布(详见表1-4)
表1-4 HTML 5矢量画布标签
1.6.6 HTML 5的移动特性及未来
HTML 5移动开发的出现让移动平台的竞争由系统平台转向了浏览器之间,移动端的IE、Chrome、FireFox、Safari、Oprea等浏览器,谁能达到在移动端对HTML 5更好的支持,谁就能在以后的移动应用领域占据更多的市场。
下面列举HTML 5适合移动应用开发的几大特性:
- 离线缓存为HTML 5开发移动应用提供了基础。
- 音频视频自由嵌入,多媒体形式更为灵活。
- 地理定位,随时随地分享位置。
- Canvas绘图,提升移动平台的绘图能力。
- 专为移动平台定制的表单元素。
- 丰富的交互方式支持。
- 使用成本上的优势,更低的开发及维护成本。
- CSS3视觉设计师的辅助利器。
- 实时通信。
- 档案以及硬件支持。
- 语意化。
- 双平台(iOS/Android)融合的App开发方式,提高工作效率。
可以预见,HTML 5的移动特性将使得其成为未来前端设计领域的翘楚。未来将是移动应用的天下,从近些年智能手机和平板电脑的蓬勃发展就可以看出来,移动优先已经成为趋势。HTML 5就是为移动应用而生的,虽然其还处在改进与完善的阶段,但笔者相信未来将会有更多的移动应用是基于HTML 5构建的。