html5 Microdata

微数据使用来自自定义词汇表的、带作用域的名/值对来给DOM做标记。任何人都可以自定义一个微数据词汇表,然后就可以在在自己的网页中嵌入自定义的属性。微数据是给那些已经在页面上可见的数据施加额外的语义。 当HTML的词汇不够用时,使用微数据可以取得较好的效果。

微数据的属性有五个,其中

itemscope:用来声明微数据词汇表的作用域。

itemtype:用来声明所使用的微数据词汇表。

itemprop:用来声明微数据词汇表的元素。

 

定义微数据词汇表,需要一个命名空间URL,其实就是一个网址。这个命名空间最终体现在itemtype上。然后再为这个词汇表定义一些命名属性。例如,定义一个Person词汇表,使用http://data-vocabulary.org/Person作为命名空间:

  name  姓名

  photo  头像链接

  url    主页链接

添加微数据到网页。

<section itemscope itemtype="http://data-vocabulary.org/Person">

<h1 itemprop="name">Andy</h1>

<p><img itemprop="photo" src="http://www.example.com/photo.jpg"></p>

<a itemprop="url" href="http://www.example.com/blog">My Blog</a>

</section>

浏览器使用可以从网页上提取微数据项目、属性以及属性值。检测浏览器是否支持html5 微数据API:

function supports_microdata_api() {

  return !!document.getItems;

}

搜索引擎可以集成并显示一些结构化信息,而不仅仅显示页面标题和摘要文字。而微数据所表示的正是一种结构化信息。也就是说,存在于网页中的微数据信息会被Google搜索引擎解析属性数据并连同页面其他数据一并存储。可以在线测试结构化信息:

http://www.google.com.hk/webmasters/tools/richsnippets

代码:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//判断浏览器是否支持 Microdata API
function supports_microdata_api() {
  return !!document.getItems;
}

window.onload=function(){
    if(supports_microdata_api){
        //访问Microdata DOM API
        var user = document.getItems('http://data-vocabulary.org/Person')[0];
        alert('Hi,I am ' + user.properties['name'][0].itemValue + '!');
    }
}
</script>
</head>
<body>
<section itemscope itemtype="http://data-vocabulary.org/Person">
    <h1 itemprop="name">nanpingwanzhong</h1>
    <p><img itemprop="photo" src="http://pic.cnitblog.com/avatar/a386062.bmp?id=14155921"></p>
    <a itemprop="url" href="http://www.cnblogs.com/nanpingwanzhong/">My Blog</a>
</section>
</body>
</html>

 

参考资料:

http://www.tutorialspoint.com/html5/html5_microdata.htm

http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#using-the-microdata-dom-api

http://www.ibm.com/developerworks/cn/xml/x-html5microdata1/

posted @ 2013-03-10 14:58  南屏晚钟  阅读(582)  评论(0编辑  收藏  举报