itemscope(属性) | itemscope (attribute)

itemscope(属性)

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

<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>

结构化数据

下表显示了上例中的结构化数据。

itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgenreScience Fiction
itempropnameAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer

itemscope ID属性

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

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

<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

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

结构化数据

itemscopeitemtypeRecipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructionsCut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor Person
itempropnameCarol Smith
itemscopeitempropitemtypeaggregateRating AggregateRating
itempropratingValue4.0
itempropreviewCount35
itemscopeitempropitemtypenutrition NutritionInformation
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g

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

规格

SpecificationStatusComment
itemscopeWG Note - No longer being actively developed

浏览器兼容性

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

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes)(Yes)(Yes)(Yes)(Yes)

FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support(Yes)(Yes)(Yes)(Yes)(Yes)(Yes)