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=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>
时间: 2024-11-05 13:39:07

HTML5之 Microdata微数据的相关文章

HTML5扩展之微数据与丰富网页摘要itemscope, itemtype, itemprop

HTML5扩展之微数据与丰富网页摘要 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2058 一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO).

HTML5扩展之微数据与丰富网页摘要

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人

HTML5扩展之微数据与丰富网页摘要——张鑫旭

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人

HTML5微数据

本篇文章是一个纯搬运贴,原博主是在是做的太详细了 原贴地址:http://www.zhangxinxu.com/wordpress/2011/12/html5扩展-微数据-丰富网页摘要/ 一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据

HTML5微数据学习笔记

一.微数据的定义 微数据使用来自自定义词汇表的.带作用域的名/值对来给DOM做标记. 自定义词汇表:我们可以将“HTML5中所有元素的集合”看做一个词汇表,这个词汇表包括了可以代表章节或者文章的元素,但是不包括可以代表一个人或者活动的元素,如果要想表示一个“人”,那么就需要定义自己的词汇表,使用微数据就可以定义这样的词汇表. 作用域:微数据的作用域可以参照DOM中的元素之间的自然父子关系,微数据重用了DOM本身的层级结构,提供了一种方式来表达“所有该元素的属性都来自这个词汇表”. 名/值对:每一

HTML5中微数据概述及在搜索引擎中的使用举例

做网站优化已经快一个月了,对于seo的一般技术也有了一些了解,前些天开始使用谷歌的网站站长工具,在里面发现很多百度站长工具里面不曾有的内容,其中"结构化数据"这一项是出现在 "优化"栏里面,可想而知,这个结构化数据会不会是争对谷歌搜索的一个优化的方法呢?添加自己的站 进入这个页面,发现它提示我的网站上未检测到任何结构化数据,但是这么一个缺少概念的词让我们这种网站优化新手怎么理解呢?鞍山治疗白癜风医院www.0412pfk.org 进入谷歌的"帮助"

HTML5 1.10 微格式

1.微格式 a.html5中的微格式.是一种利用html5中的新标签对网页添加附加信息的方法附加信息例如欣慰时间的发生日期和时间,文章发表的日期等 b.是为了简化浏览器对数据的提取,方便搜索引擎的搜索 2.time元素 a.pubbdate属性,加上他搜索引擎/浏览器可以很方便的识别出那个日期是文章.新闻的发表日期 b.<time datetime="2016-3-15" pubbdate="pubbdate">2016年3月15日</time&g

HTML5线性图表 图表数据区域可着色

这是一款基于Canvas的HTML5图表应用,在图表数据初始化的时候伴随动画效果. 在线演示: 点击演示 源代码下载: 点击下载 核心jQuery代码: var myData = { labels : ["Mo","Di","Mi","Do","Fr","Sa","So"], datasets : [ { fillColor : "rgba(220,220,

HTML5深入学习之数据存储

概述 本来,数据存储都是由 cookie 完成的,但是 cookie 不适合大量数据的存储,cookie 速度慢且效率低. 现在,HMLT5提供了两种在客户端存储数据的办法: localStorage(没有时间限制的数据存储,即当我们设置了之后浏览器关闭后再去访问它依然存在) sessionStorage(针对一个session的数据存储,当我们设置了之后浏览器关闭后再去访问他就消失了) 两者之间的实测对比 localStorage 首先我们先运行这段代码: localStorage.setIt