您的位置:主页 > HTML/JS > 微观数据(Microdata)的数据模型

微观数据(Microdata)的数据模型

本文是Dive Into HTML5 第11章的一个小节,作者是 Google 的软件工程师 Mark Pilgrim。Dive Into HTML5是一本非常系统的讲解HTML5的一本书,相信能让你对microdata数据模型有一定的认识。这是我第一次的翻译,凭借拙劣的英文水平,所以翻译水平有限,若有不准确之处欢迎各位同学指正。
上一节:什么是微观数据
——————————以下为翻译的全文——————————

要自定义微观数据很简单。首先,你需要一个命名空间,他只是一个URL。这个URL命名空间实际上指向一个正在运作网页,尽管这并不是严格的要求。比方说我们想要创建一个描述一个人的微观数据词汇表,如果我拥有data-vocabulary.org这个域名,我会使用http://data-vocabulary.org/Person这个URL地址作我的微观数据词汇的命名空间。选择一个在你控制下的域名,这是一个简单的创建全局唯一的标识符的方法。

在这个Person词汇表中,我需要定义一些命名的属性。让我们从这个三个基本属性开始。

• name(您的名字)
• photo(链接到你的图片)
• url(与你相关的网站比如博客或者Google profile)

其中一些特性是URL,其他的纯文本,无论是那一种形式都会将自身与HTML标签的组成形式联系起来。假设你有一个个人资料页面或者“关于”页面。你的名字作为一个标题,一个<h1>元素。你的照片会是一个<img alt="" />元素,因为你希望人们看到图片。任何的链接到你的资料页面的网址被作为链接,因为你希望人们可以点击他们。在讨论的微观数据模型之前,我们先把全部的个人资料信息被包裹在 元素中以把他与页面的其他元素分离开,像这样

↶ It’s all about me

  1.  
  2. <section>
  3. <h1>Mark Pilgrim</h1>
  4.  
  5. <img src="http://www.example.com/photo.jpg" alt="[me smiling]">
  6.  
  7. <a href="http://diveintomark.org/">weblog</a>
  8. </section>
  9.  

微观数据模型是以名称/值形式一一对应成组的结构。一个微观数据的特性名(就像这个例子中的name,photo,url)始终存在于一个申明的HTML元素中。相应的属性值取至于该元素的DOM。对大多数HTML元素来说,属性值仅仅是该元素的文本内容,但是也有少数例外。

微观特性值来至哪里
元素 特性值
<meta> content 属性
  • <audio>
  • <embed>
  • <iframe>
  • <img>
  • <source>
  • <video>
src属性
  • <a>
  • <area>
  • <link>
href 属性
<object> data 属性
<time> datetime 属性
all other elements 文本内容

添加微观数据到你的网页就是在你已有的HTML元素中添加新的属性。第一件你需要做的事是通过添加一个itemtype属性来申明你使用的微观数据词汇。第二件事是通过itemscope属性来声明词汇的作用域。在这个例子当中,所有的你想要语意化的数据在这个元素当中,所以我们就在元素中申明itemtype 以及itemscope属性。

  1.  
  2. <section itemscope itemtype="http://data-vocabulary.org/Person">

你的名字是<section>元素的首位数据。它被包裹在<h1>元素中,因为<h1>标签在HTML5中没有做特殊微观数据采取规则,所以与其他元素都都是仅仅获取元素的文本内容。(如果你的名字包裹在<p>, <div>或 <span>元素也同样适用)

  1.  
  2. <h1 itemprop="name">Mark Pilgrim</h1>
  3.  

中文意思就是说“name是http://data-vocabulary.org/Person的一个特性,并且这个特性的值是Mark Pilgrim”

接下来我们看photo这个特性。这应该是一个网址。根据HTML5微观数据模型,<img>元素的微观特性值是他的src属性值。我们可以看到,你的资料照片的网址已经在一个<img src>属性中了。你所需要做的是声明<img>元素就是具有照片特性。

  1.  
  2.  
  3. <img itemprop="photo" src="http://www.example.com/photo.jpg" alt="[me smiling]">
  4.  

中文意思就是说“photo是http://data-vocabulary.org/Person的一个特性,并且这个特性的值是http://www.example.com/photo.jpg”

最后,这个url特性同样是一个网址。根据HTML5微观数据模型,<a>元素的特性值是他的href属性值。再强调一次,Microdata与标签正确的使用是相当符合的。所以你所需要做的是声明你的<a>元素具有url特性:

  1. <a itemprop="url" href="http://diveintomark.org/">dive into mark</a>

中文意思就是说“url是http://data-vocabulary.org/Person的一个特性,并且这个特性值是http://diveintomark.org/”

当然,如果你的标签看起来与范例有一些不同,这个没有任何关系。你可以对任何的HTML标签添加微观属性和值,甚至像20th-century-era, tables-for-layout, Oh-God-why-did-I-agree-to-maintain-this这样不太好的标识。为什么我不推荐使用这样标识呢?是因为添加这类标识后元素语义仍然很普通。

↶ For the love of God, don’t do this

  1.  
  2. <td>name</td>
  3. <td>mark pilgrim</td>
  4. </tr>
  5. <td>link</td>
  6. <a onclick="goexternallink()" href="#">http://diveintomark.org/</a></td>
  7. </tr>
  8. </tbody>
  9. </table>
  10.  

对于标识name特性,只需要在包含name的表格单元添加一个itemprop属性。表格单元没有特殊的获取微观数据的规则,所以得到的还是默认值:文本内容。

  1.  
  2. <td>Name</td>
  3. <td itemprop="name">Mark Pilgrim</td>
  4. </tr>
  5.  

添加url特性看起来稍微复杂一点。这个标识不能正确的使用<a>元素。因为他并没有把链接放在href属性中而是在onclick属性中使用JavaScript调用一个获取URL并且跳转的函数。或许这个函数也在一个没有滚动条的窗口打开这个链接,这不是上个世纪互联网有趣的事么?

↶ This is what you get for subverting HTML

  1.  
  2. <table itemscope itemtype="http://data-vocabulary.org/person">
  3. <td>name
  4. <td>mark pilgrim
  5. <td>link
  6. <span itemprop="url">
  7. <a href=# onclick=goexternallink()>http://diveintomark.org/</a>
  8. </span>
  9. </table>
  10.  

无论怎样,你仍然可以把它转换成微观特性,你这时需要一点点的创意。这样使用<a>标签并不是问题。链接目标不在的href属性中,并且我们也不能办法重写“<a>元素的获取微观特性就是本身的href属性值”这个规则。但你可以添加一个包裹元素,然后用他来添加url特性。

由于<span>不是特殊单元,它使用默认获取规则,微观数据值就是他的文本内容。“文本内容”并不是指这个元素的全部内容(可能你会说得到DOM的innerHTML),他的意思只是文本,再这个例子中就是<span>中<a>的文本http://diveintomark.org/。。

总结:你可以在任何标签内添加微观特性。如果您正确的使用HTML,你会发现添加微观数据比如使用HTML标签更加容易。

——————————以下为碎碎念,完全无视——————————
今天是一年一度的高考,愿大家能取得好成绩,小刘刘加油啊

作者:ariesjia

前端少先队员,光荣的红领巾在胸前飘扬

继续八卦

已经2条留言

  1. caixw On 2010年07月13日3:40 下午

    看了,感觉还是有点迷迷糊糊

  2. 美瑞网 On 2012年02月15日2:14 下午

    描述的内容大致清楚了微数据的含义,期待更多应用案例

留言万岁!吹水有益健康!