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.com/images/logo.png" alt="Logo">
      <div itemprop="aggregateRating" itemscope itemtype="https://tutorialspoint.com/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

开启您的 职业生涯

完成课程获得认证

开始学习
广告