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著. 電子工業出版社