×
广告

HTML5 微数据

96
destiny0904
2017.11.06 08:44* 字数 1943

一、什么是微数据

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

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

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

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 最好的等级
HTML
Web note ad 1