HTML - 微資料：初學者指南

你好，未來的網頁開發者們！今天，我們將要踏上一段令人興奮的旅程，進入 HTML 微資料的世界。別擔心如果你是新手——我將成為你的友好導遊，我們會一步步來。到了這個教學的結尾，你將會對你所學到的知識感到驚奇！

HTML - Microdata

微資料是什麼？

在我們深入之前，讓我們從基礎開始。微資料是一種為你的 HTML 內容添加額外含義的方式。這就像給你的網頁一種秘密語言，讓搜索引擎和其他計算機程序能夠理解。酷炫吧？

在 HTML 文档中使用微資料

現在，讓我們來動手寫一些代碼吧！以下是一個如何使用微資料的簡單範例：

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
<span itemprop="telephone">(123) 456-7890</span>
</div>

讓我們來解析一下：

itemscope 告訴瀏覽器這個 <div> 包含微資料。
itemtype 指定了我們正在描述的項目的類型（在這個例子中，是一個 Person）。
itemprop 标识特定的信息片段（姓名、職位、電話）。

把它想象成填寫一個關於人的表單。每個 itemprop 就像表單中的一個字段。

全局屬性

微資料引入了一些可以用在任何 HTML 元素上的新屬性。讓我們在方便的表格中看看它們：

屬性	描述
itemscope	表示 HTML 包含微資料
itemtype	指定詞彙表（例如，schema.org）
itemprop	定義項目的屬性
itemid	為項目提供唯一標識符
itemref	參考不是 itemscope 的子元素的屬性

屬性數據類型

當我們使用微資料時，我們可以指定不同類型的數據。以下是一個展示一些常見數據類型的表格：

數據類型	範例
Text	`<span itemprop="name">John Doe</span>`
Number	`<span itemprop="age">30</span>`
Date	`<time itemprop="birthDate" datetime="1990-05-15">May 15, 1990</time>`
URL	`<a href="http://example.com" itemprop="url">我的網站</a>`

微資料 API 支援

現在，這部分真的很有趣！支持微資料的瀏覽器有一個特殊的 API（應用程序編程接口），讓 JavaScript 能夠與頁面上的微資料互動。

以下是一個簡單的範例：

var items = document.getItems("http://schema.org/Person");
for (var i = 0; i < items.length; i++) {
var name = items[i].properties["name"][0];
console.log("找到人： " + name);
}

這段代碼找到了頁面上所有的 "Person" 項目，並將它們的名字記錄到控制台。這就像為你的 HTML 提供了一個超級搜索功能！

定義微資料詞彙表

最後但同樣重要的是，讓我們來談談詞彙表。詞彙表就像微資料的字典。它定義了一個項目可以有哪些屬性。最常使用的詞彙表是 Schema.org，它得到了主要搜索引擎的支持。

以下是一個使用 Schema.org 詞彙表的電影範例：

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>導演: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">科幻</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">預告片</a>
</div>

在這個例子中，我們正在描述一個電影及其名稱、導演、類型和預告片的鏈接。搜索引擎可以使用這些信息在搜索結果中顯示豐富摘要。

結論

好了，各位！我們已經穿越了 HTML 微資料的領地，從基本概念到更高级的使用。記住，微資料是關於為你的 HTML 添加含義，讓機器更容易理解你的內容。

在你繼續網頁開發的旅程中，你會發現微資料就像是你工具包中的秘密武器。它幫助搜索引擎更好地理解你的內容，可能會提高你的網站可見度。此外，它還是一種將你的數據結構化為標準格式的絕佳方式。

繼續練習，繼續探索，最重要的是，享受其中的樂趣！誰知道呢？你使用微資料建立的下一個網站可能會改變世界。開心編程！

Credits: Image by storyset