HTML5微数据学习笔记

一、微数据的定义

　　开门见山，微数据使用来自自定义词汇表的、带作用域的名/值对来给DOM做标记。

　　自定义词汇表：我们可以将“HTML5中所有元素的集合”看做一个词汇表，这个词汇表包括了可以代表章节或者文章的元素，但是不包括可以代表一个人或者活动的元素，如果要想表示一个“人”，那么就需要定义自己的词汇表，使用微数据就可以定义这样的词汇表。

　　作用域：微数据的作用域可以参照DOM中的元素之间的自然父子关系，微数据重用了DOM本身的层级结构，提供了一种方式来表达“所有该元素的属性都来自这个词汇表”。

　　名/值对：每一个微数据词汇表都定义了一组命名属性，一个微数据的属性名总是声明在一个HTML元素中。相对应的属性值则从DOM中获取。对于大多数HTML元素而言，属性值就是元素的文本内容。但也有少数例外，如下表：

元素	值
<meta>	content属性
<audio> <embed> <iframe> <img> <source> <video>	src属性
<a> <area> <link>	href属性
<object>	data属性
<time>	datetime属性
所有其他元素	文本内容

二、为什么要使用微数据？

　　“添加微数据”到网页就是给已有的那些HTML元素增添一些属性，那就不得不问“为什么我们要使用微数据”，难道只是为了增加语义而增加语义吗？

　　事实上，有两类主要的应用程序会消费HTML及其扩展，以及HTML5微数据：

Web浏览器

搜索引擎

　　对于浏览器，HTML5定义了一组DOM API，用于从网页上提取微数据项目、属性以及属性值。实际上支持微数据的浏览器基本上等于没有，坑爹呐！也许在未来某一天主流浏览器都会实现这些客户端API吧……

　　而另一个主要的HTML消费者就是搜索引擎。一个搜索引擎会用关于一个人的微数据属性来干嘛呢？想象一下，搜索引擎可以继承并显示一些结构化的信息，而不仅仅是显示页面标题和一些摘要文字。这些结构化信息包括：姓名、职称、工作单位、地址，甚至一个资料照片缩略图。

　　Google支持微数据，其Rich Snippets计划就包含了对微数据的支持。当Google的Web抓取工具分析到你的网页，并找到符合词汇表的微数据属性，就会开始解析属性数据，同页面其余数据一并存储。实际上利用这种抓取效果，你就可以得到搜索公司的优待，为你提供定制的搜索结果页。

三、微数据的格式

　　itemscope：声明你所要添加的属性的作用域，加在最外层的元素。

　　itemtype：声明所使用的词汇表，加在最外层的元素中。

　　itemprop：声明属性名，具体的内容要参加所引用的词汇表。

　　实例：

<article>
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br/>
Mountain View, CA 94043<br/>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article>

　　添加微数据修改后：

<article itemscope itemtype="http://data-vocabulary.org/Organization">
<h1 itemprop="name">Google, Inc.</h1>
<p  itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span  itemprop="street-address">1600 Amphitheatre Parkway<span><br/>
<span itemprop="locality">Mountain View</span>
<span itemprop="region">CA</span>
<span itemprop="post-code">94043</span><br/>
<span itemprop="country-name">USA</span>
</p>
<p itemprop="tel">650-253-0000</p>
<p><a itemprop="url" href="http://www.google.com/">Google.com</a></p>
</article>

※ 以上部分内容来自《HTML5揭秘》Mark Pilgrim著. 电子工业出版社