HTML itemscope 全局属性

itemscope 是一个布尔型的全局属性，它定义了相关元数据的范围。为元素指定 itemscope 属性会创建一个新条目，该条目会生成与该元素相关联的许多名称-值对。

一个相关的属性，itemtype，用于指定描述该条目及其属性上下文的词汇表（例如 schema.org）的有效 URL。在以下每个示例中，词汇表均来自 schema.org。

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

注意：有关 itemtype 属性的更多信息，请访问 https://schema.org/Thing

itemscope id 属性

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

示例

表示电影的结构化数据

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

itemscope	Itemtype	Movie
	itemprop	(itemprop 名称)	(itemprop 值)
	itemprop	director	James Cameron
	itemprop	genre	Science Fiction
	itemprop	name	Avatar
	itemprop	Trailer	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>

以下示例中有四个 itemscope 属性。每个 itemscope 属性设置其相应 itemtype 属性的作用域。以下示例中的 itemtype，Recipe、AggregateRating 和 NutritionInformation 是食谱的 schema.org 结构化数据的一部分，由第一个 itemtype，http://schema.org/Recipe 指定。

itemscope	itemtype	示例
	itemprop	name	Grandma's Holiday Apple Pie
	itemprop	图片	https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
	itemprop	出版日期	2022-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	评分值	4.0
	itemprop	reviewCount	35
itemscope	itemprop[itemtype]	nutrition [NutritionInformation]
	itemprop	servingSize	1 medium slice
	itemprop	calories	250 cal
	itemprop	fatContent	12 g

注意：用于提取 HTML 中微数据结构的有用工具是 Google 的富媒体搜索结果测试工具。可以尝试用它来测试此处显示的 HTML。

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>