Explore. Dream. Discover.

Samuel Chen's life

Twenty years from now you will be more disappointed by
the things that you didn't do than by the ones you did do.
So throw off the bowlines. Sail away from the safe harbor.
Catch the trade winds in your sails.

Explore. Dream. Discover.
—— Mark Twain

2010年2月4日星期四

HTML 5 Inside – Overview 总览

本文基于 HTM5 标准草案 2009年8月25日版
转载请保留出处：http://SamuelChen.net
HTML5并不是一个全新的语言，它只是在HTML4的基础上进行进化，去掉了一些内容修饰的tag，增加了许多新的特性。我们可以简单的认为 HTML5  = HTML4 - legacy features + colletion of new features
HTML5 有一个很重要的改变，那就是强化了语义。更多的标签引入带来了更加丰富的语义，使得爬虫、解析程序对页面的理解可以更加贴近人的理解。
下面从各个方面来说说。

兼容性

我们常说某某浏览器支持或者不支持HTML5，其实这个并不是一个严谨的说法。事实上，HTML只是一种标记性语言，它是被浏览器解析并渲染显示的，所以并不存在HTML5支持不支持，而应该是HTML5中某一元素是否能被浏览器支持。

由于HTML5是由HTML4发展而来，很多旧有的元素本身就能支持，因此，HTML5是兼容HTML4的，我们更多的是说某浏览器引擎是否支持HTML5中的某一特性。

comparison_of_layout_engines_(HTML5)_element 各浏览器引擎对元素的支持，来自 Comparison of layout engines (HTML5) - Wikipedia

那么自然而然就有一个问题，如何去判断一个浏览器是否支持某一个特性？我们可以通过创建一个元素是否成功来判断，比如创建函数supports_canvas() 用来判断是否支持canvas :

1:   function supports_canvas() {

2:     return !!document.createElement('canvas').getContext;

3:   }

然后调用这个函数来判断是否支持canvas :

1: if (supports_canvas()) {

2:   document.write("Your browser supports canvas.");

3: } else {

4:   document.write("Your browser does not support canvas.");

5: }

结果如图所示, Chrome4 支持 IE6 不支持:

supports_canvas

有人将所有类似的函数封装成了一个库 Modernizr ，你可以直接使用 Modernizr.canvastext, Modernizr.video, modernizr.video.h264 等方式来判断是否支持指定的特性。

内容模型（Content Models）

HTML5采用了一种新的内容模型用以替代HTML4中block和inline的概念。

HTML5 中，所有的元素（Elements）都属于（拥有）某一个定义好的内容模型，这个内容模型描述了这个元素中可以包含哪些节点。

任何一个元素都归于0或多个内容分类，以便将具有相似特性的元素归组。HTML5标准中的内容分类有如下几种（某些元素也会归于其他分类）：

content-venn
  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content
这些分类之间的关系如图所示。

Metadata content 表示该内容用于设定内容的呈现、行为、文档（document）之间的关系或者传递外界信息（converys “out-of-band” information），基本上可以理解为元素的元数据。

base, command, link, meta, noscript, script, style, title 这些元素、属性或者标签都属于Metadata Content.

非HTML命名空间下的元素，如果它的语义主要是元数据相关的（metadata-related），那么它也是属于metadata content。比如引入第三方的namespace来支持RDF，那么此时就认为这个是属于 metadata content。如代码中所示:

1: <html xmlns="http://www.w3.org/1999/xhtml"

2:       xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

3:  <head>

4:   <title>Hedral's Home Page</title>

5:   <r:RDF>

6:    <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"

7:            r:about="http://hedral.example.com/#">

8:     <fullName>Cat Hedral</fullName>

9:     <mailbox r:resource="mailto:hedral@damowmow.com"/>

10:     <personalTitle>Sir</personalTitle>

11:    </Person>

12:   </r:RDF>

13:  </head>

14:  <body>

15:   <h1>My home page</h1>

16:   <p>This is my home page.</p>

17:  </body>

18: </html>

其他几个Content就不一一解释了，看着图加上顾名思义，都比较容易理解。请参考文档 Content Model on Spec 。

文档结构

HTML5 引入了多个新的元素用来更加细致的描述页面、文档结构，这些元素包括 header, nav, section, article, aside, footer ，用以替代目前的使用 div 或者 table 的方式。使用这些元素，作者可以让文档页面更加具有语义，更加易读，也可以让搜索引擎更好的理解页面的内容和各个部分之间的关系，应用API也能更容易、更准确细微的访问文档对象。

如下图（来自于smashing magzine）所示，非常清晰的表述了各个元素对应的文档内容关系。注意，这些元素并不包含布局信息。

html5_structure

其他变化

HTML5基本上是基于DOM的使用来定义该语言的，而HTML4和之前的版本是基于显示与布局的，所以我们在使用时要注意，出发点的不同会造成开发模式侧重点的不同。

沙箱，iframe的不同。HTML5中的iframe除了保留原有的嵌入网页的功能外，还增加了一个沙箱（sandbox）的新功能。这个沙箱功能使得在iframe中载入的网页能受到一系列限制，从而可以增加安全性和稳定性。使用这个功能，需要在iframe元素中使用”sandbox” 属性（attribut）。

可访问性的增强。增加了一些内建提高访问性（accessibility）的属性（比如hidden）、元素（比如progress）。

交互性增强。增加了命令（command）、菜单（menu）、拖拽（Drag & Drop）、撤销管理（Undo Manager）以及复制粘贴（Copy &  Paiste）等元素、属性或特性。

其他的一些变化，请参考spec，如果有时间会在后面的章节中介绍。

HTML5 标准中增强了对于作者（author）和用户代理（user agent）的描述，我将根据不同的上下文，将 author 称为作者、开发人员或者其他，将 user agent 称为客户程序、浏览器、搜索引擎、播放器（浏览器中）或者其他。

标签： , , ,

发贴者：Samuel Chen @ 下午03:33:00  

0 条评论:

发表评论

订阅 帖子评论 [Atom]

指向此帖子的链接:

创建链接

<< 主页