百科狗-知识改变命运!
--

itemscope - 向元素中添加属性 - html5 全局属性

是丫丫呀1年前 (2023-11-21)阅读数 10#技术干货
文章标签属性

itemscope

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

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

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

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

示例

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

avatar

director: james cameron (born august 16, 1954) science fiction trailer

下表展示了上面例子当中的结构化数据。

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.baikegou.com/Recipe”,也都是;schema.org提供的一个食谱的结构化数据的一部分。

grandma's holiday apple pie

by carol smith

published: november 5, 2009

this is my grandmother's apple pie recipe. i like to add a dash of nutmeg.
4.0 stars based on 35 reviews
prep time: 30 min
cook time: 1 hour
total time: 1 hour 30 min
yield: 1 9" pie (8 servings)
serving size: 1 medium slice
calories per serving: 250 cal
fat per serving: 12 g

ingredients:
; thinly-sliced apples: 6 cups
white sugar: 3/4 cup
...

directions:
1. cut and peel apples
2. mix sugar and cinnamon. use additional sugar for tart apples.
...

结构化数据

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

itemscope - 向元素中添加属性 - html5 全局属性

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

浏览器支持

所有浏览器都支持itemscope属性

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)