HTML5之 Microdata微数据

浏览数：136 / 时间：2015年06月09日

- 为何需要微数据
长篇加累版牍,不好理解
微标记来标注其中内容,让其容易识辨

- RDFa
Resource Description Framework
http://www.w3.org/TR/microdata
http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata
http://www.w3.org/TR/rdfa-in-html

--- itemscope 标记

 <articleitemscope>
    <span itemprop=musician>张学友</span> steps ontothe stage ...
    <span itemprop=musician>刘德华</span> onthe drums ...
    <span itemprop=musician>阿宝</span> onthe bass...
    <span itemprop=musician>周杰伦</span>onthe piano ...
 </article>

这样就将段落中的内容突出出来

--- 搜索引擎如何解析

http://foolip.org/microdatajs/live/ 在线解析

服务器：

{
    "items":[{
    "properties":{
    "musician":["Pat Metheny",
    "Antonio Sanchez",
    "Steve Rodby",
    "Lyle Mays"
  }
  }}]}

所有的prop都被解析

--- Itemprop支持元素

属性元素
-------------------------------------------------
src audio,embed,iframe,img,source,video
href a,area,link
datetime time
content meta
data object

--- Itemtype 标记

指定数据格式

<article itemscope itemtype=http://microformats.org/profile/hcalendar#vevent>
  <time itemprop=dtstart datetime="2010-10-09T20:30:00-04:00">
    Saturday, October 9th 2010, just before half past eight  in the evening
  </time>
  <span itemprop=location>Community  Theater</span>  in
  <span itemprop=location>Morristown,  NJ</span>...
  <span itemprop=summary>O rchestrion</span> ...
 </article>

--- 解析

指定使用日历格式解析数据

BEGIN:VCALENDAR
PRODID:jQuery Microdata
VERSION:2.0
BEGIN:VEVENT
DTSTAMP;VALUE=DATE ‐
TIME:20101227T205755Z
DTSTART;VALUE=DATE ‐
TIME:20101009T2030000400
LOCATION:Community Theater
LOCATION:Morristown\, NJ
SUMMARY:Orchestrion
END:VEVENT
END:VCALENDAR

--- 嵌套使用

<article itemscope itemtype=http://microformats.org/wiki/hreview>
  <div itemprop=item itemscope  itemtype=http://microformats.org/profile/hcalendar#vevent>
    <span itemprop=summary>O rchestrion</span>,
    <time itemprop=dtstart datetime="2010-10-09T20:30:00-04:00">October 9th 2010
    </time>:
  </div>
  <span itemprop="summary">A  fascinating evening</span>
    rated  with <span  itemprop="rating">5</span> stars out of 5 stars.
  <div itemprop=reviewer itemscope itemtype=http://microformats.org/profile/hcard>
   <span  itemprop=fn>Nicos Thassofilakas</span>,
   <a href=http://openweb.cc itemprop=url>openWeb.cc</a>
  </div>
</article>

--- ItemId 属性

用于指定唯一序号

<div itemscope itemtype=http://vocab.example.net/book 
 itemid="urn:isbn:978 ‐0634066634">
  <span  itemprop=album>One  Quiet  Night</span>  by
  <span  itemprop=artist>Pat Metheny</span>
  (<time itemprop=pubdate datetime=2005‐04‐01>2005</time>,
  <span  itemprop=pages>88</span> pages)
</div>

--- Itemref 属性

通过使用html标记或者itemid来引用另一个microdata

<article>
    <div id=location>
    <span itemprop=member>Pat Metheny</span>
    </div>
    <div id=intro>
    <span  itemprop=member>Antonio  Sanchez</span>
    <span  itemprop=member>Steve Rodby</span>
    <span  itemprop=member>Lyle  Mays</span>
    <span  itemprop=band>Pat Metheny Group</span>
    </div>
  </article>
  <div itemscope itemref ="location intro"></div>

--- 解析可用字典

http://micoformats.org

- Microdata DOM API

JS完全支持

  var allNodes = document.getItems();
  var vCards = document.getItems(‘http://microfomats.org/profile/hcard‘);

属性内容
------------------------------------------
itemScope Value of itemscope attribute
itemType Value of itemtype attribute, if present
itemId Value of itemid attribute, if present
itemRef Value of itemref attribute, if present

- 属性方法一览

属性/方法内容
------------------------------------
length 集合中元素对象
item(index) 访问元素内容
namedItem(name) 使用itemprop中的name属性来访问对象
namedItem(name).values 访问itemprop指定的name中的属性的值
Names DOMStringList所有itemprop的属性值
names.length Itemprop值得长度
names.item(index) 使用itemprop属性值的对象值
names.contains(name) 判断是否包含itemprop属性

--- 小实例

 <section itemscope itemtype="http://www.data-vocabulary.org/Person/">
    <h1 itemprop="name">张三</h1>
    <p><img src="1.jpg" alt="张三照片" itemprop="photo"></p>
    <p><a href="www.zhangsan.org" itemprop="url">张三哥</a></p>
        <dd itemprop="address" itemscope  itemtype="http://www.data-vocabulary.org/Person/">
    <span itmeprop="region">东城区</span>
    </dd>
  </section>