itemscope

itemscope 是一个布尔值全局属性，定义关联元数据的范围。为元素指定 itemscope 属性会创建一个新项目，从而产生许多与该元素关联的名称/值对。

¥**itemscope** is a boolean global attribute that defines the scope of associated metadata. Specifying the itemscope attribute for an element creates a new item, which results in a number of name-value pairs that are associated with the element.

相关属性 itemtype 用于指定描述项目及其属性上下文的词汇表（例如 schema.org）的有效 URL。在下面的每个例子中，词汇都来自 schema.org。

¥A related attribute, itemtype, is used to specify the valid URL of a vocabulary (such as schema.org) that describes the item and its properties context. In each of the following examples, the vocabulary is from schema.org.

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

¥Every HTML element may have an itemscope attribute specified. An itemscope element that does not have an associated itemtype must have an associated itemref.

注意：在 https://schema.org/Thing 中查找有关 itemtype 属性的更多信息

¥Note: Find more about itemtype attributes at https://schema.org/Thing

itemscope id 属性

¥itemscope id attributes

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

¥When you specify the itemscope attribute for an element, a new item is created. The item consists of a group of name-value pairs. For elements with an itemscope attribute and an itemtype attribute, you may also specify an id attribute. You can use the id attribute to set a global identifier for the new item. A global identifier allows the item to relate to other items found on pages across the Web.

示例

¥Examples

表示电影的结构化数据

¥Representing structured data for a movie

以下示例将 itemtype 指定为“http://schema.org/Movie”，并指定四个相关的 itemprop 属性。

¥The following example specifies the itemtype as "http://schema.org/Movie", and specifies four related itemprop attributes.

itemscope	物品种类	电影
	itemprop	（项目名称）	（项目值）
	itemprop	director	詹姆斯·卡梅伦
	itemprop	genre	科幻小说
	itemprop	name	阿凡达
	itemprop	预告片	[https://youtu.be/0AY1XIkX7bY](https://youtu.be/0AY1XIkX7bY)

html

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

表示配方的结构化数据

¥Representing structured data for a recipe

以下示例中有四个 itemscope 属性。每个 itemscope 属性设置其对应的 itemtype 属性的范围。以下示例中的 itemtype、Recipe、AggregateRating 和 NutritionInformation 是配方的 schema.org 结构化数据的一部分，如第一个 itemtype、http://schema.org/Recipe 所指定。

¥There are four itemscope attributes in the following example. Each itemscope attribute sets the scope of its corresponding itemtype attribute. The itemtypes, Recipe, AggregateRating, and NutritionInformation in the following example are part of the schema.org structured data for a recipe, as specified by the first itemtype, http://schema.org/Recipe.

itemscope	itemtype	秘诀
	itemprop	name	奶奶的节日苹果派
	itemprop	image	[https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg](https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg)
	itemprop	datePublished	2022-11-05
	itemprop	description	这是我祖母的苹果派秘诀。我喜欢加一点肉豆蔻。
	itemprop	prepTime	PT30M
	itemprop	cookTime	PT1H
	itemprop	totalTime	PT1H30M
	itemprop	recipeYield	1 个 9 英寸馅饼（8 份）
	itemprop	recipeIngredient	苹果切成薄片：6 杯
	itemprop	recipeIngredient	白砂糖：3/4 杯
	itemprop	recipeInstructions	1. 苹果切块、去皮 2.混合糖和肉桂。做酸苹果时要额外加糖。
	itemprop	作者[人]
	itemprop	name	卡罗尔·史密斯
itemscope	项目属性[项目类型]	聚合评级 [聚合评级]
	itemprop	ratingValue	4.0
	itemprop	reviewCount	35
itemscope	项目属性[项目类型]	营养[营养信息]
	itemprop	servingSize	1 片中等大小
	itemprop	calories	250 卡路里
	itemprop	fatContent	12 克

注意：Google 的丰富的结果测试工具是一个从 HTML 中提取微数据结构的便捷工具。在此处显示的 HTML 上尝试一下。

¥Note: A handy tool for extracting microdata structures from HTML is Google's Rich Results Testing Tool. Try it on the HTML shown here.

HTML

html

<div itemscope itemtype="https://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="https://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2022-11-05" itemprop="datePublished">
      November 5, 20022
    </time>
  </p>
  <span itemprop="description">
    This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
  </span>
  <br />
  <span
    itemprop="aggregateRating"
    itemscope
    itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  <br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  <br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  <br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <br />
  <span
    itemprop="nutrition"
    itemscope
    itemtype="https://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </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>

结果

¥Result

规范

Specification
HTML Standard # attr-itemscope

¥Specifications

也可以看看

¥See also

其他不同的全局属性
其他与微数据相关的全局属性：