Html 简明教程

HTML - Microdata

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

Microdata is a standardized way to provide additional semantics in the web pages. It lets us define our own customized elements and start embedding custom properties in the web pages. The microdata consists of a group of name-value pairs.

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

The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

Using Microdata in HTML document

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

Earlier, we mentioned that the microdata has group of name-value pairs (property) and this group is known as items.

To create an item, the *itemscope *attribute is used.
To add a property to an item, the itemprop attribute is used on one of the item’s descendants.

Example

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

In this example, there are two items, each of which has the property "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>

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

Properties generally have values that are strings but it can have following data types −

Global Attributes

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

Microdata introduces five global attributes which would be available for any element to use and give context for machines about your data.

S.No.	Attribute & Description
1	itemscope This is used to create an item. The itemscope attribute is a Boolean attribute that tells that there is Microdata on this page, and this is where it starts.
2	itemtype This attribute is a valid URL which defines the item and provides the context for the properties.
3	itemid This attribute is global identifier for the item.
4	itemprop This attribute defines a property of the item.
5	itemref This attribute gives a list of additional elements to crawl to find the name-value pairs of the item.

Properties Datatypes

如上例中所述，属性通常具有字符串值，但它们也可能具有 URL 值。以下示例具有一个属性“image”，其值为一个 URL −

Properties generally have values that are strings as mentioned in above example but they can also have values that are URLs. Following example has one property, "image", whose value is a URL −

<div itemscope>
   <img itemprop="image" src="tp-logo.gif" alt="TutorialsPoint">
</div>

属性的值也可以是日期、时间或日期和时间。这是使用 time 元素及其 datetime 属性实现的。

Properties can also have values that are dates, times, or dates and times. This is achieved using the time element and its datetime attribute.

<html>
<body>
   <div itemscope>
      My birthday is −
      <time itemprop="birthday" datetime="1971-05-08">
         Aug 5th 1971
      </time>
   </div>
</body>
</html>

属性本身也可以是名称-值对的组，方法是在声明属性的元素上放置 itemscope 属性。

Properties can also themselves be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property.

Microdata API support

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

If a browser supports the HTML5 microdata API, there will be a getItems() function on the global document object. If browser doesn’t support microdata, the getItems() function will be undefined.

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

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

Modernizr does not yet support checking for the microdata API, so we will need to use the function like the one listed above.

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

The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers).

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

We can include microdata markup in our web pages and the search engines that are not capable to understand the microdata attributes will just ignore them. But if we need to access or manipulate microdata through the DOM, we need to check whether the browser supports the microdata DOM API.

Defining Microdata Vocabulary

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

To define microdata vocabulary, you need a namespace URL which points to a working web page. For example, [role="bare"]http://data-vocabulary.org/Person can be used as the namespace for a personal microdata vocabulary with the following named properties −

name − Person name as a simple string
Photo − A URL to a picture of the person.
URL − A website belonging to the person.

关于属性：人微数据可以用以下方式表达 −

Using about properties a person microdata could be as follows −

<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 的网络爬虫分析您的页面并发现符合词汇表规范的微数据属性时，它会解析出这些属性并与页面其余数据一并存储。

Google supports microdata as part of their Rich Snippets program. When Google’s web crawler parses your page and finds microdata properties that conform to the vocabulary, it parses out those properties and stores them alongside the rest of the page data.

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

For further development on Microdata you can always refer to HTML5 Microdata.