From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/html/global_attributes/itemprop/index.html | 507 +++++++++++++++++++++ 1 file changed, 507 insertions(+) create mode 100644 files/zh-cn/web/html/global_attributes/itemprop/index.html (limited to 'files/zh-cn/web/html/global_attributes/itemprop') diff --git a/files/zh-cn/web/html/global_attributes/itemprop/index.html b/files/zh-cn/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..f9bbe32116 --- /dev/null +++ b/files/zh-cn/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,507 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +translation_of: Web/HTML/Global_attributes/itemprop +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

全局属性 itemprop被用于向一个物体中添加属性。每一个HTML元素都可以指定一个itemprop属性，一个itemprop属性由name-value对组成。每一个键值对称为一个属性，一个元素可以有一个或者多个属性。属性值可以是一个string或者一个URL，并且可以和大部分元素进行组合，包括{{HTMLElement("audio")}}， {{HTMLElement("embed")}}， {{HTMLElement("iframe")}}， {{HTMLElement("img")}}， {{HTMLElement("link")}}， {{HTMLElement("object")}}， {{HTMLElement("source")}} ， {{HTMLElement("track")}}， 和 {{HTMLElement("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>
+ +

Structured data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Item
itemprop nameitemprop value
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
+ +

属性

+ +

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

+ +

Three properties with values that are strings

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

One property, "image", whose value is a URL

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

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

+ +

An item with a property whose value is a product ID

+ +

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

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

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

+ +

A meter element

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

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

+ +

An item with one property, "birthday", whose value is a date

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

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

+ +

An outer item representing a person, and an inner one representing a band

+ +
<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”。这个例子的外层项是顶级微数据标签。不是其他项的项被称为顶级微数据项。

+ +

All the properties separated from their items

+ +

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

+ +
<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”。

+ +

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

+ +

Ice cream with two flavors

+ +
<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"。

+ +

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

+ +

An item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange"

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

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

+
+ +

Same structured data marked up in two different ways

+ +

语义上下面的两个样例没有任何区别。

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Item
itemprop nameitemprop value
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
+ +

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

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

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

+ +

值

+ +

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

+ + + +

Otherwise

+ + + +

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

+ +

Name order

+ +

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

+ +

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

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

The following is equivalent

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

As is the following

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

And the following

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

Structured data

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemidhttp://vocab.example.net/book: urn:isbn:0-330-34032-8
itemproptitleThe Reality Dysfunction
itempropauthorPeter F. Hamilton
itemproppubdate1996-01-26
+ +

Result

+ +

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

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemprop WG Note - No longer being actively developed
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +

查看其他

+ +
    +
  • 其他不同的全局属性
    • +
  • 其他，微数据相关的全局属性: +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
+
+
-- cgit v1.2.3-54-g00ecf