HTML5 微数据 RDFa/微格式

HTML5 herman 1197浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

微数据在国内还没有引起足够的重视,只是一些大公司在使用。例如:微博豆瓣等。小的网站大多都没有意识到微数据的重要性,而国外的GOOGLE、YAHOO、BING都在支持这个标准。

什么是微数据

看了百度百科的微数据,和我这里讨论的微数据并不是一个概念,因此我这里说明一下什么是微数据?

首先通俗地介绍一下,微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其意义,一些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其意义

在这里再科普一下,给出谷歌关于微数据的解释:

HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论、人物信息或事件。每种信息都描述特定类型的项,例如人物、事件或评论。例如,事件可以包含 venue、starting time、name 和 category 属性

微数据使用 HTML 标记(常为 span 或 div)中的简单属性为项和属性指定简要的描述性名称。 

微数据的定义

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

  • 自定义词汇表:我们可以将“HTML5中所有元素的集合”看做一个词汇表,这个词汇表包括了可以代表章节或者文章的元素,但是不包括可以代表一个人或者活动的元素,如果要想表示一个“人”,那么就需要定义自己的词汇表,使用微数据就可以定义这样的词汇表。
  • 作用域:微数据的作用域可以参照DOM中的元素之间的自然父子关系,微数据重用了DOM本身的层级结构,提供了一种方式来表达“所有该元素的属性都来自这个词汇表”。
  • 名/值对:每一个微数据词汇表都定义了一组命名属性,一个微数据的属性名总是声明在一个HTML元素中。相对应的属性值则从DOM中获取。对于大多数HTML元素而言,属性值就是元素的文本内容。

但也有少数例外,如下表:

元素
<meta> content属性
<audio>、<embed>、<iframe>、<img>、<source>、<video> src属性
<a>、<area>、<link> href属性
<object> data属性
<time> datetime属性
所有其他元素 文本内容

为什么要使用微数据

“添加微数据”到网页就是给已有的那些HTML元素增添一些属性,那就不得不问“为什么我们要使用微数据”,难道只是为了增加语义而增加语义吗?
事实上,有两类主要的应用程序会消费HTML及其扩展,以及HTML5微数据:

  • Web浏览器
  • 搜索引擎

对于浏览器,HTML5定义了一组DOM API,用于从网页上提取微数据项目、属性以及属性值。实际上支持微数据的浏览器基本上等于没有,坑爹呐!也许在未来某一天主流浏览器都会实现这些客户端API吧……
而另一个主要的HTML消费者就是搜索引擎。一个搜索引擎会用关于一个人的微数据属性来干嘛呢?想象一下,搜索引擎可以继承并显示一些结构化的信息,而不仅仅是显示页面标题和一些摘要文字。这些结构化信息包括:姓名、职称、工作单位、地址,甚至一个资料照片缩略图。
Google支持微数据,其Rich Snippets计划就包含了对微数据的支持。当Google的Web抓取工具分析到你的网页,并找到符合词汇表的微数据属性,就会开始解析属性数据,同页面其余数据一并存储。实际上利用这种抓取效果,你就可以得到搜索公司的优待,为你提供定制的搜索结果页。

HTML5官方的解释:HTML5 微数据规范

微数据实例

微数据使用 HTML 标记(常为 <span> 或 <div>)中的简单属性为项和属性指定简要的描述性名称。看下面的例子:

<div>
  我的名字是业余草,但大家叫我涛哥。我的个人首页是:
  <a href="http://www.xttblog.com">www.xttblog.com</a>
  我住在上海市浦东新区。我是工程师,目前在创业。
</div>

而如果使用针对人物的微数据标记,则HTML会如下:

<div itemscope itemtype="http://data-vocabulary.org/Person">
  我的名字是<span itemprop="name">业余草</span>,
  但大家叫我<span itemprop="nickname">涛哥</span>。
  我的个人首页是:
  <a href="http://www.xttblog.com" itemprop="url">www.xttblog.com</a>
  我住在上海市浦东新区。我是<span itemprop="title">工程师</span>,
  目前在<span itemprop="affiliation">创业</span>。
</div>

HTML代码量多了不少,还出现了很多自定义的属性,如itemscope, itemtype, itemprop等。这些属性就是方面机器识别的特定的标记。其含义等依次如下:

itemscope 定义一组名值对,称为项。
itemprop=”属性名” 添加一个数据项属性。这个属性名可以是个单词或是个URL,与元素包含的文本值相关:

  • 对于大部分元素,属性名值就是元素标签里面的文本值(不是所有标签)。
  • 对于有URL属性的元素,该值就是URL(如<img src="">, <a href="">, <object data="">等)。
  • 对于<time>元素,该值就是datetime=""属性。
  • 对于<meta itemprop="" content="">, 该值就是content=""属性。

itemref=”” 允许微数据项通过指向特定ID(含有需要属性的元素)包含非后代属性。
itemtype=”” 微数据定义的类型。其值为URL,扮演词汇表名称的作用。
itemid=”” 允许词汇表给微数据项定义一个全局标识符,例如书的ISBN数值,在同样元素上使用itemid作为数据项的itemscope和itemtype属性。

关于微数据的语法我们下章再见!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » HTML5 微数据 RDFa/微格式