HTML5之 Microdata微資料

標籤：

- 為何需要微資料
長篇加累版牘,不好理解
微標記來標註其中內容,讓其容易識辨

- 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支援元素

屬性 元素
-------------------------------------------------
srcaudio,embed,iframe,img,source,video
hrefa,area,link
datetimetime
contentmeta
dataobject

--- 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‘);  

屬性 內容
------------------------------------------
itemScopeValue of itemscope attribute
itemTypeValue of itemtype attribute, if present
itemIdValue of itemid attribute, if present
itemRefValue of itemref attribute, if present

- 屬性方法一覽

屬性/方法內容
------------------------------------
length集合中元素對象
item(index)訪問元素內容
namedItem(name)使用itemprop中的name屬性來訪問對象
namedItem(name).values 訪問itemprop指定的name中的屬性的值
NamesDOMStringList所有itemprop的屬性值
names.lengthItemprop值得長度
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>

 

HTML5之 Microdata微資料