首页 > 代码库 > HTML5之 Microdata微数据
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支持元素
属性 元素
-------------------------------------------------
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=http://www.mamicode.com/DATE ‐
TIME:20101227T205755Z
DTSTART;VALUE=http://www.mamicode.com/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>
HTML5之 Microdata微数据