关于前端:微数据

一、微数据介绍

Microdata 是在网页中提供额定语义的规范形式。

Microdata 可定义本人的自定义元素，并开始在网页中嵌入自定义属性。在高水平上，微数据由一组名称 – 值对组成。

微数据应用来自自定义词汇表的、带作用域的名 / 值对来给 DOM 做标记，微数据的实质就是 JSON。

二、微数据理论利用举例

个别写法：

<div>
  我的名字是大熊，但大家叫我小熊。我的集体首页是：<a href="http://www.example.com">www.example.com</a>
  我住在徐州市。我是工程师，目前在科技公司下班。</div>

而如果应用针对人物的微数据标记，则 HTML 会如下：

<div itemscope itemtype="http://data-vocabulary.org/Person">
  我的名字是 <span itemprop="name"> 大熊 </span>，但大家叫我 <span itemprop="nickname"> 小熊 </span>。我的集体首页是：<a href="http://www.example.com" itemprop="url">www.example.com</a>
  我住在徐州市。我是 <span itemprop="title"> 工程师 </span>，目前在 <span itemprop="affiliation"> 科技公司 </span> 下班。</div>

HTML 代码量多了不少，还呈现了很多自定义的属性，如 itemscope, itemtype, itemprop 等。这些属性就是方面机器辨认的特定的标记。

Live Microdata 对下面的 HTML 代码跑一下：

{
  "items": [
    {
      "type": ["http://data-vocabulary.org/Person"],
      "properties": {
        "name": ["大熊"],
        "nickname": ["小熊"],
        "url": ["http://www.example.com/"],
        "title": ["工程师"],
        "affiliation": ["科技公司"]
      }
    }
  ]
}

三、属性介绍

itemref 应用举例

<p itemscope itemref="test-members"> 我要去看 <span itemprop="name">flower</span> 的演唱会，好开心 </p>
<span id="test-members" itemprop="members" itemscope>flower 的成员是
  <span itemprop="name"> 小乐 </span>，<span itemprop="name"> 田甜 </span> 和
  <span itemprop="name"> 华立 </span>
</span>

{
  "items": [
    {
      "properties": {
        "name": ["flower"],
        "members": [
          {
            "properties": {
              "name": [
                "小乐",
                "田甜",
                "华立"
              ]
            }
          }
        ]
      }
    }
  ]
}

下面的定义通过援用 ID test-members 蕴含了 members 项的三个成员名称属性，每个都是不一样的值。

四、总结

微数据是为了不便机器辨认而产生的货色，有特定的标准和特定的格局，能够丰盛搜索引擎的网页摘要。

写在最初

词汇表介绍

1. schema.org 词汇表
2. Google 丰盛摘要词汇表
3. WHATWG/microformats.org 词汇表