itemscope

itemscope 是一個布林型別的全域性屬性，它定義了相關元資料的範圍。為元素指定 itemscope 屬性會建立一個新專案，從而生成一些與該元素相關的名稱-值對。

一個相關的屬性，itemtype，用於指定詞彙表（例如 schema.org）的有效 URL，該詞彙表描述了專案及其屬性的上下文。在以下每個示例中，詞彙表都來自 schema.org。

每個 HTML 元素都可以指定 itemscope 屬性。沒有關聯 itemtype 的 itemscope 元素必須有一個關聯的 itemref。

注意： 在 https://schema.org/Thing 瞭解更多關於 itemtype 屬性的資訊。

itemscope id 屬性

當您為元素指定itemscope 屬性時，就會建立一個新專案。該專案由一組名稱-值對組成。對於具有itemscope 屬性和itemtype 屬性的元素，您也可以指定id 屬性。您可以使用id 屬性為新專案設定全域性識別符號。全域性識別符號使專案能夠與 Web 上其他頁面中找到的其他專案相關聯。

示例

表示電影的結構化資料

以下示例將itemtype 指定為"http://schema.org/Movie"，並指定了四個相關的itemprop 屬性。

itemscope	專案型別	電影
	itemprop	(itemprop 名稱)	(itemprop 值)
	itemprop	導演	詹姆斯·卡梅隆
	itemprop	型別	科幻
	itemprop	名稱	阿凡達
	itemprop	預告片	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	名稱	奶奶的假日蘋果派
	itemprop	圖片	https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
	itemprop	釋出日期	2022-11-05
	itemprop	描述	這是我奶奶的蘋果派食譜。我喜歡加一點肉豆蔻。
	itemprop	準備時間	PT30M
	itemprop	烹飪時間	PT1H
	itemprop	總時間	PT1H30M
	itemprop	食譜產量	1 個 9 英寸派（8 份）
	itemprop	食譜食材	薄片蘋果：6 杯
	itemprop	食譜食材	白糖：3/4 杯
	itemprop	食譜說明	1. 切割並去皮蘋果 2. 將糖和肉桂混合。對於酸蘋果，可以使用更多的糖。
	itemprop	作者 [Person]
	itemprop	名稱	卡羅爾·史密斯
itemscope	itemprop[itemtype]	aggregateRating [AggregateRating]
	itemprop	評分值	4.0
	itemprop	評價數量	35
itemscope	itemprop[itemtype]	營養 [NutritionInformation]
	itemprop	一份量	1 塊中等大小
	itemprop	卡路里	250 卡路里
	itemprop	脂肪含量	12 克

注意： 谷歌的豐富結果測試工具是一個用於從 HTML 中提取微資料結構的實用工具。請在顯示的 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>

結果

規範

規格
HTML 標準 # attr-itemscope

另請參見

其他不同的全域性屬性
其他與微資料相關的全域性屬性

itemscope id 屬性

示例

表示電影的結構化資料

表示食譜的結構化資料

HTML

結果

規範

另請參見