Html HTML5 什么是 itemscope 属性以及它在外行方面的作用是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4158876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 what is the itemscope attribute and what does it do in laymans terms?
提问by delimit
I just wanted to know what is the HTML5 itemscope attribute used for basically?
我只是想知道 HTML5 itemscope 属性基本上用于什么?
回答by zzzzBov
The [itemscope]
attribute is a boolean attribute to define the scope of the metadata contained within the element.
该[itemscope]
属性是一个布尔属性,用于定义元素中包含的元数据的范围。
It's defined in the HTML5 MicrodataAPI:
它在HTML5 微数据API 中定义:
Every HTML element may have an
itemscope
attribute specified. Theitemscope
attribute is a boolean attribute.An element with the
itemscope
attribute specified creates a new item, a group of name-value pairs.
每个 HTML 元素都可以
itemscope
指定一个属性。该itemscope
属性是一个布尔属性。具有
itemscope
指定属性的元素会创建一个新item,即一组名称-值对。
In other words, it's a way of associating metadata with a particular DOM node.
换句话说,它是一种将元数据与特定 DOM 节点相关联的方式。
This is used by the Schema.orgAPI to associate data for search engines and social networks. Google+ uses schemaas the way to provide titles, thumbnails, and descriptions for pages shared by users.
这是通过使用Schema.orgAPI为搜索引擎和社交网络相关联的数据。Google+ 使用架构作为为用户共享的页面提供标题、缩略图和说明的方式。
It should also be noted that [itemscope]
and [itemprop]
are compatible with Facebook's Open Graph Protocolwhen providing meta data for a webpage. The same metadata can be listed for search engines, Facbook, and Google+ in a single set of <meta>
elements rather than having to list the same information more than once:
还应该注意的是[itemscope]
,[itemprop]
在为网页提供元数据时,它与 Facebook 的开放图谱协议兼容。可以在一组<meta>
元素中为搜索引擎、Facbook 和 Google+ 列出相同的元数据,而不必多次列出相同的信息:
<html itemscope itemtype="http://schema.org/WebPage" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>An Example Title</title>
<meta content="An Example Title" itemprop="name" property="og:title" />
<meta content="Lorem ipsum dolor sit amet" itemprop="description" name="description" property="og:description" />
<meta content="http://www.example.com/image.jpg" itemprop="image" property="og:image" />
<meta content="http://www.example.com/permalink" itemprop="url" property="og:url" />
<link rel="canonical" href="http://www.example.com/permalink" />
</head>
<body>
...content...
</body>
</html>
Note that in the example, [itemscope]
was added to the <html>
element. This means that any [itemprop]
attributes in the <head>
and <body>
are part of the WebPage
item.
请注意,在示例中,[itemscope]
被添加到<html>
元素中。这意味着,任何[itemprop]
在属性<head>
和<body>
是部分WebPage
项目。
回答by Bryan
Search engines including Bing, Google, and Yahoo! are now using itemscopeand friends to identify semantic data in webpages. On the website schema.org, they have an explanation of how to use itemscopewith predefined schemas to improve the data that is provided to search engines.
搜索引擎包括 Bing、Google 和 Yahoo! 现在正在使用itemscope和朋友来识别网页中的语义数据。在网站schema.org 上,他们解释了如何使用具有预定义架构的itemscope来改进提供给搜索引擎的数据。