HTML5 中的微資料 API


在 HTML5 中,微資料用於將元資料巢狀到已存在的網頁內容中。透過這種方法,可以輕鬆地將機器可讀資料插入到 HTML 文件中,並具有清晰的解析正規化。使用微資料,我們可以建立自己獨特的元素,並開始將獨特的屬性新增到我們的網頁中。

微資料由一系列名稱-值對組成。專案是一組名稱-值對,每個名稱-值屬性稱為屬性。使用常規元素來表示專案和屬性。

HTML5 微資料全域性屬性

微資料引入了以下五個全域性屬性,任何元素都可以使用它們來為計算機提供關於我們資料的上下文。

讓我們逐一瞭解,以便更好地理解 HTML5 中的微資料。

屬性

描述

itemscope

定義微資料專案的範圍。

itemprop

定義微資料的名稱/值對。

itemtype

用於定義用於編碼微資料的詞彙表的 URL。

itemid

為微資料專案設定唯一識別符號。

itemref

包含 itemscope 屬性之外的 itemprop 屬性。

讓我們看一下 HTML5 中微資料 API 的以下示例,以便更好地理解。

使用“item type”屬性

與特定 item type 關聯的屬性是 item type 屬性。它充當全域性變數,任何流程活動都可以引用或修改它。通常,item type 屬性提供有關物件的資訊,這些資訊對於工作流程過程正確管理專案是必需的。

示例

在下面的示例中,我們使用 itemscope 屬性(這是一個布林屬性,它定義了指定元資料的範圍)以及 item type 屬性。

<!DOCTYPE html>
<html>
   <body>
      <span itemprop="name">Welcome To Tutorialspoint</span>
      <img src="https://tutorialspoint.tw/images/logo.png" alt="Logo">
      <div itemprop="aggregateRating" itemscope itemtype="https://tutorialspoint.tw/images/logo.png">
         <meter itemprop="Courses" min=0 value=3.5 max=5>Rated 3.5/5</meter>
         (People Intrested <span itemprop="reviewCount"></span> In JAVA Learning)
      </div>
   </body>
</html>

輸出

當指令碼執行時,它將生成一個輸出,顯示文字以及使用 <img> src 上傳的影像和網頁上的儀表。

使用“itemref”屬性

ref 是一個特殊的屬性,它使我們能夠在 DOM 元素或子元件例項掛載後直接引用它。

示例

考慮以下示例,我們在這裡使用 itemref 屬性,它列印 itemref 屬性下提到的所有 id 值。

<!DOCTYPE html>
<html>
   <body>
      <div itemscope itemref="CARS BIKES">MOTORLIFE</div>
      <article>
         <div id=CARS1>
            <span itemprop=CARS>BMW</span><br>
            <span itemprop=CARS>BENZ</span>
         </div>
         <div id=BIKE1>
            <span itemprop=BIKE>DUCATI</span><br>
            <span itemprop=BIKE>TRIUMPH</span>
         </div>
      </article>
   </body>
</html>

輸出

執行上述指令碼後,它將生成一個輸出,其中包含指令碼中使用的文字以及使用 itemref 屬性在網頁上生成的文字。

使用“itemprop”屬性

要向專案新增屬性,請使用 itemprop 全域性屬性。可以為任何 HTML 元素提供 itemprop 屬性,它以名稱-值對作為引數。

示例

請看下面的例子。我們在句子中的 span 標籤中使用 itemprop 屬性。

<!DOCTYPE html>
<html>
   <body>
      <article itemscope>
         <h2 itemprop="NAME">MSD</h2>
         <ul>
            <li>Nationality: <span itemprop="nationality">INDIAN</span></li>
            <li>Age: <span itemprop="age">41</span></li>
            <li>Hair colour: <span itemprop="colour">LONG BROWN COLOURED HAIR</span></li>
         </ul>
      </article>
   </body>
</html>

輸出

當用戶嘗試執行指令碼時,它將顯示一個輸出,其中包含使用“itemprop”屬性在網頁上生成的資料。

更新於:2023年10月11日

瀏覽量:336

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.