使用 HTML5 中的 Microdata 增强 Web 应用程序的语义（3）

look_w

Microdata 数据模型定义自己的 Microdata 词汇表（vocabulary）很简单，首先，需要一个 URL 形式的命名空间（namespace）。这个 URL 可以实际上指向一个可用的 Web 页面，但这个 URL 并不是必须的。假如我们要创建一个 Microdata 词汇表（vocabulary）来表示一个人（Person）。如果拥有一个 data-vocabulary.org 的域，可以使用 URL（http://data-vocabulary.org/Person）来表示我们的 Microdata 词汇表（vocabulary）的命名空间（namespace）。通过在自己控制的域上选择一个 URL 就能很容易地创建一个全世界唯一的标识符。
在这个词汇表（vocabulary）中，要定义一些命名的属性，这里从三个基本的属性开始：

• name (your full name)
• photo (a link to a picture of you)
• url (a link to a site associate to you, like a weblog or Gooogle profile)

这些属性中一些为 URL，一些是纯文本（plain text）。想象一下你拥有一个“关于”的页面或者人物简介页面，你的名字可能以标题（heading）标识，像一个 <h1> 元素，你的头像是一个 <img> 元素，因为你需要人们看到它，任何和你关联的人物简介可能被标识为超链接（hyperlinks），因为你希望人们可以点击它们。假如你的整个人物简介（profile）就包含在 <section>（section 是 HTML5 中的标签）元素中，如下所示：
清单 1

1 2 3 4 5

<section> <h1>Mark Pilgrim</h1> <p><img src="//www.example.com/photo.jpg" alt="[me smiling]"></p> <p><a href="http://diveintomark.org/">weblog</a></p> </section>

Microdata 的数据模型是名字 / 值对（name/value pairs），Microdata 的属性名（比如这个例子中的 name,photo,url）总是在 HTML 元素中声明，相应的属性值从 DOM 元素中取得。对于大多数 HTML 元素，属性值就是元素对应的文本内容（text content），但是也有一些例外：
表 1.Microdata 属性值来源ElementValue <meta>  content attribute

• <audio>
• <embed>
• <iframe>
• <img>
• <source>
• <video>

src attribute

• <a>
• <area>
• <link>

href attribute  <object>  data attribute  <time>  datetime attribute  all other elements  text content
在你的页面中添加 Microdata 就是在已有的 HTML 元素上添加一些属性。首先要做的是声明使用的 Microdata 词汇表（vocabulary）的命名空间，通过添加一个 itemtype 属性完成；另外声明词汇表的范围，通过添加一个 itemscope 属性完成。在这个例子中，所有的数据都在元素 <section> 中，所以我们在 <section> 元素上声明 itemtyp 和 itemscope：

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

元素 <section> 中的第一个数据是你的名字（name），它内嵌在 <h1> 元素中，<h1> 元素在 HTML5 Microdata 数据模型中没有特殊的处理，所以它遵循“all other elements”的规则，即它的属性值只是 HTML 相应元素的简单文本内容。（当然，如果你的名字内嵌在 <p>,<div>, 或者 <span> 等元素中，这个规则同样有效。）

1	<h1 itemprop="name"> Mark Pilgrim </h1>

上面的语句可以这么表述：这里是 http://data-vocabulary.org/Person 词汇表的一个 name 属性，它的属性值是 Mark Pilgrim。
接下来：photo 属性，它应该是一个 URL。根据 HTML5 Microdata 数据模型的规则，<img> 元素的值是 src 属性。可以看出，你的 photo 的 URL 已经在 <img src> 中了，你需要做的就是声明 <img> 元素是 photo 属性。

1	<p><img itemprop="photo" src="//www.example.com/photo.jpg" alt="[me smiling]"></p>

上面的语句可以这样表述：这里是 http://data-vocabulary.org/Person 词汇表的一个 photo 属性，它的属性值为 。
最后，属性 url 同样是一个 URL。根据 HTML5 Microdata 数据模型的规则，元素 <a> 的值是它的 <href> 属性。同样，它完全符合现有的标识，你所需要做的就是声明现有的 <a> 元素是 url 属性：
<a itemprop="url" href="http://diveintomark.org/"> dive into mark </a>
上面的语句可以这么表述：这里是 http://data-vocabulary.org/Person 词汇表的一个 url 属性，它的值为 http://diveintomark.org。
当然，如果你的标识符（markup）看起来有一些不一样，这也不是问题。你可以添加 Microdata 属性和属性值到任何 HTML 元素中。虽然不推荐这么做，但你仍然可以添加它。看下面的例子：
清单 2

1 2 3 4 5

<TABLE> <TR><TD>Name<TD>Mark Pilgrim <TR><TD>Link<TD>    <A href=# onclick=goExternalLink()>http://diveintomark.org/&lt;/A> </TABLE>

为了标识 name 属性，只需要添加 itemprop 属性到包含 name 属性的表格单元（table cell）中。表格单元没有特殊的规则，所以它的属性只是简单的文本内容。

1	<TR><TD>Name<TD itemprop="name">Mark Pilgrim

添加 url 属性看起来有些棘手，这个标识不是按普通的方式使用 <a> 元素。它并不是直接将链接放在 href 属性中，在 href 属性中没有任何有用信息，它通过在 onclick 属性上调用 JavaScript 代码提取 URL 并访问它。
不过你同样可以将它转变为 Microdata 属性，只是直接使用 <a> 元素并不能解决问题。链接地址并不在 href 属性中，没有办法重写规则来表达这个意思：在 <a> 元素中，寻找 <href> 属性的 Microdata 属性值。但是你可以在外面添加一个包装元素，通过这个元素来添加 url Microdata 属性：
清单 3

1 2 3 4 5 6 7

<TABLE itemscope itemtype="http://data-vocabulary.org/Person">   <TR><TD>Name<TD>Mark Pilgrim   <TR><TD>Link<TD>     <span itemprop="url">       <A href=# onclick=goExternalLink()>http://diveintomark.org/&lt;/A>     </span> </TABLE>

由于 <span> 元素没有特殊的处理，可以使用默认的规则：它的 Microdata 属性是文本内容。
总结起来可以这么说：你可以给任何 HTML 中的标识符添加 Microdata 属性。如果正确地使用 HTML，你会发现很容易添加 Microdata 属性，如果有些 HTML 标识符比较棘手，它同样可以被完成。