itemscope(属性) | itemscope (attribute)
itemscope(属性)
itemscope
是定义关联元数据范围的Boolean全局属性。指定itemscope
元素的属性会创建一个新项目,这会生成一些与元素关联的名称 - 值对。相关属性,itemtype
用于指定描述项目及其属性上下文的词汇表(例如schema.org)的有效URL 。在以下每个示例中,词汇均来自schema.org。
每个HTML元素可能都有一个itemscope
指定的属性。itemscope
没有关联的元素itemtype
必须具有关联的元素itemref
。
注意:
在http://schema.org/Thing找到更多关于itemtype
属性的信息
简单的例子
HTML
以下示例指定itemscope
属性。示例指定itemtype
为“ http://schema.org/Movie ”,并指定三个相关的itemprop
属性。
<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>
结构化数据
下表显示了上例中的结构化数据。
itemscope | Itemtype | Movie |
---|---|---|
itemprop | (itemprop name) | (itemprop value) |
itemprop | director | James Cameron |
itemprop | genre | Science Fiction |
itemprop | name | Avatar |
itemprop | https://youtu.be/0AY1XIkX7bY | Trailer |
itemscope ID属性
当您为元素itemscope
指定属性时,会创建一个新项目。项目由一组名称 - 值对组成。对于具有itemscope
属性和itemtype
属性的元素,您还可以指定id
属性。您可以使用id
属性为新项目设置全局标识符。全局标识符允许项目与遍及Web页面上的其他项目相关联。
例
itemscope
在以下示例中有四个属性。每个itemscope
属性设置其相应itemptype
属性的范围。itemtype
S, ,Recipe
,AggregateRating
和NutritionInformation
在下面的例子是部分schema.org用于配方的结构化数据,由所述itemptype
首先指定,http://schema.org/Recipe
。
<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
以下是前面的代码示例的呈现。
结构化数据
itemscope | itemtype | Recipe |
---|---|---|
itemprop | name | Grandma's Holiday Apple Pie |
itemprop | image | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg |
itemprop | datePublished | 2009-11-05 |
itemprop | description | This is my grandmother's apple pie recipe. I like to add a dash of nutmeg. |
itemprop | prepTime | PT30M |
itemprop | cookTime | PT1H |
itemprop | totalTime | PT1H30M |
itemprop | recipeYield | 1 9" pie (8 servings) |
itemprop | recipeIngredient | Thinly-sliced apples: 6 cups |
itemprop | recipeIngredient | White sugar: 3/4 cup |
itemprop | recipeInstructions | Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples . |
itemprop | author Person | |
itemprop | name | Carol Smith |
itemscope | itempropitemtype | aggregateRating AggregateRating |
itemprop | ratingValue | 4.0 |
itemprop | reviewCount | 35 |
itemscope | itempropitemtype | nutrition NutritionInformation |
itemprop | servingSize | 1 medium slice |
itemprop | calories | 250 cal |
itemprop | fatContent | 12 g |
注意
:用于从HTML中提取微数据结构的便捷工具是Google的结构化数据测试工具。试试上面显示的HTML。
规格
Specification | Status | Comment |
---|---|---|
itemscope | | 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) |