itemscope

itemprop全局属性用来性质添加到项目中。每个 HTML 元素都可以itemprop指定一个属性，并且itemprop由一个名称- 值对组成。每个名称- 值对称为一个属性，一组一个或多个属性形成一个项目。属性值是一个字符串或一个 URL，并且可以与一个很宽范围的元素，包括相关联<audio>，<embed>，<iframe>，<img>，<link>，<object>，<source>，<track>，和<video>。

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

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

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

示例

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

<div itemscope itemtype ="https://www.lanmper.cn/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属性时，就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了itemscope和itemtype属性，你同时也就阐述了一个id属性。你可以用id属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。

示例

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

<div itemscope itemtype="https://www.lanmper.cn/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="https://www.lanmper.cn/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="https://www.lanmper.cn/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="https://www.lanmper.cn/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>

结构化数据

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	1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
	itemprop	author[Person]
	itemprop	name	Carol Smith
itemscope	itemprop[itemtype]	aggregateRating[AggregateRating]
	itemprop	ratingValue	4.0
	itemprop	reviewCount	35
itemscope	itemprop[itemtype]	nutrition[NutritionInformation]
	itemprop	servingSize	1 medium slice
	itemprop	calories	250 cal
	itemprop	fatContent	12 g

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

浏览器支持


所有浏览器都支持itemscope属性