HTML5 中的微数据 API

在 HTML5 中，微数据用于将元数据嵌套到已存在的网页内容中。通过这种方法，可以轻松地将机器可读数据插入到 HTML 文档中，并具有清晰的解析范例。使用微数据，我们可以创建自己独特的元素，并开始将独特的属性添加到我们的网页中。

微数据由一系列名称-值对组成。项目是一系列名称-值对的集合，每个名称-值属性称为属性。常规元素用于表示项目和属性。

HTML5 微数据全局属性

微数据引入了以下五个全局属性，任何元素都可以使用它们来为计算机提供有关我们数据的上下文。

让我们逐一了解，以便更好地理解 HTML5 中的微数据。

属性

描述
itemscope

定义微数据项目的范围。
itemprop

定义微数据的名称/值对。
itemtype

用于定义用于编码微数据的词汇表的 URL。
itemid

为微数据项目设置唯一标识符。
itemref

包含 itemscope 属性之外的 itemprop 属性。

让我们看看以下 HTML5 中微数据 API 的示例，以获得更好的理解。

使用“itemtype”属性

与特定 itemtype 属性关联的属性是 itemtype 属性。它充当全局变量，任何流程活动都可以引用或修改它。通常，itemtype 属性提供有关对象的信息，这些信息对于工作流程过程正确管理项目是必需的。

示例

在下面的示例中，我们使用 itemscope 属性（这是一个布尔属性，它定义了指定元数据的范围）以及 itemtype 属性。

<!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>

输出

当脚本执行时，它将生成一个输出，显示文本以及使用`` 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 属性，它以名称-值对作为参数。

示例

请看下面的例子。我们在句子中使用 itemprop 属性和 span 标签。

<!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日

浏览量：337

启动你的职业生涯

完成课程获得认证

开始学习
广告