随着 HTML5 规范的发展,一些 HTML5 的特性已经逐渐被现代浏览器支持,Kayo 最近也给网站加入一些 HTML5 的特性,比如这次要介绍的微数据。

 

一.什么是微数据?

首先通俗地介绍一下,微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其意义,一些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其意义。

 

在这里再科普一下,给出谷歌关于微数据的解释:

HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性。

 

微数据使用 HTML 标记(常为 span 或 div)中的简单属性为项和属性指定简要的描述性名称。

 

二.例子

下面给出一个简单的例子,把 HTML5 微数据应用在网站的评论部分:

 

首先写出一段简单的 HTML ,该段 HTML 显示了一条评论

<div>
	<span>Kayo</span>
	<span>2012年2月6日 22:30</span>
	<span>评论内容</span>
</div>

 

以下是用微数据标记的同一段 HTML 内容

<div itemscope itemtype="http://data-vocabulary.org/Review">
	<span itemprop="reviewer">Kayo</span>
	<span itemprop="dtreviewed" datatime="2012-02-06T22:30:30.50+08:00">2012年2月6日 22:30</span>
	<span itemprop="description">评论内容</span>
</div>

 

说明:itemscop 表示该 div 中描述了某一项微数据,itemtype="http://data-vocabulary.org/Review" 表示该微数据项类型是一条评论;具体的数据项都用 itemprop 属性标识,如 "reviewer" 表示评论者, "dtreviewed" 表示评论时间,其中 datatime 属性标识了该评论的具体评论时间,属性值必须使用 ISO 日期格式描述一个日期,另外为了使用户易于理解,网页上可以用常见的时间格式标识时间。

 

三.微数据的语法

在一项微数据的最外层 div ,需要用 itemscop 标识,并用 itemtype 指定微数据类型, itemtype 的值是一个 url ,用于引入一个微数据词汇表(即各种微数据的类型定义),可以使用 http://schema.org 或是 http://data-vocabulary.org ,具体的微数据类型可以参考上面两套微数据词汇表。

 

在用 itemscop 标识了的元素内使用 itemscope 属性添加微数据,itemscope 的值为 HTML 标签包含的内容(如例子中的 reviewer 和 description ),又或是标签的属性值(如例子中的 dtreviewed,取 datatime 的值为属性值)。

 

还有以下元素,也是以属性值作为 itemscop 的值

<a href="">
<area href="">
<audio src="">
<embed src="">
<iframe src="">
<img src="">
<link href="">
<object data="">
<source src="">
<video src="">

 

四.微数据的作用

看了上面的内容,貌似微数据挺复杂的,那究竟有什么用呢?答案很简单——让机器识别网页内容,这样最直接的效果是网站的架构会变得容易理解,不同人类语言的页面都有一个共同的、易于识别的微数据描述,这样可以看作一种豪华的 seo ,或是制作一些通讯录,记事本等信息性很强的 Web App。

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/html5-microdata.html

  哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站,并且能够搭建符合百度排名规范的网站基底,使您的网站无需额外费用,即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设