• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • itemscope

    itemprop全局属性用来性质添加到项目中。每个 HTML 元素都可以itemprop指定一个属性,并且itemprop由一个名称- 值对组成。每个名称- 值对称为一个属性,一组一个或多个属性形成一个项目。属性值是一个字符串或一个 URL,并且可以与一个很宽范围的元素,包括相关联<audio><embed><iframe><img><link><object><source><track>,和<video>

    itemscope是一个布尔值的;全局属性;。它定义了一个与元数据关联的数据项。就是说一个元素的itemscope属性会创建一个项,包含了一组与元素相关的键值对。;相关的属性itemtype通常表示表中一个有效的 URL (比如;schema.org);来表述项目和上下文。下面每个例子中的概念表都来自;schema.org.

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

    译者注:;Schema.org 提供了一份共享的词汇表,站长可以使用它来标记网页,而这些标记则被主要的搜索引擎: Google, Microsoft, Yandex 和 Yahoo!所支持。

    示例

    下面一个例子指定的itemscope属性,设置了itemtype为;"https://www.lanmper.cn/Movie",并且有3个关联的itemprop属性(name、director、genre)。

    <div itemscope itemtype ="https://www.lanmper.cn/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属性时,就创建了一个新的数据项。数据项包含了一组键值对。如果一个元素包含了itemscopeitemtype属性,你同时也就阐述了一个id属性。你可以用id属性为数据项设置一个全局的身份识别。这样你就可以通过这个识别与页面中其他的数据进行交互。

    示例

    下面示例中有4个itemscope属性。每一个itemscope设置了相应的itemptype属性。例子中itemtypeRecipeAggregateRating,以及NutritionInformation通过指定了itemptype,也就是“https://www.lanmper.cn/Recipe”,也都是;schema.org提供的一个食谱的结构化数据的一部分。

    <div itemscope itemtype="https://www.lanmper.cn/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://www.lanmper.cn/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="https://www.lanmper.cn/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="https://www.lanmper.cn/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> 
    

    结构化数据

    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
    itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
    itempropauthor[Person]
    itempropnameCarol Smith
    itemscopeitemprop[itemtype]aggregateRating[AggregateRating]
    itempropratingValue4.0
    itempropreviewCount35
    itemscopeitemprop[itemtype]nutrition[NutritionInformation]
    itempropservingSize1 medium slice
    itempropcalories250 cal
    itempropfatContent12 g

    提示: Google 提供了一个方便地从HTML提取微数据结构的工具:;Structured Data Testing Tool。你可以通过上面的 HTML试一下。

    浏览器支持

    所有浏览器都支持itemscope属性

    上篇:itemid

    下篇:itemtype