微数据 -HTML5规范中微数据MicroData浅析

iluoxuan

浏览: 582285 次
性别:
来自: 北京

最近访客更多访客>>

czl026

java_my_life

hejin_sl

yzzh9

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

http://www.mxria.com/html5/h20120214873.htm

HTML5规范中微数据MicroData浅析
作者：夜飞羽来源：mxria.com 时间：2012-02-14

最近学习了一下WHATWG网站中关于微数据的内容，microdata对于普通用户而言，可能不显得如何重要，但对于搜索引擎，它的应用将带来机器语言分析的极大便利。这将意味着，搜索引擎将能更智能、准确地识别网站内容，在语义层面上给出用户最期望看到的结果。对于网站制作者而言，提高搜索引擎对内容的识别程度，一方面是一种SEO手段，另外也可以改善用户体验。目前Google已经提供了相应的测试工具并在google搜索引擎中支持microdata的应用。下面看一段搜索结果的截图，图中颜色标出的部分是重点。比如在Google中输入黔香阁，或者你直接去看大众点评网的内容（http://www.dianping.com/shop/5139338）。

微数据在大众点评网中的应用

1.如何理解微数据的用途
我们可以理解所谓微数据，就是网页中特别定义的一个“名称name-属性值value”组合。这种组合我们称之为"项"(items)。在HTML中，有一个itemscope 属性是用来描述items项的。下面就是一段实际例子

<div itemscope>
 
 <p>网站名称 <span itemprop="name">美瑞网</span>.</p>
 
</div>
<div itemscope>
 
 <p>网站标题名称 <span itemprop="name">HTML5、CSS3等WEB开发技术分享网站</span>.</p>
 
</div>
 
假定没有使用微数据，上面的代码是这样的：
 
<div >
 
 <p>网站名称 <span >美瑞网</span>.</p>
 
</div>
<div >
 
 <p>网站标题名称 <span >HTML5、CSS3等WEB开发技术分享网站</span>.</p>
 
</div>

这对于浏览网页的人而言，是否使用microdata没有任何区别，用户看到的结果是一样的。但对于机器识别例如搜索引擎而言，使用了微数据的网页代码则提供了更加丰富的信息。搜索引擎通过相应的schema规范，就能理解Name所代表的确切含义，从而提取被标识的内容。简单的例子，加入将itemprop中的name换为address，那么搜索引擎就可以知道这里的内容描述的是地址，具备特定的含义。经过这么处理后，我们网站中的信息将被更加准确的采集和分类处理，从而为更加深入的数据分析和数据挖掘提供了最基本的指引。

2.微数据项Items的几种表现方式
原则上，HTML中的每个标签都可以定义成为相应的items，只需加上itemscope和itemprop属性即可。在实际应用时，考虑到机器语言和人类语言之间理解方式的差异性，应用时我们有多种选择。
如果是类似img图像标签，a链接标签，src和href的内容是value值的内容，在微数据中会自动获取内容值。
<div itemscope>
<img itemprop="image" src="googlelogo.png" alt="Google Logo">
</div>
如果希望用户看到的内容和搜索引擎关心的内容不一样，则可以采用value值得方式。例如用户看到度娘刘冬最红的消息，而实际希望传递给搜索引擎的信息是最火热事件排名索引id，我们就可以采用如下方式：
<h1 itemscope>
<data itemprop="hot-id" value="898ML001">度娘刘冬最红</data>
</h1>

如果希望在微数据中标记特殊时间，我们可以采用time标签。例如：最近非常喜爱的歌手惠特尼.休斯顿逝世，沉痛哀悼做个网站纪念。在她的生平介绍网站里标记生死日期
<div itemscope>
惠特尼.休斯顿：<time itemprop="birthday" datetime="1964-02-13">1964年二月十三日</time>--<time itemprop="deathday" datetime="2012-02-13">2012年二月十一日</time>.
</div>
如果希望在微数据中标记多个属性值得items，可以使用多个name-value组合，其中name属性一样。例如：喜欢的歌星名字

<div itemscope>
 
 <p>最喜欢的歌星:</p>
 
 <ul>
 
  <li itemprop="flavor">奶茶刘若英</li>
 
  <li itemprop="flavor">天王刘德华</li>
 
 </ul>
 
</div>

如果希望在微数据中描述层次结构的数据集，itemscope同样支持树状层次节点的数据类型。例如汽车类网站中可以采用下面的方式进行组织。我喜欢乘坐的交通工具是家用轿车雪佛兰，科鲁兹的1.8L
<div itemscope>
<p>Name: <span itemprop="name">雪佛兰</span></p>
<p>Band: <span itemprop="band" itemscope> <span itemprop="name">科鲁兹</span> (<span itemprop="size">1.8L</span> players)</span></p>
</div>

大家看到这里，这样的表现方式是不是感觉似曾相识？是的，跟xml的组织方式完全一致。XML经过了多年的发展，一致未能在网页中得到广泛的应用，但在文档应用格式上，xml是当仁不让的最佳选择。如今，微数据正是将xml曲线引入web规范中的一个变革，目前规范尚不成熟，我们拭目以待，相信不久的将来，这种变化将带给网页信息整理和数据分析领域的巨大创新。

3.DOM中如何应用微数据模型
支持微数据的DOM API中提供了getItems这个方法处理微数据。document.getItems(typeNames) 提供了访问网页中顶层微数据集合的功能，采用document.getItems就可以获得网页中一个items的集合，items项的类型可以使用element.itemType 获得。例如下面的代码展示了我们如何在DOM模型中处理items
var user = document.getItems('http://example.net/user')[0];
alert('Hello ' + user.properties['name'][0].itemValue + '!');

上面的一切看上去都非常完美，在普通的网页中也可以实现类似XML格式化的数据，操作这些数据也非常简单，微数据的发展值得期待！目前google已经支持微数据的应用，但baidu尚未有证据表明支持微数据。本文开头大众点评网的应用实例代码如下，大家可以学习学习。

<div class="shop-name">
<h1 class="shop-title" itemprop="name itemreviewed">贵州菜</h1><span><a class="subbranch J_pop-login" onclick="pageTracker._trackPageview('dp_shop_caozuo_tianjiafendian')" href="/addshop/1_10/id=5139338" title="添加分店">添加分店</a></span>
</div>
<div class="comment-rst">
<span title="该商户暂无星级" class="item-rank-rst irr-star0" itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<meta itemprop="rating" content="0">评分:该商户暂无星级</span>
<a onclick="pageTracker._trackPageview('dp_shop_dianpingshu');" class="count" href="#user-review-info">
<span itemprop="count">2</span>封点评</a>