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 最好的等级

HTML5 微数据

HTML5 微数据

一、什么是微数据

二、微数据中的概念

2.1 作用域

2.2 词汇表

2.3 数据模型

三、微数据的语法

3.1 itemscope 项目的作用域

3.2 itemtype 项目的类型

3.3 itemprop 项目的属性

3.4 属性值

3.4 嵌套项与多属性

3.5 itemref 页面内引用

3.6 标注不可见数据

3.7 itemid 全局标识符

四、词汇表

4.1 Person 人物

4.2 Address 地址

4.3 Organization 组织

4.4 Geo 地理位置

4.5 Event 事件

4.6 Review 点评

4.7 Rating 等级

推荐阅读更多精彩内容

友情链接更多精彩内容