HTML 中文开发手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Verzeichnis suchen
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp

©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben

Figuren

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>

结构化数据

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

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属性的范围。itemtypeS， ，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>

结果

HTML

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

结构化数据

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

  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)

Vorheriger Artikel： Nächster Artikel：