©
本文档使用
php.cn手册 发布
itemscope
是定义关联元数据范围的Boolean全局属性。指定itemscope
元素的属性会创建一个新项目,这会生成一些与元素关联的名称 - 值对。相关属性,itemtype
用于指定描述项目及其属性上下文的词汇表(例如schema.org)的有效URL 。在以下每个示例中,词汇均来自schema.org。
每个HTML元素可能都有一个itemscope
指定的属性。itemscope
没有关联的元素itemtype
必须具有关联的元素itemref
。
注意:在http://schema.org/Thing找到更多关于itemtype
属性的信息
以下示例指定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>
下表显示了上例中的结构化数据。
itemscope | Itemtype | Movie |
---|---|---|
itemprop | (itemprop name) | (itemprop value) |
itemprop | director | James Cameron |
itemprop | genre | Science Fiction |
itemprop | name | Avatar |
itemprop | https://youtu.be/0AY1XIkX7bY | Trailer |
itemscope
ID属性当您为元素itemscope
指定属性时,会创建一个新项目。项目由一组名称 - 值对组成。对于具有itemscope
属性和itemtype
属性的元素,您还可以指定id
属性。您可以使用id
属性为新项目设置全局标识符。全局标识符允许项目与遍及Web页面上的其他项目相关联。
itemscope
在以下示例中有四个属性。每个itemscope
属性设置其相应itemptype
属性的范围。itemtype
S, ,Recipe
,AggregateRating
和NutritionInformation
在下面的例子是部分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>
以下是前面的代码示例的呈现。
itemscope | itemtype | Recipe |
---|---|---|
itemprop | name | Grandma's Holiday Apple Pie |
itemprop | image | https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg |
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 |
|
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) |