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”屬性在網頁上生成的資料。
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP