微数据(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