極客書

HTML5 - Microdata

微數據是在網頁中提供附加語義的標準化方法。

微數據允許您定義自己的自定義元素，並開始在網頁中嵌入自定義屬性。在高層次上，微數據由一組名-值對組成。

這些組稱爲項，每個名稱-值對都是a屬性。項和屬性由正則元素表示。

Example

  • 要創建項，使用項目範圍屬性。

  • 若要將屬性添加到項，則在項的一個後代上使用Itemprop屬性。

這裡有兩個項，每個項都有屬性「name」−

Live Demo 
<html>
   <body>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

屬性的值通常是字符串，但它可以有以下數據類型−

Global Attributes

Microdata引入了五個全局屬性，可供任何元素使用，並爲機器提供有關數據的上下文。

Sr.No. Attribute & Description
1

項目範圍

這用於創建項。itemscope屬性是一個布爾屬性，它告訴我們這個頁面上有微數據，這就是它的開始。
2

項目類型

此屬性是定義項並爲屬性提供上下文的有效URL。
3

項目ID

此屬性是項的全局標識符。
4

Itemprop

此屬性定義項的屬性。
5

Itemref

此屬性提供要爬網以查找項的名稱-值對的其他元素的列表。

Properties Datatypes

屬性通常具有上述示例中提到的字符串值，但也可以具有URL值。下面的示例有一個屬性「image」，其值爲URL−

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "TutorialsPoint">
</div>

屬性也可以具有日期、時間或日期和時間值。這是使用time元素及其datetime屬性實現的。

Live Demo 
<html>
   <body>
      
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

屬性本身也可以是名稱-值對的組，方法是將itemscope屬性放在聲明該屬性的元素上。

Microdata API support

如果瀏覽器支持HTML5微數據API，則全局文檔對象上將有一個getItems（）函數。如果瀏覽器不支持微數據，則getItems（）函數將未定義。

function supports_microdata_api() {
   return !!document.getItems;
}

modernisr還不支持檢查微數據API，因此您需要使用上面列出的函數。

HTML5微數據標準包括HTML標記（主要用於搜尋引擎）和一組DOM函數（主要用於瀏覽器）。

你可以在網頁中包含微數據標記，而不理解微數據屬性的搜尋引擎會忽略它們。但如果需要通過DOM訪問或操作微數據，則需要檢查瀏覽器是否支持微數據DOM API。

Defining Microdata Vocabulary

要定義微數據詞彙表，需要一個指向工作網頁的名稱空間URL。例如，https://data-vocabulary.org/Person可以用作具有以下命名屬性的個人微數據詞彙表的名稱空間−

  • 姓名−人名爲簡單字符串

  • 照片−此人照片的URL。

  • URL−屬於此人的網站。

使用一個人的屬性，微數據可以如下所示;

Live Demo 
<html>
   <body>
   
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
         
            <p>
               <img itemprop = "photo" 
                  src = "http://www.tutorialspoint.com/green/images/logo.png">
            </p>
            
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
      
   </body>
</html>

它將產生以下結果&負;

谷歌支持微數據作爲其豐富的代碼片段程序的一部分。當Google的web爬蟲解析你的頁面並找到符合http://data vocabulary.org/Person詞彙表的微數據屬性時，它會解析出這些屬性並將它們與其他頁面數據一起存儲。

有關微數據的進一步開發，您可以隨時參考html5微數據。