HTML5 微数据 RDFa/微格式

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

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

什么是微数据

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

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

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

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

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

微数据的定义

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

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

但也有少数例外，如下表：

为什么要使用微数据

“添加微数据”到网页就是给已有的那些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）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

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