HTML - 微資料

微資料是在網頁中提供額外語義的標準化方法。它允許我們定義自己的自定義元素，並開始在網頁中嵌入自定義屬性。微資料由一組名稱-值對組成。

這些組稱為專案，每個名稱-值對都是一個屬性。專案和屬性由常規元素表示。

在 HTML 文件中使用微資料

之前，我們提到微資料有一組名稱-值對（屬性），並且該組稱為專案。

要建立專案，使用itemscope屬性。
要向專案新增屬性，在專案的某個後代元素上使用itemprop屬性。

示例

在此示例中，有兩個專案，每個專案都具有“名稱”屬性 -

<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>

屬性通常具有字串值，但它可以具有以下資料型別 -

全域性屬性

微資料引入了五個全域性屬性，這些屬性可供任何元素使用，併為機器提供有關資料上下文的提示。

序號	屬性和描述
1	itemscope 用於建立專案。itemscope 屬性是一個布林屬性，表示此頁面上存在微資料，並且這是它的開始位置。
2	itemtype 此屬性是一個有效的 URL，它定義了專案併為屬性提供上下文。
3	itemid 此屬性是專案的全域性識別符號。
4	itemprop 此屬性定義了專案的屬性。
5	itemref 此屬性提供了一個元素列表，用於爬取以查詢專案的名稱-值對。

屬性資料型別

如上例所示，屬性通常具有字串值，但它們也可以具有 URL 值。以下示例具有一個屬性“image”，其值為 URL -

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

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

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

屬性本身也可以是一組名稱-值對，方法是在宣告屬性的元素上放置itemscope屬性。

微資料 API 支援

如果瀏覽器支援 HTML5 微資料 API，則全域性文件物件上將有一個getItems()函式。如果瀏覽器不支援微資料，則getItems()函式將未定義。

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

Modernizr 尚未支援檢查微資料 API，因此我們需要使用上面列出的類似函式。

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

我們可以在網頁中包含微資料標記，而無法理解微資料屬性的搜尋引擎將忽略它們。但是，如果我們需要透過 DOM 訪問或操作微資料，則需要檢查瀏覽器是否支援微資料 DOM API。

定義微資料詞彙表

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

name - 作為簡單字串的人名
Photo - 指向人物圖片的 URL。
URL - 屬於該人的網站。

使用關於屬性，人物微資料可能如下所示 -

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

Google 支援微資料作為其豐富摘要計劃的一部分。當 Google 的網路爬蟲解析您的頁面並找到符合詞彙表的微資料屬性時，它會解析這些屬性並將其與頁面的其餘資料一起儲存。

有關微資料的進一步開發，您始終可以參考 HTML5 微資料。

列印頁面