Html 简明教程

HTML - Microdata

Microdata 是一种在网页中提供其他语义的标准化方法。它让我们可以定义自己的自定义元素，并开始在网页中嵌入自定义属性。微数据由一组名称-值对组成。

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

Using Microdata in HTML document

之前，我们提到过微数据有一组名称-值对（属性），并且这组称为项目。

要创建项目，将使用 *itemscope *attribute。
要向项目添加属性，请对项目的一个后代使用 itemprop attribute。

Example

在此示例中，有两个项目，每个项目都具有属性“name” −

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

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

Global Attributes

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

S.No.	Attribute & Description
1	itemscope 用于创建项目。itemscope 属性是一个布尔属性，表示此页面上存在 Microdata，此处是 Microdata 开始的地方。
2	itemtype 该属性是一个定义项目并提供属性上下文的有效 URL。
3	itemid 该属性是项目的全局标识符。
4	itemprop 该属性定义项目的属性。
5	itemref 该属性给出了要抓取以查找项目名称-值对的其他元素的列表。

Properties Datatypes

如上例中所述，属性通常具有字符串值，但它们也可能具有 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 属性。

Microdata API support

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

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

Modernizr 目前还不支持检查 microdata API，因此我们需要使用类似于上面列出的函数。

HTML5 microdata 标准包括 HTML 标记（主要用于搜索引擎）和一组 DOM 函数（主要用于浏览器）。

我们可以在网页中包括 microdata 标记，而无法理解 microdata 属性的搜索引擎只会忽略它们。但如果我们需要通过 DOM 访问或操作 microdata，我们需要检查浏览器是否支持 microdata DOM API。

Defining Microdata Vocabulary

要定义 microdata 词汇表，你需要一个指向正在工作的网页的名称空间 URL。例如，[role="bare"] [role="bare"]http://data-vocabulary.org/Person 可用作具有以下命名属性的个人 microdata 词汇表的名称空间 −

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

Google 通过其富代码段程序支持微数据。当 Google 的网络爬虫分析您的页面并发现符合词汇表规范的微数据属性时，它会解析出这些属性并与页面其余数据一并存储。

您可以在 HTML5 微数据中找到更多有关微数据的信息。