HTML5 之微数据

时间：2012年2月7日分类：前端开发标签：HTML5‚ 微数据评论：16

随着 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 标识了的元素内使用 itemprop 属性添加微数据，itemprop 的值为 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 发表，本文链接：https://kayosite.com/html5-microdata.html

评论列表

园长
2012-2-09 11:48 回复

代码盲路过。
以后普及了一定要学
- Kayo
  2012-2-09 16:39 回复
  
  @园长 HTML5 实在强大得很，有机会一定要学一学噢！
  - 园长
    2012-2-09 17:02 回复
    
    @Kayo 我现在php都搞不掂
    - Kayo
      2012-2-09 17:09 回复
      
      @园长急不来，花点时间练习一下就会搞掂的！
- kkStx
  2012-2-11 22:41 回复
  
  @园长代码盲路过+2…不过我很喜欢HTML5 的网站。
  - Kayo
    2012-2-13 0:24 回复
    
    @kkStx 嗯，抛开HTML5的功能不说，光是它的样式效果就已经很大气了！
调皮鬼
2012-2-09 17:45 回复

H5确实好用，不过这个时间啊，恐怕还真得有一阵
- Kayo
  2012-2-11 1:08 回复
  
  @调皮鬼估计在PC普及最快也得三、五年了，现在就当尝尝鲜！
  - 调皮鬼
    2012-2-11 21:17 回复
    
    @Kayo 路漫漫其修远兮，吾将上下而求索……
沫
2012-2-12 14:48 回复

希望能趕快普及
好東西要服務大眾才行
- Kayo
  2012-2-13 0:32 回复
  
  @沫再过三、五年，HTML5应该就能创造出不一样的互联网了！
jfbcb
2012-10-26 9:48 回复

真心学习了,赞一个.
wmtimes
2012-12-03 8:21 回复

先了解下。后面补到我文章里去。
- Kayo
  2012-12-05 23:43 回复
  
  @wmtimes 欢迎欢迎！
guohezu
2013-12-30 14:34 回复

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

这个不是itemscop吧？应该是itemprop？
- Kayo
  2013-12-31 1:51 回复
  
  @guohezu 是的，应该是 itemprop ，谢谢指正，已经修改原文。