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.com/green/images/logo.png">
         </p>
         <a itemprop="url" href="#">Site</a>
      </section>
   </div>
</body>
</html>

Google 支持微数据作为其丰富摘要计划的一部分。当 Google 的网络爬虫解析您的页面并找到符合词汇表的微数据属性时，它会解析这些属性并将其与页面的其余数据一起存储。

有关微数据的进一步开发，您始终可以参考 HTML5 微数据。

打印页面