Web标准与 HTML5的核心技术研究

马新强,孙 兆,袁 哲,迟凤利

(重庆文理学院 计算机学院,重庆 永川 402160)

2010年7月15日,中国互联网络信息中心(CNNIC)在京发布了《第26次中国互联网络发展状况统计报告》.《报告》显示,截至 2010年6月底,我国网民规模达 4.2亿人,互联网普及率持续上升,增至31.8%[1].网页的增长速度与网站的增速基本一致,其中相当一部分的网站使用的仍然是 HTML的表格布局及落后的后台技术,这给网站的使用、维护、更新都带来了一定的不便.

目前,仍有大量的网页开发人员借助 Front-Page、Dreamweaver等所见即所得工具进行网页的开发.由于不关心 HTML的性能造成了 table标签的滥用,大量垃圾代码的生成,造成了带宽和服务器方面的负担.而 Web标准可以减少网页代码,加快打开速度,节省服务器带宽资源;容易被搜索引擎收录、查询,改版比较容易等等.按照 Web标准开发将是网页设计的一个趋势.同时,新技术的不断推出,陈旧的开发模式已经不是世界的主流.2010年9月,W3C组织正式向公众推荐的 HTML5是页面开发的最新版 HTML语言[2].强大的标签功能和 API已经远远超越了以往的标签语言.加上它面向语义的标签和废除众多陈旧的标签和属性以及体验上的巨大提升,使他成为众多大公司及开发人员推崇的对象.W3C预计在2022年HTML5将会成为世界的主流.新技术的推出也驱使着开发人员开发模式的转变.

1 Web标准核心技术

Web标准不是某一个标准,而是一系列标准的集合.网页主要由 3部分组成:结构(Structure)、表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要包括 XHTML和XML,表现标准语言主要包括 CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript等.这些标准大部分由 W3C起草和发布,也有一些是其他标准组织制订的标准,比如 ECMA(European Computer Manufacturers Association)的ECMAScript标准.Web标准组成如图1所示.

图1 Web标准组成

1.1 结构标准语言

1.1.1 XML

XML是 The Extensible Markup Language(可扩展标识语言)的简写,目前推荐遵循的是 W3C于 2000年10月6日发布的 XML1.0[3].和HTML一样,XML同样来源于 SGML,但 XML是一种能定义其他语言的语言.XML最初设计的目的是弥补 HTML的不足,以强大的扩展性满足网络信息发布的需要,后来逐渐用于网络数据的转换和描述.

1.1.2 XHTML

XHTML是The Extensible Hypertext Markup Language(可扩展超文本标识语言)的缩写[2].XML虽然数据转换能力强大,完全可以替代HTML,但面对成千上万已有的站点,直接采用XML还为时过早.因此,我们在HTML4.0的基础上,用 XML的规则对其进行扩展,得到了XHTML.简单地说,建立 XHTML的目的就是实现 HTML向 XML的过渡.

1.2 表现标准语言

CSS是 Cascading Style Sheets(层叠样式表)的缩写,目前推荐遵循的是 W3C于 1998年5月12日推荐的 CSS2[4].W3C创建 CSS标准的目的是以 CSS取代 HTML表格式布局、帧和其他表现的语言.纯 CSS布局与结构式 XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易.

1.3 行为标准

1.3.1 DOM

DOM是 DocumentObjectModel(文档对象模型)的缩写.根据 W 3C DOM规范[5],DOM是一种与浏览器、平台、语言的接口,使得你可以访问页面其他的标准组件.简单理解,DOM解决了Netscaped的 JavaScript和 Microsoft的 Jscrip t之间的冲突,给予 Web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对象.

1.3.2 ECMAScript

ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言(JavaScript).目前推荐遵循的是 ECMAScript 262.

1.4 采用 Web标准的优点

1)对于访问者:

1.文件下载与页面显示速度更快.

2.内容能被更多的用户所访问(包括失明、视弱、色盲等人士).

3.内容能被更广泛的设备所访问(包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱).

4.用户能够通过样式选择定制自己的表现界面.

5.所有页面都能提供适于打印的版本.

2)对于网站所有者:

1.更少的代码和组件,容易维护.

2.带宽要求降低(代码更简洁),成本降低.举个例子:当 ESPN.com使用 CSS改版后,每天节约超过 2M的带宽.

3.更容易被搜索引擎搜索到.

4.改版方便,不需要变动页面内容.

5.提供打印版本而不需要复制内容.

6.提高网站易用性.在美国,有严格的法律条款(Section 508)来约束政府网站必须达到一定的易用性,其他国家也有类似的要求.

2 HTML5核心技术

网络是不断进化的,新的和有创意的网站每天都在出现,从各方面都在冲击着 HTML的边界.HTML 4来到我们身边已经差不多有 10年了,发行者们不断地寻求提供更强大的功能的新技术,但是常会因为标记语言和浏览器的约束而路途坎坷.为了给作者们提供更灵活,更具互操作性,能有更多交互性并令人振奋的网站和应用程序,HTML5引入并加强了一系列功能,包括表单控制、应用程序接口(APIs)、多媒体、结构化和语义化等.

HTML5草案的前身名为 Web Applications 1.0,2004年被 WHATWG提出,2007年被 W 3C接纳,并成立了新的 HTML工作团队.2010年9月正式向公众推荐第一份正式草案.HTML5是近十年来 Web标准最巨大的飞跃.和以前的版本不同,HTML 5并非仅仅用来表示 Web内容,它的使命是将 Web带入一个成熟的应用平台,在这个平台上,视频、音频、图像、动画以及同电脑的交互都被标准化[6].尽管 HTML 5的实现还有很长的路要走,但 HTML 5正在改变 Web.

2.1 HTML5新特性

2.1.1 新标记

HTML5提供了一些新的元素和属性,例如＜nav＞(网站导航块)和 ＜footer＞.这种标签将有利于搜索引擎的索引整理,同时更好地帮助小屏幕装置和视障人士使用.除此之外,还为其他浏览要素提供了新的功能,如 ＜audio＞和 ＜video＞标记.一些过时的 HTML4标记将被取消,其中包括纯粹显示效果的标记,如 ＜font＞和 ＜center＞,它们已经被 CSS取代.

2.1.2 新绘图画布模式

HTML5的 canvas元素使用 JavaScript在网页上绘制图像.画布是一个矩形区域,可以是图片、图表和游戏组件,现在可以不用 Flash或其它插件就可以直接在网页上涂鸦了.可以控制其每一像素,canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法.

2.1.3 新应用程序接口(API)

除了原先的 DOM接口,HTML5增加了更多API,如用于即时 2D绘图的 Canvas标签,定时媒体回放,离线数据库存储,文档编辑,拖拽控制,浏览历史管理等.

2.1.4 新多媒体方式

原生态视频和音频流支持,Youtube和 Pandora可能有一天会跳过 Flash给你带来全新的视频和音频体验,包括定时播放和其它贴心的功能,这一切都得归功于 HTML5中的视频和音频标记.

2.1.5 新文档结构变化与智能表单

HTML5吸取了 XHTML2的一些建议,包括一些用来改善文档结构的功能.比如,新的HTML标签 header,footer,dialog,aside,figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在这些场合是一律使用 div的.新标准适用了一些全新的表单输入对象,包括日期,URL,Email地址,其它的对象则增加了对非拉丁字符的支持.HTML5还引入了微数据,一种使用机器可以识别的标签标注内容的方法,使语义Web的处理更为简单.总的来说,这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好.

2.1.6 新的 HTML元素和属性

传统通用元素的语义化版本,如代替 div元素的 nav,footer等元素,也有一些全新的元素,如 audio,video.一些在HTML4中不被保举利用的元素,如 font和 center将被弃用.HTML5引进的新 HTML元素包括:article、aside、audio、canvas、 command、datalist、details、dialog、embed、figure、 footer、header、 hgroup、 keygen、mark、meter、nav、output、progress、rp、 rt、ruby、section、source、time、video.这些新标签可以让你的 HTML文档更便利加载,且更便于被搜索引擎抓取此中的有效信息,好比搜索引擎可以间接抓取它最关切的article标签内里的内容.

2.2 HTML5与 Web标准比较

HTML 5引入了一整套全新的元素来让构建页面变得更加简单.大多数基于 HTML 4的页面包含多种常用结构,比如说页首(header)、页脚(footer)和纵列(column).现阶段我们通常会用div元素标记这些区块,然后为它们定义一个描述性的 id或是 class.如图2所示.

图2 HTML 5与 HTML 4结构对比图

图表说明一个典型的用 div元素带上 id和class属性标记的 2栏布局.其中包括页首(header)和页脚(footer),在页首下面是一个水平导航条,主体内容又包含了文章(article)和它右边的侧边栏(sidebar).大量地使用 div元素是因为目前的 HTML4版本缺少更明确的语义描述这些区块所致.HTML 5为了表现这些不同的区块而引入了新的元素.那些 div元素可以被新的元素代替了:header,nav,section,article,aside以及footer.

3 HTML5与 Web中流行技术的共存

目前 Web世界已经习惯了各种插件和 API,HTML5为 Web开发与设计者带来了方便与不便,HTML5将如何同现在的这些流行技术共存呢?

3.1 HTML5与Ajax

现在的 HTML语言 存在的 一个问题是,它是一种轻量级的应用界面, 那些喜欢使用Ajax实现在线应用的开发者会发现 HTML非常不好用.HTML作为结构语言加载界面,JavaScript用来执行命令,虽然 HTML在作为界面语言方面并不好用,但鉴于多数开发者对它的熟悉程度,HTML还是不可缺少.HTML5的出现让 Ajax应用的实现变得更容易,丰富的 JavaScript API让结构语言与行为语言结合得更紧密.

3.2 HTML5与 CSS样式

你需对你的 CSS代码就行整理以支持 HTML5,因为 h1,h2之类的标签将不再使用,为了实现同 HTML5的兼容,最好的方式是使用 CSS reset,将那些常见的 HTML标签的 CSS属性清零.随着 CSS3.0的推出,CSS将会给用户带来更多惊喜.

3.3 HTML5与Flash

Flash被某些开发设计者滥用导致一些网页加载缓慢,而 HTML5为之带来一线曙光.拿仍在襁褓中的 HTML5和已经有 10年历史的Flash进行比较也许有失公允,但这是人人都关心的一个问题[7].相对 Windows用户来说,Mac用户可能会从 HTML5获得更多好处,因为苹果一直不愿支持 Flash.下面是 Mike Chambers针对 Mac和Windows平台浏览器的 CPU负载而做的一部分测试.测试显示,Mac平台的 Flash表现要差于Windows平台,这还取决于你使用的浏览器.现在看来,就视频游戏而言,Flash是更好的选择,但取决于你的浏览器,如果你的视频不是很复杂,HTML5是更好的选择.Web开发与设计者从这些争论中应该吸取的东西是,Flash之外还有别的选择,但 Flash有牢固的地盘,在为客户提供开发设计的时候,需要对他们的目标客户做一些研究.关于 HTML5与 Flash的争论,各方也持有不同的观点,51CTO之前也曾报导过很多这样的文章.比如,“当 Flash遇到 HTML5互联网视频倾向哪方?”“HTML5来临 Flash死亡倒计时”,“HTML5代表未来插件不会销声匿迹”,等等.

3.4 HTML5与浏览器的兼容

HTML5技术的推广离不开各大浏览器厂商的支持,同时各大浏览器制作厂商也遇见到了HTML5的前景.包括谷歌的 Chrome、苹果的 Safari、Mozilla的 Firefox、Opera Software ASA的 Opera以及微软公司的 IE9在内的主流浏览器均不同程度地对 HTML5提供了一定的支持.随着HTML5草案的不断完善,更多的兼容与更好的支持一定会让 HTML5得到更好的推广.

4 技术应用

在HTML5方面的工作得到了各大厂商的大力推动,包括 Adobe、苹果 、谷歌 、微软 、Mozilla基金会、Opera软件公司及其他厂商.这些公司认识到需要升级已无法满足当前需求的 HTML标准,它们的工作有助于 HTML5的推广和普及,因此,对 Web开发人员来说,HTML5机遇实在诱人,不容忽视.腾讯公司推出 WebQQ2.0,在浏览器上实现优秀的桌面体验告诉我们,其实前端可以做很多事情,Web产品已经不仅仅是由网页组成的,而是实现各种交互功能的软件产品.WebQQ2.0所使用的页面语言是 HTML5,虽然HTML5还得不到浏览器的全面支持,但已经看到了未来网络的一角.除了新的技术外还有那些让人炫目的新体验,以用户为中心可以让前端变得很不一样.通过猜测和研究用户的操作习惯让我们可以做到很多曾经做不到的东西.

国内外很多的知名互联网企业早已经开始尝试实验并使用 HTML5,比如谷歌和网易邮箱的附件拖拽,谷歌首页,淘宝的部分特效,以及部分视频播放、游戏等应用.

结合 Web标准的设计思想与 HTML5的部分技术我们实现了一个社团网站(红星漫影协会网站),并利用 JQuery框架和 CSS3.0进行行为层和表现层的视觉特效制作,采用了标准化的系统具有更好的安全性、可扩展性和易维护性.

5 结语

在HTML5被广泛采用之前,我们还无法完全知道 HTML5代码将带来的好与坏.对开发者和图形设计师而言,这将是一个巨大的变化,虽然目前面临的问题和挑战依然很多,但这丝毫不影响HTML5成为未来网络应用开发的核心技术.

[1]CNNIC.第26次中国互联网络发展状况统计报告[R/OL].2010-07-15(2010-10-11).http://www.cnnic.net.cn/htm l/Dir/2010/07/15/5921.htm.

[2]W 3C.HTML52 A vocabulary and associated APIs for HTML and XHTML[EB/OL].2010-08-12(2010-11-01).http://www.w3.org/TR/html5.

[3]W3C.REC-XML[EB/OL].2010-07-15(2010-11-01)www.w 3.org/TR/2000/REC-XML.

[4]W 3C.CSSBrowsers[EB/OL].2010-07-15(2010-11-02).http://www.w3.org/Style/CSS.

[5]W 3C.DOM[EB/OL].2010-07-15(2010-11-02).http://www.w3.org/DOM/.

[6]刘斌.HTML5-未来网络应用的核心技术研究[J].自动化与仪器仪表,2010(4):30-33.

[7]唐灿.下一代 Web界面前端技术综述[J].重庆工商大学学报:自然科学版,2009,4(26):350-355.