itemscope（属性） | itemscope (attribute)

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 ID属性

当您为元素itemscope指定属性时，会创建一个新项目。项目由一组名称 - 值对组成。对于具有itemscope属性和itemtype属性的元素，您还可以指定id属性。您可以使用id属性为新项目设置全局标识符。全局标识符允许项目与遍及Web页面上的其他项目相关联。

例

itemscope在以下示例中有四个属性。每个itemscope属性设置其相应itemptype属性的范围。itemtypeS， ，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

以下是前面的代码示例的呈现。

结构化数据

注意：用于从HTML中提取微数据结构的便捷工具是Google的结构化数据测试工具。试试上面显示的HTML。

规格

浏览器兼容性

下表详细介绍了功能与常用浏览器的兼容性。