HTML5 – 微数据

微数据是在您的网页中提供附加语义的标准化方法。

微数据允许您定义自己的定制元素并开始嵌入自定义属性在您的网页中。在高层次上，微数据由一组名称值对组成。

这些组称为项目，每个名称值对是一个属性。项目和属性由常规元素表示。

示例

要创建一个项目，使用 itemscope 属性。
要向项目添加属性，请在项目的后代之一上使用 itemprop 属性。

在这里有两个项目，每个项目都有一个名为“name”的属性−

<html>
   <body>

      <div itemscope>
         <p>我的名字是 <span itemprop = "name">Zara</span>。</p>
      </div>

      <div itemscope>
         <p>我的名字是 <span itemprop = "name">Nuha</span>。</p>
      </div>

   </body>
</html>

它将产生以下结果−

HTML5 - 微数据

属性通常具有字符串值，但可以具有以下数据类型−

全局属性

微数据引入了五个全局属性，这些属性可用于任何元素，并为机器提供有关数据的上下文。

序号	属性&说明
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>

它将产生以下结果−

HTML5 - 微数据

属性也可以本身是名称-值对的组，通过在声明属性的元素上放置itemscope属性来实现。

微数据API支持

如果浏览器支持HTML5微数据API，则全局文档对象上将有一个getItems()函数。如果浏览器不支持微数据，则getItems()函数将未定义。

function supports_microdata_api() {
  return !!document.getItems;
}

现代浏览器还不支持检查微数据API，因此您需要使用上面列出的函数。

HTML5微数据标准包括HTML标记（主要针对搜索引擎）和一组DOM函数（主要针对浏览器）。

您可以在Web页面中包含微数据标记，不了解微数据属性的搜索引擎将会忽略它们。但是，如果您需要通过DOM访问或操作微数据，则需要检查浏览器是否支持微数据DOM API。

定义微数据词汇

要定义微数据词汇，您需要一个指向工作网页的命名空间URL。例如，https://data-vocabulary.org/Person可以用作个人微数据词汇的命名空间，并具有以下命名属性 −

name − 人名作为简单字符串
Photo − 指向人物图片的URL。
URL − 属于人的网站。

使用about属性时，个人微数据可以如下所示 −

<html>
  <body>

    <div itemscope>
      <section itemscope itemtype = "http://data-vocabulary.org/Person">
        <h1 itemprop = "name">高斯</h1>

        <p>
          <img itemprop = "photo" src = "http://www.tutorialspoint.com/green/images/logo.png">
        </p>

        <a itemprop = "url" href = "#">网站</a>
      </section>
    </div>

  </body>
</html>

它将产生以下结果 −

HTML5 - 微数据