微数据使用来自自定义词汇表的、带作用域的名/值对来给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>
参考资料: