HTML - 微数据：初学者指南

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索HTML微数据的世界。如果你对这个概念感到陌生，不用担心——我会作为你的友好向导，一步一步地带你学习。在本教程结束时，你会发现你学到了很多！

什么是微数据？

在我们深入探讨之前，让我们从基础开始。微数据是一种给你的HTML内容添加额外意义的方式。这就像给你的网页赋予了一种搜索引擎和其他计算机程序可以理解的秘密语言。酷不酷？

在HTML文档中使用微数据

现在，让我们来写一些代码！以下是一个简单的例子，展示我们如何使用微数据：

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">网页开发者</span>
<span itemprop="telephone">(123) 456-7890</span>
</div>

让我们分解一下：

• itemscope 告诉浏览器这个 <div> 包含微数据。
• itemtype 指定了我们描述的物品类型（在这个例子中，是一个人）。
• itemprop 标记了特定的信息（姓名、职位、电话）。

把它想象成填写一个关于人的表格。每个 itemprop 就像表格中的一个字段。

全局属性

微数据引入了一些可以在任何HTML元素上使用的新属性。让我们来看一下它们：

属性	描述
itemscope	表示HTML包含微数据
itemtype	指定词汇表（例如，schema.org）
itemprop	定义项目的属性
itemid	为项目提供唯一标识符
itemref	引用不是itemscope后代的属性

属性数据类型

当我们使用微数据时，我们可以指定不同类型的数据。以下是常见数据类型的表格：

数据类型	示例
文本	<span itemprop="name">John Doe</span>
数字	<span itemprop="age">30</span>
日期	<time itemprop="birthDate" datetime="1990-05-15">1990年5月15日</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);
}

这段代码找到页面上的所有“人”项目，并将它们的姓名输出到控制台。这就像是为你的HTML拥有了一个超级搜索功能！

定义微数据词汇

最后但同样重要的是，让我们来谈谈词汇。词汇就像是微数据的字典。它定义了一个项目可以有哪些属性。最常用的词汇是Schema.org，它被主要的搜索引擎支持。

以下是一个使用Schema.org词汇描述电影的例子：

<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">阿凡达</h1>
<span>导演: <span itemprop="director">詹姆斯·卡梅隆</span></span>
<span itemprop="genre">科幻</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">预告片</a>
</div>

在这个例子中，我们描述了一部电影，包括它的名称、导演、类型和预告片的链接。搜索引擎可以使用这些信息在搜索结果中显示丰富的摘要。

结论

好了，伙计们！我们已经穿越了HTML微数据的领域，从基本概念到更高级的使用方法。记住，微数据就是给HTML添加意义，让机器更容易理解你的内容。

在你继续网页开发旅程的过程中，你会发现微数据就像是你的工具箱中的一件秘密武器。它帮助搜索引擎更好地理解你的内容，可能会提高你网站的可见性。此外，它还是一种将数据结构化为标准化格式的好方法。

继续练习，不断探索，最重要的是，享受这个过程！谁知道呢？你下一个使用微数据构建的网站，可能就是改变世界的那个网站。快乐编码！

Credits: Image by storyset