path: root/files/zh-cn/web/html/global_attributes/itemprop/index.html

---
title: itemprop
slug: Web/HTML/Global_attributes/itemprop
translation_of: Web/HTML/Global_attributes/itemprop
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p>全局属性 <code><strong>itemprop</strong></code>被用于向一个物体中添加属性。每一个HTML元素都可以指定一个itemprop属性，一个<code>itemprop</code><font face="Open Sans, arial, sans-serif">属性</font>由name-value对组成。每一个键值对称为一个属性，一个元素可以有一个或者多个属性。属性值可以是一个string或者一个URL，并且可以和大部分元素进行组合，包括{{HTMLElement("audio")}}， {{HTMLElement("embed")}}， {{HTMLElement("iframe")}}， {{HTMLElement("img")}}， {{HTMLElement("link")}}， {{HTMLElement("object")}}， {{HTMLElement("source")}} ， {{HTMLElement("track")}}， 和 {{HTMLElement("video")}}。</p>

<h2 id="样例">样例</h2>

<p>下面的样例展示了一组带有<code>itemprop</code>属性的源代码，后面的表格展示了产生的结构化数据。</p>

<h3 id="HTML">HTML</h3>

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

<h3 id="Structured_data">Structured data</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="1" rowspan="2"> </td>
   <th colspan="2" rowspan="1">Item</th>
  </tr>
  <tr>
   <th><strong>itemprop name</strong></th>
   <th><strong>itemprop value</strong></th>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>name</td>
   <td>Avatar</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>director</td>
   <td>James Cameron</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>genre</td>
   <td>Science fiction</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>trailer</td>
   <td>../movies/avatar-theatrical-trailer.html</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>属性拥有的值可能是字符串又或者是URL。当一个字符串值是一个URL的时候，它被用 {{HTMLElement("a")}} 及它的属性值 {{htmlattrxref("href", "a")}} 、{{HTMLElement("img")}} 及它的属性值 {{htmlattrxref("src", "img")}} 、或者其它被链接到或嵌入外部的资源的元素来表述。</p>

<h3 id="Three_properties_with_values_that_are_strings">Three properties with values that are strings</h3>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;p&gt;My name is
   &lt;span itemprop="name"&gt;Neil&lt;/span&gt;.&lt;/p&gt;
 &lt;p&gt;My band is called
   &lt;span itemprop="band"&gt;Four Parts Water&lt;/span&gt;.&lt;/p&gt;
 &lt;p&gt;I am
   &lt;span itemprop="nationality"&gt;British&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="One_property_image_whose_value_is_a_URL">One property, "image", whose value is a URL</h3>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;img itemprop="image"
   src="google-logo.png" alt="Google"&gt;
&lt;/div&gt;</pre>

<p>当一个字符串值不能令人通俗易懂的时候（e.g.，一个长串的数字和字母），它能被用data元素的value属性表示，用所给元素内容的更易懂的版本（它不是结构化数据的一部分-请看下面的例子）。</p>

<h3 id="An_item_with_a_property_whose_value_is_a_product_ID">An item with a property whose value is a product ID</h3>

<p>ID不是人性化的，所以产品的名字是用的人所能看懂的文字而不是ID。</p>

<pre class="brush: html">&lt;h1 itemscope&gt;
 &lt;data itemprop="product-id"
   value="9678AOU879"&gt;The Instigator 2000&lt;/data&gt;
&lt;/h1&gt;</pre>

<p>对于数字数据，meter 元素及它的 value 属性值能够被用来表述。</p>

<h3 id="A_meter_element">A meter element</h3>

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

<p>与此相类似的，对于日期时间相关的数据，time 元素和他的 datetime 属性值能够被使用表示。</p>

<h3 id="An_item_with_one_property_birthday_whose_value_is_a_date">An item with one property, "birthday", whose value is a date</h3>

<pre class="brush: html">&lt;div itemscope&gt;
 I was born on &lt;time
   itemprop="birthday"
   datetime="2009-05-10"&gt;May 10th 2009&lt;/time&gt;.
&lt;/div&gt;</pre>

<p>通过把元素上的 itemscope 属性中声明属性，属性也可以是一个组 name-values 对。每个值既可以是一个字符串又可以是一组 name-values 对（i.e. 一个项）。</p>

<h3 id="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band">An outer item representing a person, and an inner one representing a band</h3>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;p&gt;Name:
   &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;Band:
   &lt;span itemprop="band" itemscope&gt;
     &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;
     (&lt;span itemprop="size"&gt;12&lt;/span&gt;
     players)&lt;/span&gt;&lt;/p&gt;
&lt;/div&gt;</pre>

<p>上面的外层项有两个属性，“name” 和 “band”。“name” 的值是 “Amanda”, “band” 的值是一个在它右侧的项决定的，它有两个属性，“name” 和 “size”。乐队的 “name” 的值是 “Jazz Band”，“size” 的值是 “12”。这个例子的外层项是顶级微数据标签。不是其他项的项被称为顶级微数据项。</p>

<h3 id="All_the_properties_separated_from_their_items">All the properties separated from their items</h3>

<p>这个样例和之前一个一摸一样，但是所有的属性都被从它们的项中分离了出来。</p>

<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
&lt;p id="a"&gt;Name:
  &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
&lt;div id="b"
  itemprop="band"
  itemscope itemref="c"&gt;&lt;/div&gt;
&lt;div id="c"&gt;
 &lt;p&gt;Band:
   &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;&lt;/p&gt;
 &lt;p&gt;Size:
   &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
&lt;/div&gt;</pre>

<p>这产生了和之前样例相同的结果。第一个项有两个属性，“name“，设置为“Amanda”和“band”，设置到另一个项去了。第二个项有两个更进一步的属性，“name”设置为“Jazz Band”并且“size”设置为“12”。</p>

<p>一个项可以有多个拥有相同名字但是值不同的属性。</p>

<h3 id="Ice_cream_with_two_flavors">Ice cream with two flavors</h3>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;p&gt;Flavors in my favorite ice cream:&lt;/p&gt;
 &lt;ul&gt;
  &lt;li itemprop="flavor"&gt;Lemon sorbet&lt;/li&gt;
  &lt;li itemprop="flavor"&gt;Apricot sorbet&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;</pre>

<p>这产生了一个物体有两个属性,都拥有名字 "flavor" 但是却有不同的值 "Lemon sorbet" 和 "Apricot sorbet"。</p>

<p>为了当一些属性有相同值的时候避免重复，一个介绍一个属性的元素同样可以一次性介绍多个属性。</p>

<h3 id="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange">An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"</h3>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;span
  itemprop="favorite-color
    favorite-fruit"&gt;orange&lt;/span&gt;
&lt;/div&gt;</pre>

<div class="note">
<p>注意：微数据和被标记微数据的文档的内容之间是没有关系的。</p>
</div>

<h3 id="Same_structured_data_marked_up_in_two_different_ways">Same structured data marked up in two different ways</h3>

<p id="There_is_no_semantic_difference_between_the_following_two_examples">语义上下面的两个样例没有任何区别。</p>

<pre class="brush: html">&lt;figure&gt;
 &lt;img src="castle.jpeg"&gt;
 &lt;figcaption&gt;&lt;span
   itemscope&gt;&lt;span
   itemprop="name"&gt;The Castle&lt;/span&gt;&lt;/span&gt;
     (1986)&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<pre class="brush: html">&lt;span itemscope&gt;&lt;meta
  itemprop="name"
  content="The Castle"&gt;&lt;/span&gt;
&lt;figure&gt;
 &lt;img src="castle.jpeg"&gt;
 &lt;figcaption&gt;The Castle
  (1986)&lt;/figcaption&gt;
&lt;/figure&gt;</pre>

<p>两者都是拥有标题的图，并且都同时， 和图完全无关地, 有一个 名字是 "name" 并且值是"The Castle"的键值对的物体项。唯一的区别是如果用户把图片标题拖拽出文档的话，这个项会包含在拖拽的数据中。图像相关的项不会被包括。</p>

<h2 id="名字和值">名字和值</h2>

<p>一个属性是一个大小写敏感且展示键值对的包含唯一序列的无序集合。属性的值必须有至少一个序列。下面的这个样例中，每个数据格子都是一个序列。</p>

<h3 id="Names_examples">Names examples</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th colspan="1" rowspan="2" scope="col"> </th>
   <th colspan="2" rowspan="1" scope="col">Item</th>
  </tr>
  <tr>
   <th scope="col">itemprop <strong>name</strong></th>
   <th scope="col">itemprop <strong>value</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>itemprop</th>
   <td>country</td>
   <td>Ireland</td>
  </tr>
  <tr>
   <th>itemprop</th>
   <td>Option</td>
   <td>2</td>
  </tr>
  <tr>
   <th>itemprop</th>
   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
   <td>Ring of Kerry</td>
  </tr>
  <tr>
   <th>itemprop</th>
   <td>img</td>
   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
  </tr>
  <tr>
   <th>itemprop</th>
   <td>website</td>
   <td>flickr</td>
  </tr>
  <tr>
   <th>itemprop</th>
   <td>(token)</td>
   <td>(token)</td>
  </tr>
 </tbody>
</table>

<p><strong>序列</strong>既可以是字符串也可以是URL。如果是一个URL，那么这个项被称为<strong>类型项</strong>。否则它是一个字符串。字符串不能包括句号和冒号（如下）。</p>

<ol>
 <li>如果项是一个类型项它必须满足:
  <ol>
   <li>是一个被定义的属性名</li>
   <li>一个合法的指向语法定义的URL</li>
   <li>一个合法的被用来当作所有权项属性名的URL</li>
  </ol>
 </li>
 <li>如果一个项不是类型项，他必须：
  <ol>
   <li>一个不含 "<strong>.</strong>" (U+002E 句号) 和 "<strong>:</strong>" (U+003A冒号) 并且被用作一个所有权项的属性名（没有公共规范定义的）</li>
  </ol>
 </li>
</ol>

<p class="note"><strong>注意:</strong> 上面的规则不允许 ":" 在没有URL的值中 是因为否则它们没法和URL作区分。带有"." 的值被保留作为将来可能的拓展。 空格也不被允许是因为否则值就会被解析为多个序列。</p>

<h2 id="值">值</h2>

<p>The property value of a name-value pair is as given for the first matching case in the following list:</p>

<ul>
 <li>If the element has an <strong>itemscope </strong>attribute

  <ul>
   <li>The value is the <strong>item </strong>created by the element.</li>
  </ul>
 </li>
 <li>If the element is a <strong>meta </strong>element
  <ul>
   <li>The value is the value of the element's <strong>content </strong>attribute</li>
  </ul>
 </li>
 <li>If the element is an <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>source</strong>, <strong>track</strong>, or <strong>video </strong>element
  <ul>
   <li>The value is the resulting URL string that results from parsing the value of the element's src attribute relative to the node document (part of the <a href="/en-US/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>) of the element at the time the attribute is set</li>
  </ul>
 </li>
 <li>If the element is an <strong>a</strong>, <strong>area</strong>, or <strong>link </strong>element
  <ul>
   <li>The value is the resulting URL string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set</li>
  </ul>
 </li>
 <li>If the element is an <strong>object </strong>element
  <ul>
   <li>The value is the resulting URL string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set</li>
  </ul>
 </li>
 <li>If the element is a <strong>data </strong>element
  <ul>
   <li>The value is the value of the element's value attribute</li>
  </ul>
 </li>
 <li>If the element is a <strong>meter </strong>element
  <ul>
   <li>The value is the value of the element's <strong>value </strong>attribute</li>
  </ul>
 </li>
 <li>If the element is a <strong>time </strong>element
  <ul>
   <li>The value is the element's <strong>datetime </strong>value</li>
  </ul>
 </li>
</ul>

<p>Otherwise</p>

<ul>
 <li>The value is the element's <strong>textContent</strong>.</li>
</ul>

<p>If a property's value is a<strong> URL</strong>, the property must be specified using a URL property element. The URL property elements are the <strong>a</strong>, <strong>area</strong>, <strong>audio</strong>, <strong>embed</strong>, <strong>iframe</strong>, <strong>img</strong>, <strong>link</strong>, <strong>object</strong>, <strong>source</strong>, <strong>track</strong>, and <strong>video </strong>elements.</p>

<h3 id="Name_order">Name order</h3>

<p>Names are unordered relative to each other, but if a particular name has multiple values, they do have a relative order.</p>

<h4 id="In_the_following_example_the_a_property_has_the_values_1_and_2_in_that_order_but_whether_the_a_property_comes_before_the_b_property_or_not_is_not_important">In the following example, the "a" property has the values "1" and "2", <em>in that order</em>, but whether the "a" property comes before the "b" property or not is not important</h4>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="The_following_is_equivalent">The following is equivalent</h4>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="As_is_the_following">As is the following</h4>

<pre class="brush: html">&lt;div itemscope&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="And_the_following">And the following</h4>

<pre class="brush: html">&lt;div id="x"&gt;
 &lt;p itemprop="a"&gt;1&lt;/p&gt;
&lt;/div&gt;
&lt;div itemscope itemref="x"&gt;
 &lt;p itemprop="b"&gt;test&lt;/p&gt;
 &lt;p itemprop="a"&gt;2&lt;/p&gt;
&lt;/div&gt;
</pre>

<h2 id="其他样例">其他样例</h2>

<h3 id="HTML_2">HTML</h3>

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

<h3 id="Structured_data_2">Structured data</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="1" rowspan="14">itemscope</td>
   <td>itemtype: itemid</td>
   <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>title</td>
   <td>The Reality Dysfunction</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>author</td>
   <td>Peter F. Hamilton</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td>pubdate</td>
   <td>1996-01-26</td>
  </tr>
 </tbody>
</table>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td><code><a href="https://html.spec.whatwg.org/multipage/microdata.html#names:-the-itemprop-attribute:names:-the-itemprop-attribute">itemprop</a></code></td>
   <td> </td>
   <td>WG Note - No longer being actively developed</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>

<h2 id="查看其他">查看其他</h2>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Global_attributes">其他不同的全局属性</a></li>
 <li>其他，微数据相关的全局属性:
  <ul>
   <li>{{htmlattrxref("itemid")}}</li>
   <li>{{htmlattrxref("itemprop")}}</li>
   <li>{{htmlattrxref("itemref")}}</li>
   <li>{{htmlattrxref("itemscope")}}</li>
   <li>{{htmlattrxref("itemtype")}}</li>
  </ul>
 </li>
</ul>
</div>
</div>