首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

代码语言:javascript
复制
<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

Itemtype

Movie

itemprop

(itemprop name)

(itemprop value)

itemprop

director

James Cameron

itemprop

genre

Science Fiction

itemprop

name

Avatar

itemprop

Trailer

itemscope ID属性

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

itemscope在以下示例中有四个属性。每个itemscope属性设置其相应itemptype属性的范围。itemtypeS, ,RecipeAggregateRatingNutritionInformation在下面的例子是部分schema.org用于配方的结构化数据,由所述itemptype首先指定,http://schema.org/Recipe

代码语言:javascript
复制
<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

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

结构化数据

itemscope

itemtype

Recipe

itemprop

name

Grandma's Holiday Apple Pie

itemprop

image

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

itempropitemtype

aggregateRating AggregateRating

itemprop

ratingValue

4.0

itemprop

reviewCount

35

itemscope

itempropitemtype

nutrition NutritionInformation

itemprop

servingSize

1 medium slice

itemprop

calories

250 cal

itemprop

fatContent

12 g

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

规格

Specification

Status

Comment

itemscope

WG Note - No longer being actively developed

浏览器兼容性

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

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

Feature

Android

Chrome for Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

(Yes)

扫码关注腾讯云开发者

领取腾讯云代金券