微数据是在网页中提供其他语义的标准化方法。它允许我们定义自己的自定义元素,并开始在网页中嵌入自定义属性。微数据由一组名称/值对组成。
这些组称为项,每个名称/值对都是一个属性。项和属性由常规元素表示。
在 HTML 文档中使用微数据
前面提到过,微数据有一组名称-值对(属性),这个组被称为项目。
- 若要创建项,请使用 itemscope 属性。
- 若要向项添加属性,请在项的后代之一上使用 itemprop 属性。
例子
在此示例中,有两个项目,每个项目都具有属性“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>
属性通常具有字符串值,但可以具有以下数据类型 −
全局属性
微数据引入了五个全局属性,这些属性可供任何元素使用,并为机器提供有关数据的上下文。
属性 | 描述 |
---|---|
itemscope | 这用于创建项目。itemscope 属性是一个 Boolean 属性,它表示此页面上有微数据,这是它开始的地方。 |
itemtype | 此属性是一个有效的 URL,用于定义项并提供属性的上下文。 |
itemid | 此属性是物料的全局标识符。 |
itemprop | 此属性定义项的属性。 |
itemref | 此属性提供要爬网以查找项的名称/值对的其他元素的列表。 |
属性和数据类型
属性通常具有如上例所述的字符串值,但它们也可以具有 URL 值。以下示例有一个属性“image”,其值为 URL:
<div itemscope>
<img itemprop="image" src="tp-logo.gif" alt="qikepu.com">
</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 属性放在声明属性的元素上。
微数据 API 支持
如果浏览器支持 HTML5 微数据 API,则全局文档对象上将有一个 getItems() 函数。如果浏览器不支持微数据,则 getItems() 函数将未定义。
function supports_microdata_api() {
return !!document.getItems;
}
Modernizr 尚不支持检查微数据 API,因此我们需要使用上面列出的函数。
HTML5 微数据标准包括 HTML 标记(主要用于搜索引擎)和一组 DOM 函数(主要用于浏览器)。
我们可以在网页中包含微数据标记,无法理解微数据属性的搜索引擎只会忽略它们。但是如果我们需要通过 DOM 访问或操作微数据,我们需要检查浏览器是否支持微数据 DOM API。
定义微观数据词汇
要定义微数据词汇表,您需要一个指向工作网页的命名空间 URL。例如,http://www.qikepu.com/Person 可以用作具有以下命名属性的个人微数据词汇表的命名空间 -
- name − 简单字符串形式的人名
- Photo - 人物照片的 URL。
- URL − 属于该人的网站。
使用关于属性的人微观数据可以如下:
<html>
<body>
<div itemscope>
<section itemscope itemtype="http://www.qikepu.com/Person">
<h1 itemprop="name">Gopal K Varma</h1>
<p>
<img itemprop="photo" src="http://www.qikepu.com/green/images/logo.png">
</p>
<a itemprop="url" href="#">Site</a>
</section>
</div>
</body>
</html>
谷歌支持微数据作为其 Rich Snippets 计划的一部分。当 Google 的网络抓取工具解析您的网页并找到符合词汇表的微观数据属性时,它会解析出这些属性,并将它们与其他网页数据一起存储。
有关微数据的进一步开发,您可以随时参考 HTML5 微数据。