首页 前端知识 无涯教程-HTML5 - Microdata微数据

无涯教程-HTML5 - Microdata微数据

2024-05-05 22:05:40 前端知识 前端哥 953 538 我要收藏

微数据(Microdata)是在网页中提供其他语义的一种标准化方法,通过微数据,您可以定义自己的自定义元素,并开始在网页中嵌入自定义属性。

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

Microdata示例

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

  • 要向某项添加属性,请在该项的后代之一上使用 itemprop 属性。

这里有两个项目,每个项目都有属性"name"-

<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>

它将产生以下输出-

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

全局属性

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

Sr.No.Attribute & Remark
1

itemscope

这用于创建项目

2

itemtype

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

3

itemid

此属性是全局标识符。

4

itemprop

此属性定义项目的属性。

5

itemref

此属性提供了要查找项目的名称/值对的其他元素的列表。

属性数据类型

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

<div itemscope>
   <img itemprop="image" src="tp-logo.gif" alt="LearnFk">
</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属性放在声明属性的元素上,属性本身也可以是名称/值对的组。

MicrodataAPI支持

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

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

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

HTML5微数据标准既包含HTML标签(主要用于搜索引擎),又包含一组DOM函数(主要用于浏览器)。

定义Microdata词汇

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

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

  • 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.learnfk.com/green/images/logo.png">
            </p>
            
            <a itemprop="url" href="#">Site</a>
         </section>
      </div>
      
   </body>
</html>

HTML5 - Microdata微数据 - 无涯教程网无涯教程网提供微数据(Microdata)是在网页中提供其他语义的一种标准化方法,通过微数据,您可以定义...https://www.learnfk.com/html5/html5-microdata.html

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7022.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!