itemprop属性 | itemprop (attribute)

itemprop全局属性用来性质添加到项目中。每个 HTML 元素都可以itemprop指定一个属性，并且itemprop由一个名称 - 值对组成。每个名称 - 值对称为一个属性，一组一个或多个属性形成一个项目。属性值是一个字符串或一个 URL，并且可以与一个很宽范围的元素，包括相关联<audio>，<embed>，<iframe>，<img>，<link>，<object>，<source>，<track>，和<video>。

例子

下面的例子显示了一系列用itemprop属性标记的元素的源代码，后面跟着一张显示结果数据的表格。

HTML

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html"
    itemprop="trailer">Trailer</a>
</div>

结构化数据

	Item
itemprop name	itemprop value
itemprop	name	Avatar
itemprop	director	James Cameron
itemprop	genre	Science fiction
itemprop	trailer	../movies/avatar-theatrical-trailer.html

属性

属性的值是字符串或 URL 。当字符串值是一个 URL 时，它使用<a>元素及其href属性，<img>元素及其src属性或链接到或嵌入外部资源的其他元素来表示。

三个值为字符串的属性

<div itemscope>
 <p>My name is
   <span itemprop="name">Neil</span>.</p>
 <p>My band is called
   <span itemprop="band">Four Parts Water</span>.</p>
 <p>I am
   <span itemprop="nationality">British</span>.</p>
</div>

一个属性，“图片”，其值是一个 URL

<div itemscope>
 <img itemprop="image"
   src="google-logo.png" alt="Google">
</div>

当一个字符串值不能被人轻易读取和理解时（例如，一串长长的数字和字母），它可以使用数据元素的 value 属性来显示，而更容易理解的是 a 元素内容中给出的人类版本（这不是结构化数据的一部分 - 请参见下面的示例）。

具有属性，其值为产品 ID 的项目

此 ID 不是人性化的，所以产品的名称使用了人眼可见的文本而不是 ID 。

<h1 itemscope>
 <data itemprop="product-id"
   value="9678AOU879">The Instigator 2000</data>
</h1>

对于数字数据，可以使用 meter 元素及其 value 属性。

一个 meter 元素

<div itemscope itemtype="http://schema.org/Product">
 <span itemprop="name">Panasonic White
   60L Refrigerator</span>
 <img src="panasonic-fridge-60l-white.jpg" alt="">
  <div itemprop="aggregateRating"
       itemscope
       itemtype="http://schema.org/AggregateRating">
   <meter itemprop="ratingValue"
     min=0 value=3.5 max=5>Rated 3.5/5</meter>
   (based on <span
     itemprop="reviewCount">11</span>
     customer reviews)
  </div>
</div>

同样，对于与日期和时间相关的数据，可以使用时间元素及其日期时间属性。

具有一个属性的项目，“生日”，其值是日期

<div itemscope>
 I was born on <time
   itemprop="birthday"
   datetime="2009-05-10">May 10th 2009</time>.
</div>

通过将 itemscope 属性放在声明该属性的元素上，属性也可以是名称 - 值对的组。每个值都是一个字符串或一组名称 - 值对（即一个项目）。

表示人的外部项目，表示乐队的内部项目

<div itemscope>
 <p>Name:
   <span itemprop="name">Amanda</span></p>
 <p>Band:
   <span itemprop="band" itemscope>
     <span itemprop="name">Jazz Band</span>
     (<span itemprop="size">12</span>
     players)</span></p>
</div>

上面的外部项目有两个属性，“name”和“band”。“name”是“Amanda”，“band”本身就是一个项目，有两个属性“name”和“size”。乐队的“name”是“Jazz Band”，“size”是“12”。本例中的外部项目是顶级微数据项目。不属于他人的项目称为顶级微数据项目。

所有属性都与其项目分开

这个例子与前一个例子相同，但所有的属性都与它们的项目分开

<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name:
  <span itemprop="name">Amanda</span></p>
<div id="b"
  itemprop="band"
  itemscope itemref="c"></div>
<div id="c">
 <p>Band:
   <span itemprop="name">Jazz Band</span></p>
 <p>Size:
   <span itemprop="size">12</span> players</p>
</div>

这给出了与前面的例子相同的结果。第一个项目有两个属性，“name”，设置为“Amanda”，和“band”，设置为另一个项目。第二个项目还有两个属性，“name”，设置为“Jazz Band”和“size”，设置为“12”。

一个项目可以具有多个具有相同名称和不同值的属性。

冰淇淋有两种口味

<div itemscope>
 <p>Flavors in my favorite ice cream:</p>
 <ul>
  <li itemprop="flavor">Lemon sorbet</li>
  <li itemprop="flavor">Apricot sorbet</li>
 </ul>
</div>

这产生了具有两个属性的项目，其名称为“flavor”并具有“Lemon sorbet”和“Apricot sorbet”的值。

引入属性的元素也可以同时引入多个属性，以避免在某些属性具有相同值时重复。

具有两个属性的项目，“favorite-color”和“favorite-fruit”，都设置为值“orange”

<div itemscope>
 <span
  itemprop="favorite-color
    favorite-fruit">orange</span>
</div>

注意：微数据和微数据标记文档的内容之间没有关系。

以两种不同的方式标记相同的结构化数据

以下两个例子之间没有语义上的区别

<figure>
 <img src="castle.jpeg">
 <figcaption><span
   itemscope><span
   itemprop="name">The Castle</span></span>
     (1986)</figcaption>
</figure>

<span itemscope><meta
  itemprop="name"
  content="The Castle"></span>
<figure>
 <img src="castle.jpeg">
 <figcaption>The Castle
  (1986)</figcaption>
</figure>

两者都有一个带有标题的图形，而且与图形完全无关，都有一个带名称 - 值对的项目，名称为“name”，值为“The Castle”。唯一的区别是，如果用户将无形文字拖出文档，则该项目将包含在拖放数据中。与该项目相关的图像将不包含在内。

Names 和 values

属性是区分大小写的唯一令牌的无序集合，它表示名称 - 值对。属性值必须至少有一个令牌。在下面的例子中，每个数据单元都是一个令牌。

名称的例子

	Item
itemprop name	itemprop value
itemprop	country	Ireland
itemprop	Option	2
itemprop	https://www.flickr.com/photos/nlireland/6992065114/	Ring of Kerry
itemprop	img	https://www.flickr.com/photos/nlireland/6992065114/
itemprop	website	flickr
itemprop	(token)	(token)

Tokens 是字符串或 URL 。如果一个项目是一个 URL，那么它就被称为一个类型项目。否则，它是一个字符串。字符串不能包含句点或冒号（见下文）。

如果该项目是一个输入项目，它必须是：
1. 定义的属性名称，或
2. 一个有效的 URL，指的是词汇定义，或者
3. 用作专有项目属性名称的有效 URL（即未在公共规范中定义的URL）或
如果物品不是打印物品，则必须是：
1. 一个不包含“ 。 ”（U + 002E FULL STOP）字符且不包含“ ： ”字符（U + 003A COLON）的字符串，用作专有项目属性名称（同样，未在公开说明中定义）。

注意：上面的规则不允许在非 URL 值中使用“：”字符，否则它们无法与 URL 区分。带“。”的值字符被保留用于未来的扩展。空格字符是不允许的，否则这些值将被解析为多个标记。

Values

名称 - 值对的属性值与以下列表中第一个匹配的情况相同：

如果元素有一个 itemscope 属性
- 该值是元素创建的项目。
如果元素是 meta 元素
- 该值是元素内容属性的值
如果元素是 audio，embed，iframe，img，source，track 或 video 元素
- 该值是由设置属性时元素的 src 属性相对于元素的节点文档（Microdata DOM API 的一部分）解析而得到的结果 URL 字符串
如果元素是 a，area 或 link 元素
- 该值是生成的 URL 字符串，它是通过在设置属性时解析元素的 href 属性相对于元素的节点文档的值而得到的
如果元素是一个 object 元素
- 该值是生成的 URL 字符串，它是通过在设置属性时解析元素的 data 属性的值相对于元素的节点文档而得出的
如果元素是 data 元素
- 该值是元素的值属性的值
如果元素是一个 meter 元素
- 该值是元素的值属性的值
如果元素是 time 元素
- 该值是元素的日期时间值

除此以外

值是元素的 textContent 。

如果属性的值是一个 URL，则必须使用 URL 属性元素来指定该属性。URL属性元素是 a, area, audio, embed, iframe, img, link, object, source, track, 和 video 元素。

名称顺序

名称相对于彼此是无序的，但是如果某个特定名称具有多个值，则它们具有相对顺序。

在以下示例中，“a”属性的值依次为 “1”和“2” ，但“a”属性是否位于“b”属性之前并不重要

<div itemscope>
 <p itemprop="a">1</p>
 <p itemprop="a">2</p>
 <p itemprop="b">test</p>
</div>

以下是等同的

<div itemscope>
 <p itemprop="b">test</p>
 <p itemprop="a">1</p>
 <p itemprop="a">2</p>
</div>

如下所示

<div itemscope>
 <p itemprop="a">1</p>
 <p itemprop="b">test</p>
 <p itemprop="a">2</p>
</div>

以下

<div id="x">
 <p itemprop="a">1</p>
</div>
<div itemscope itemref="x">
 <p itemprop="b">test</p>
 <p itemprop="a">2</p>
</div>

其他例子

HTML

<dl itemscope
  itemtype="http://vocab.example.net/book"
  itemid="urn:isbn:0-330-34032-8">
 <dt>Title
   <dd
    itemprop="title">The Reality Dysfunction 
 <dt>Author
   <dd
     itemprop="author">Peter F. Hamilton 
 <dt>Publication date 
 <dd><time
   itemprop="pubdate"
   datetime="1996-01-26">26 January 1996</time>
</dl>

结构化数据

itemscope	itemtype: itemid	http://vocab.example.net/book: urn:isbn:0-330-34032-8
itemprop	title	The Reality Dysfunction
itemprop	author	Peter F. Hamilton
itemprop	pubdate	1996-01-26

结果

规范

Specification	Status	Comment
itemprop		WG Note - No longer being actively developed

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-08-22