目录

HTML5 - 微数据( Microdata)

微数据是一种在网页中提供其他语义的标准方法。

Microdata允许您定义自己的自定义元素,并开始在您的网页中嵌入自定义属性。 在高级别,微数据由一组名称 - 值对组成。

这些组称为items ,每个名称 - 值对都是一个property 。 项目和属性由常规元素表示。

例子 (Example)

  • 要创建项目,请使用itemscope属性。

  • 要向项添加属性, itemprop属性将用于其中一个项的后代。

这里有两个项目,每个项目都有“名称” -

<html>
   <body>
      <div itemscope>
         <p>My name is <span itemprop = "name">Zara</span>.</p>
      </div>
      <div itemscope>
         <p>My name is <span itemprop = "name">Nuha</span>.</p>
      </div>
   </body>
</html>

它会产生以下结果 -

新页面打开

属性通常具有字符串值,但它可以具有以下数据类型 -

全局属性 (Global Attributes)

Microdata引入了五个全局属性,可供任何元素使用,并为机器提供有关数据的上下文。

Sr.No. 属性和描述
1

itemscope

这用于创建项目。 itemscope属性是一个布尔属性,告诉该页面上有微数据,这就是它的起始位置。

2

itemtype

此属性是一个有效的URL,用于定义项目并提供属性的上下文。

3

itemid

此属性是项的全局标识符。

4

itemprop

此属性定义项的属性。

5

itemref

此属性提供要爬网的其他元素列表,以查找项目的名称 - 值对。

属性数据类型

属性通常具有上述示例中提到的字符串值,但它们也可以具有URL值。 以下示例有一个属性“image”,其值为URL -

<div itemscope>
   <img itemprop = "image" src = "tp-logo.gif" alt = "IoWiki">
</div>

属性还可以包含日期,时间或日期和时间的值。 这是使用time元素及其datetime属性实现的。

<html>
   <body>
      <div itemscope>
         My birthday is:
         <time itemprop = "birthday" datetime = "1971-05-08">
            Aug 5th 1971
         </time>
      </div>
   </body>
</html>

它会产生以下结果 -

新页面打开

通过将itemscope属性放在声明属性的元素上,属性本身也可以是名称 - 值对的组。

微数据API支持

如果浏览器支持HTML5微数据API,则全局文档对象上将有一个getItems()函数。 如果浏览器不支持微数据,则getItems()函数将是未定义的。

function supports_microdata_api() {
   return !!document.getItems;
}

Modernizr尚不支持检查微数据API,因此您需要使用上面列出的功能。

HTML5微数据标准包括HTML标记(主要用于搜索引擎)和一组DOM功能(主要用于浏览器)。

您可以在网页中包含微数据标记,而不理解微数据属性的搜索引擎会忽略它们。 但是,如果您需要通过DOM访问或操作微数据,则需要检查浏览器是否支持微数据DOM API。

定义微数据词汇

要定义微数据词汇表,您需要一个指向工作网页的命名空间URL。 例如,https://data-vocabulary.org/Person可以用作具有以下命名属性的个人微数据词汇表的命名空间 -

  • name - 作为简单字符串的人名

  • Photo - 人物Photo的URL。

  • URL - 属于此人的网站。

使用关于属性的人微观数据可以如下 -

<html>
   <body>
      <div itemscope>
         <section itemscope itemtype = "http://data-vocabulary.org/Person">
            <h1 itemprop = "name">Gopal K Varma</h1>
            <p>
               <img itemprop = "photo" 
                  src = "http://www.iowiki.com/green/images/logo.png">
            </p>
            <a itemprop = "url" href = "#">Site</a>
         </section>
      </div>
   </body>
</html>

它会产生以下结果 -

新页面打开

Google支持微数据作为其Rich Snippets计划的一部分。 当Google的网络抓取工具解析您的网页并找到符合http://datavocabulary.org/Person词汇表的微数据属性时,它会解析这些属性并将其与其余页面数据一起存储。

您可以使用http://www.iowiki.com/html5/microdata.htm使用Rich Snippets Testing Tool测试上面的示例。

有关Microdata的进一步开发,您可以随时参考HTML5微数据

↑回到顶部↑
WIKI教程 @2018