HTML5微数据学习笔记

1、微数据的定义

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

　　自定义词汇表：咱们能够将“HTML5中全部元素的集合”看作一个词汇表，这个词汇表包括了能够表明章节或者文章的元素，可是不包括能够表明一我的或者活动的元素，若是要想表示一个“人”，那么就须要定义本身的词汇表，使用微数据就能够定义这样的词汇表。

　　做用域：微数据的做用域能够参照DOM中的元素之间的天然父子关系，微数据重用了DOM自己的层级结构，提供了一种方式来表达“全部该元素的属性都来自这个词汇表”。

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

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

 2、为何要使用微数据？

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

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

• Web浏览器
• 搜索引擎

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

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

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

3、微数据的格式

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

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

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

　　实例：

 1 <article>
 2     <h1>Google, Inc.</h1>
 3     <p>
 4         1600 Amphitheatre Parkway<br/>
 5         Mountain View, CA 94043<br/>
 6         USA
 7     </p>
 8     <p>650-253-0000</p>
 9     <p><a href="http://www.google.com/">Google.com</a></p>
10 </article>

　　添加微数据修改后：

 1 <article itemscope itemtype="http://data-vocabulary.org/Organization">
 2     <h1 itemprop="name">Google, Inc.</h1>
 3     <p  itemprop="address" itemscope
 4           itemtype="http://data-vocabulary.org/Address">
 5         <span  itemprop="street-address">1600 Amphitheatre Parkway<span><br/>
 6         <span itemprop="locality">Mountain View</span>
 7         <span itemprop="region">CA</span>
 8         <span itemprop="post-code">94043</span><br/>
 9         <span itemprop="country-name">USA</span>
10     </p>
11     <p itemprop="tel">650-253-0000</p>
12     <p><a itemprop="url" href="http://www.google.com/">Google.com</a></p>
13 </article>

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