HTML5移动开发即学即用
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.2 HTML5与HTML4的区别

WHATWG组织力推HTML5标准取代HTML4标准的一个重要目标就是,让浏览器摆脱需要安装各种插件才能显示或播放不同格式文件的情况,用WHATWG自己的话说,即建立一个开放的Web环境。

开放的Web环境有两层意思。

第一层意思是HTML5标准的详细规范(Specification)是开放的。规范中对HTML5相关的API,包括浏览器的动作,都做了详细的规定,任何人都能完全掌握HTML5相关的API的详细内容。只要是遵循了HTML5规范的浏览器,一定会按照规范所规定的动作运行。按照这种形式发展下去,将来编程时就不会有浏览器间不兼容的烦恼了。

第二层意思是版权使用免费。使用HTML5相关的API时,原则上是完全免费的。这里讲的“原则上”免费,是HTML5标准追求的理想状态。事实上由于视频/音频编解码器的版权问题,到目前为止还没有在HTML5标准中加入视频/音频编解码器的相关规范。因此不同的浏览器采用的视频编解码各不相同。如果以H.264(MP4)作为主流的话,将来完全免费这个目标可能就做不到了。但是毕竟HTML5中还没有关于视频/音频编解码器的相关规范,以当前HTML5的状态来讲,版权使用免费这一点还是得到了坚持。

我们知道W3C HTML4标准主要是以标记性(Markup)语言为主的规范。HTML5标准大大扩展了这方面的内容,而且还引入了很多种API,下面我们逐条罗列W3C关于HTML5与HTML4标准,除API之外的具体区别。

1.强调浏览器间的兼容性

在HTML5标准中,除了针对Web开发者的规定外,还有许多针对浏览器的规定。这些都是为了防止浏览器间出现显示/运行结果不一致的现象而设置的。这其中,最大的规定是关于文件解析算法的。

我们知道,浏览器读取HTML文档后,首先要进行断句处理(Tokenization),就是将标记性文本数据拆分成元素、属性、注释等因子。接着将其转换成被称为DOM树的层次型构造对象。HTML4标准中关于此类处理没有任何规定,因此不同浏览器会出现不同的处理结果。特别是当HTML文档中包含有语法错误时,经常出现各个不同的浏览器中生成的DOM树差异巨大。

在HTML5标准中,关于怎样解释标记,怎样生成DOM树都做了严密的规定。实际上,DOM树的生成,不仅对文档解析,而且对Web应用程序开发来说也是非常重要的。如果浏览器间的DOM树不同,则JavaScript将不能获取想要的对象。如果将来所有的浏览器都遵循HTML5标准,那么无论是何种浏览器都将生成完全一致的DOM树。

2.新的解析顺序:不再基于SGML

尽管HTML5和SGML在标记语法上有相似性,但HTML5的语法并不再基于它,而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始行,看起来就像SGML的文档类型声明:

<!DOCTYPE html>

而旧HTML(SGML)使用的文档类型声明如下(之一):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.
w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">

HTML4的文档类型声明基于SGML规范,宣言中包含了各种各样的信息。但是,实际上这些信息几乎没有作用。对于Web开发来说,唯一有点意义的可能就是渲染模式(Rendering Mode)。在IE浏览器中,可以在文档类型宣言中进行渲染模式的切换。有标准模式与互换模式两种,样式化时此两种模式间有巨大的差异。在标准模式的情况下,按照近似Web标准的形式进行渲染,而在互换模式的情况下,将遵循旧版本的渲染方式。为了与其他浏览器的渲染结果一致,通常在文档类型声明中定义标准模式。在HTML5中则只剩下标准模式了。

另外,在HTML5标准的文档中定义文字编码及默认语言的方式,比HTML4有很大的简化。以下是两个标准间的比较。

● HTML4中定义文字的编码:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

● HTML5中定义文字的编码:

<meta charset="utf-8" />

● HTML4中定义默认语言:

<meta http-equiv="Content-Language" content="zh" />

● HTML5中定义默认语言:

<meta lang="zh" />

3.追加新的元素

在HTML5中,追加了如下带有明确语义的新标签:

section, video, progress, nav, meter, time, aside, canvas, command,
datalist, details, embed, figcaption, figure, footer, header, hgroup,
keygen, mark, output, rp, rt, ruby, source, summary, wbr。

在上述标签中,section标签、article标签等是为了精确描述文档结构而特别导入的,其他的还有command\detail\summary\datalist等标签都可以在Web应用程序中使用。过去用div标签等没有任何具体意义的标签实现的功能可以用这些新标签实现。

4.增加了input元素的新属性:date,email,url

此处提到的3种新属性在上面提到的4种浏览器的最新版本中都已实现。其实在Opera浏览器的10.60以后的版本中实现了超过这3种属性的新属性。如:datetime\month\week\time\datetime-local\number\ranger\color等等,有兴趣的读者可以下载最新的Opera浏览器来尝试一下这些最新的属性,HTML5的正式标准中可能也会导入这些现在只在Opera浏览器中出现的属性。

5.新的通用属性

ping(用于a与area),charset(用于meta),async(用于script)

6.增加全局属性

id,tabindex,repeat

7.删除元素

acronym,applet,basefont,big,center,dir,font,frame,frameset,isindex,
noframes,s,strike,tt,u

8.导入在线的SVG与MathML

SVG是处理矢量图形的标记规范。MathML是处理数学算式的标记规范。都是以前在HTML中不能处理的技术,但这些技术将来很有前途。SVG及MathML都是以XML为基础的标记语言。使用XHTML进行编写,而且以Content-Type为XML的形式从服务器中送出数据。另外,几乎所有的浏览器都没有标准搭载这两种功能,一般Web网站中几乎没有得到应用。

但是从2010年7月开始,浏览器市场占有率最高的IE,在其最新的版本IE9中已经宣布导入SVG,今后一般网站中应该可以慢慢使用SVG了。