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

itemscope 是一个布尔值的 全局属性 。它定义了一个与元数据关联的数据项。就是说一个元素的 itemscope 属性会创建一个项，包含了一组与元素相关的键值对。 相关的属性 {{htmlattrxref("itemtype")}} 通常表示表中一个有效的 URL （比如 schema.org） 来表述项目和上下文。下面每个例子中的概念表都来自 schema.org.

+ +

每个 HTML 元素都可以有指定的 itemscope 属性。一个具有 itemscope 属性的元素可以没有关联的 itemtype ，但必须有相关的 itemref。

+ +
+

译者注: Schema.org 提供了一份共享的词汇表，站长可以使用它来标记网页，而这些标记则被主要的搜索引擎： Google， Microsoft， Yandex 和 Yahoo! 所支持。

+
+ +
+

提示: 获取更多关于 itemtype 属性的信息： http://schema.org/Thing

+
+ +

简单示例

+ +

HTML

+ +

下面一个例子指定的 itemscope 属性，设置了 itemtype 为 "http://schema.org/Movie"， 并且有3个关联的 itemprop 属性（name、director、genre）。

+ +
<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="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
+</div>
+
+ +

 

+ +

结构化数据

+ +

下表展示了上面例子当中的结构化数据。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgenreScience Fiction
itempropnameAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
+ +

itemscope id 属性

+ +

当你表述一个元素的 itemscope 属性时，就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了 itemscope 和 itemtype 属性，你同时也就阐述了一个 {{htmlattrxref("id")}} 属性。你可以用 id 属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。

+ +

示例

+ +

下面示例中有4个 itemscope 属性。每一个 itemscope 设置了相应的 itemptype 属性。例子中itemtype，Recipe，AggregateRating，以及 NutritionInformation 通过指定了 itemptype，也就是“http://schema.org/Recipe”，也都是 schema.org 提供的一个食谱的结构化数据的一部分。

+ +
<div itemscope itemtype="http://schema.org/Recipe">
+<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
+<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+<span itemprop="name">Carol Smith</p></span>
+</span>
+<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
+November 5, 2009</p></time>
+<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
+ <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
+ <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
+Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
+ Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
+ Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
+ Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
+ <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
+ Serving size: <span itemprop="servingSize">1 medium slice<br></span>
+ Calories per serving: <span itemprop="calories">250 cal<br></span>
+ Fat per serving: <span itemprop="fatContent">12 g<br></span>
+</span>
+<p>Ingredients:<br>
+  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+ ... </p>
+
+Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

结果

+ +

HTML

+ +

下面例子是上述例子的补充：

+ +

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

+ +

结构化数据

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
+ +
+

提示: Google 提供了一个方便地从HTML提取微数据结构的工具： Structured Data Testing Tool。你可以通过上面的 HTML试一下。

+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
itemscope 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}}
+
+ +

参阅

+ + -- cgit v1.2.3-54-g00ecf