HTML5 微数据

一、什么是微数据

一个页面的内容，不仅要给用户看，还要让机器可识别。而目前机器智能程度有限，要让其知会特定内容含义，我们需要使用规定的标签、属性名以及特定用法等。如使用 <h1> 标签包裹页面标题信息就是为了让机器识别（搜索引擎 SEO）

微数据本质是给网页中可见的数据提供附加语义的标准化方式。允许我们在网页元素中嵌入自定义属性。是为了方便机器识别而产生的东西。适合于精细地优化那些已经在 DOM 中的数据的语义性。

如在 span、div 标签内添加属性，让机器识别其特定类型的信息，例如评论、人物信息或事件都有相应的属性，用来描述其意义。

HTML5 微数据规范是一种标记内容以描述特定类型的信息，每种信息都有描述特定类型的项。

二、微数据中的概念

微数据使用来自自定义的词汇表的、带作用域的名/值对来给 DOM 做标记

2.1 作用域

微数据重用了 DOM 本身的层级结构，提供了一种方式来表达“所有该元素的属性都来自这个词汇表”。允许在同一个页面使用多个微数据词汇表，甚至可以将词汇表嵌套，完全和 DOM 结构用法一样。

作用域，就是指定元素为微数据的项目，各个项可以嵌套，类似于 DOM 结构，是一个命名空间

2.2 词汇表

指向一个网址 URL，并不一定实际存在（实际存在最好），定义微数据使用的词汇的命名空间。

微数据词汇表有三：schema.org 词汇表，Google丰富摘要词汇表，WHATWG / microformats.org词汇表。

词汇表，就是指定微数据项目的类型，声明作用域的名称。

2.3 数据模型

微数据的数据模型是名/值对，一个微数据的属性名总是声明在一个 HTML 元素上，相对应的属性值则从 DOM 中取得。

在项里的元素添加属性名，就会成为所在的项目里的属性，属性值是文本或者其他数据。

三、微数据的语法

通过对下面例子的改造讲解：

<section>
  <h1>destiny</h1>
  <p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
  <p><a href="http://destinytaoer.cn">blog</a></p>
</section>

3.1 itemscope 项目的作用域

声明元素为一个项目，包含至少一个属性。

<section itemscope>
  <h1>destiny</h1>
  <p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
  <p><a href="http://destinytaoer.cn">blog</a></p>
</section>

3.2 itemtype 项目的类型

微数据定义的类型。其值为 URL，用于引入一个微数据词汇表可以使用 http://schema.org 或是 http://data-vocabulary.org 域名

<section itemscope itemtype="http://data-vocabulary.org/Person">
  <h1>destiny</h1>
  <p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
  <p><a href="http://destinytaoer.cn">blog</a></p>
</section>

3.3 itemprop 项目的属性

添加一个数据项目属性。任何微数据属性都可以重复，只要各自的值位于不同的 HTML 元素中。

<section itemscope itemtype="http://data-vocabulary.org/Person">
  <h1 itemprop="name">destiny</h1>
  <p>![](http://upload-images.jianshu.io/upload_images/7295449-c6767031a780189f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
  <p><a itemprop="url" href="http://destinytaoer.cn">blog</a></p>
</section>

3.4 属性值

数据属性对应的属性值是元素中的某个属性或者文本的值
- content 属性
- <meta itemprop="" content="">

• src 属性

  • audio
  • embed
  • iframe
  • img
  • source
  • video

• href 属性

  • a
  • area
  • link

• data 属性

  • object

• datetime 属性

  • time

• 文本内容

  • 其他所有元素

3.4 嵌套项与多属性

在包含 itemprop 的元素中添加 itemscope 插入嵌套项。

<span itemprop="members" itemscope>S˙H˙E
  <span itemprop="name">任家萱</span>
  <span itemprop="name">田馥甄</span>
  <span itemprop="name">陈嘉桦</span>
</span>

项目可以包含不同值的多个相同属性。如上例

同一个元素同样也可以有多个属性关键名称，用空格分隔。

<p itemscope>
  <span itemprop="name call">destiny</span>
</p>

3.5 itemref 页面内引用

允许微数据项目通过指向特定 ID（含有需要属性的元素）包含非后代属性。

<p itemscope itemref="band-members">
  <span itemprop="name">S˙H˙E</span>
</p>
……
<span id="band-members" itemprop="members" itemscope>S˙H˙E
  <span itemprop="name">任家萱</span>，
  <span itemprop="name">田馥甄</span>和
  <span itemprop="name">陈嘉桦</span>
</span>

含有 itemref 属性的元素项目会把 itemref 指定 id 的项目包含进来。

3.6 标注不可见数据

如果你想添加的文本并不是页面内容的一部分，你可以在 <meta> 元素上使用 content 属性：<meta itemprop="" content="">

但是某些浏览器会自动把 <meta> 元素移动到 head 标签中。比较靠谱的做法是使用 itemref 做页面内引用，这样即使浏览器移除了，还是能够识别出微数据。

<p itemscope>
  <span itemprop="name" itemscope itemref="meta-likes">
   钟欣桐
    <meta id="meta-likes" itemprop="likes" content="twins成员">
  </span>
  摄影爱好者陈老师的粉丝。
</p>

注意：应当尽可能的使用可见数据，因为不可见的数据，往往会被忽略，更新时忘记修改。可以将不可见数据紧挨着它所描述的可见文本后面，可以起到一定提醒作用。

3.7 itemid 全局标识符

允许词汇表给微数据项目定义一个全局标识符。
如书的 ISBN 数值

<p itemscope itemtype="http://vocab.example.com/book"  itemid="urn:isbn:0321687299">
  <!-- 书信息… -->
</p>

四、词汇表

以 Google 丰富摘要词汇表( data-vocabulary.org )为例。

4.1 Person 人物

设置 itemtype="http://data-vocabulary.org/Person"

包含属性有：
- name 姓名
- nickname 昵称
- photo 头像，图片链接
- title 头衔、职称
- role 角色 （如：会计）
- url 个人网址，定义比较宽松
- affiliation 相关的组织名称（如：雇主、公司）
- friend 朋友（表示与另外一人的社会关系）
- contact 联系方式（表示与另外一人的社会关系）
- acquaintance 熟人关系（表示与另外一人的社会关系）
- address 位置地址，可以是一个项目

4.2 Address 地址

Person 词汇表定义了 address 属性，而 address 本身也是微数据项目，有自己的词汇表：设置 itemtype="http://data-vocabulary.org/Address"

包含属性有：
- country-name 国家
- region 省
- locality 县、地区
- street-address 街道地址
- postal-code 邮政编码

对于没有定义属性的地址，如：镇，可以写入 locality 属性中。

注意：一般地址只用一个标签包含，为了微数据的应用，应当为各个对应属性增加一个标签包含。虽然增加了标签，但这样做是值得的。其他情况也是如此

4.3 Organization 组织

设置 itemtype="http://data-vocabulary.org/Organization"

包含属性有：
- name 组织名称
- url 组织主页链接
- address 组织地址，可以是一个项目
- tel 组织的电话号码
- geo 地理位置坐标，可以是一个项目

4.4 Geo 地理位置

设置itemtype="http://data-vocabulary.org/Geo"

包含属性有：
- latitude 纬度
- longitude 经度

一般使用不可见标注方式

4.5 Event 事件

设置itemtype="http://data-vocabulary.org/Event"

包含属性有：
- summary 事件名称
- url 事件详情链接
- location 事件发生或活动举行的地点或场所，可以有一个嵌套的组织或者地址来表示
- description 对事件的描述
- startDate 开始日期和时间，ISO 格式:2009-11-06T08:30+01:00
- endDate 结束日期和时间，ISO 格式
- duration 事件持续时间，ISO 格式
- eventType 事件类型（如讲座、音乐会等）
- geo 事件的地理位置，可以是一个项目
- photo 事件相关图片链接

4.6 Review 点评

设置itemtype="http://data-vocabulary.org/Review"

包含属性有：
- itemreviewed 被点评的项目名称，可以是产品、服务、商家等
- rating 对该项目的数字质量评级，默认档次从 1 到 5，也可以前嵌套一个 Rating 项目
- reviewer 点评者姓名
- dtreviewed 点评日期，ISO 格式
- summary 关于点评的简要说明
- description 点评详细描述

4.7 Rating 等级

设置itemtype="http://data-vocabulary.org/Rating"

包含属性有：
- value 获得的评级
- worst 最差的等级，0
- best 最好的等级