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

look_w

添加 People Microdata 到你的 Web 页面中这里看一个添加 People Microdata 到你的 Web 页面中的例子，首先看一个不添加任何 Microdata 属性的例子。
清单 4

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<section> <img width="204" height="250"        src="//diveintohtml5.org/examples/2000_05_mark.jpg"        alt="[Mark Pilgrim, circa 2000]"> <h1>Contact Information</h1> <dl>    <dt>Name</dt>    <dd>Mark Pilgrim</dd>    <dt>Position</dt>    <dd>Developer advocate for Google, Inc.</dd>    <dt>Mailing address</dt>    <dd>       100 Main Street<br>       Anytown, PA 19999<br>       USA    </dd> </dl> <h1>My Digital Footprints</h1> <ul>    <li><a href="http://diveintomark.org/">weblog</a></li>    <li><a href="http://www.google.com/profiles/pilgrim">Google profile</a></li> <li><a href="http://www.reddit.com/user/MarkPilgrim">Reddit.com profile</a></li>    <li><a href="http://www.twitter.com/diveintomark">Twitter</a></li> </ul> </section>

首先要做的是声明一个词汇表，和它的使用范围。需要做的是在包含所有数据的最外层标识中添加 itemscope 和 itemtype 属性，在这个例子中那个最外层标识是 <section> 元素：

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

现在可以从 http://data-vocabulary.org/Person 词汇表中定义 Microdata 属性。你可以打开 http://data-vocabulary.org/Person 去查看属性的列表，Microdata 规范并不要求这么做，不过为了清晰每个属性的含义，这里加上这个属性。毕竟为了开发人员能够使用这个词汇表，你需要记载你的词汇表。Table2 列出了 Person 词汇表的属性：
表 2. Person 词汇表 Property  Description name Name nickname Nickname photo An image link title The person ’ s title (for example, “Financial Manager”) role The person ’ s role (for example, “Accountant”) url Link to a web page, such as the person ’ s home page affiliation The name of an organization with which the person is associated (for example, an employer) friend Identifies a social relationship between the person described and another person contact Identifies a social relationship between the person described and another person acquaintance Identifies a social relationship between the person described and another person address The location of the person (can have the subproperties street-address, locality, region, postal-code, and country-name)
这里例子中的第一个元素是我的图片，通常它用 <img> 元素标识，为了声明 <img> 元素标识的是我的图片，只需要给 <img> 添加 itemprop="photo"：
清单 5

1 2 3

<img itemprop="photo" width="204" height="250"    src="//diveintohtml5.org/examples/2000_05_mark.jpg"    alt="[Mark Pilgrim, circa 2000]">

从表 1 中可以看出，<img> 的属性值就是 src 属性，每个 <img> 元素都有一个 src 属性，并且 src 通常是一个 url。
这里 <img> 元素并不是单独的，它是 <section> 元素的一个子元素，我们刚在 <section> 中声明了 itemscope 属性。Microdata 重用元素的父子关系来定义 Microdata 属性的范围（scoping）。简单地说，<section> 代表一个人（person），任何在 <section> 能找到的子元素都是人（preson）的属性。可以这么认为，将 <section> 作为句子的主语，itemprop 属性作为句子的谓语，而 Microdata 属性值代表句子的宾语：
清单 6

1 2 3

This person [explicit, from <section itemscope itemtype="...">] is pictured at [explicit, from <img itemprop="photo">] http://diveintohtml5...000_05_mark.jpg [implicit, from <img src> attribute]

主语只需要定义一次，通过在最外层的 <section> 元素中添加 itemscope 和 itemtype 属性完成，谓语通过在 <img> 元素中添加 itemprop="photo"属性完成，宾语不需要特殊的标识，因为 Table1 中规定了 <img> 元素的属性值是 src 属性。
接下来看到标题 <h1> 标签和 <dl> 列表标签，<h1> 或 <dl> 都必须要被 Microdata 标识，并不是每一个 HTML 标签都需要一个 Microdata 属性，Microdata 用来描述属性本身，而不是包含属性的标题或列表。<h1> 并不是一个属性，它只是一个标题，同样，<dl> 表示"name"只是一个标签，不是一个属性：
清单 7

1 2 3 4

<h1>Contact Information</h1> <dl>    <dt>Name</dt>       <dd>Mark Pilgrim</dd>

哪里才是真正的信息呢？在 <dd> 元素中，这里才是需要添加 itemprop 属性的地方。使用哪个属性呢？正是 name 属性。那么属性值呢？就是在 <dd> 元素中的文本内容。它需要被标识起来吗？根据 Table1 的规定，<dd> 元素不需要特殊的处理，所以它的属性值只是它包含的纯文本：

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

接下来的两个属性比较棘手，先看使用 Microdata 前的代码片段：

1 2	<dt>Position</dt> <dd>Developer advocate for Google, Inc.</dd>

看一下 Person 词汇表的定义，你会发现文本“Developer advocate for Google, Inc.”实际上包含两个属性：title（“Developer advocate”）和 affiliation（“Google, Inc”）。怎么在 Microdata 中表示这两个属性呢？答案是你不能，Microdata 没有办法将文本分为多个属性，你不能说前 18 个字符是一个 Microdata 属性，剩下的 12 个字符是另外一个 Microdata 属性。
想象一下，你想让前 18 个字符用一种风格，剩下 12 个字符用另一种风格，CSS 可以做到吗？答案也是不能。不过你可以把前 18 个字符内嵌到一个元素中，像 <span>，剩下 12 个字符内嵌到另一个 <span> 中，然后对不同的 <span> 使用不同的 CSS 样式。
这种技术同样适用于 Microdata，这里有两段不同的信息：title 和 affiliation，如果分别将两段信息内嵌到不同的 <span> 元素中，你可以声明每个 <span> 为独立的 Microdata 属性。
清单 8

1 2 3

<dt>Position</dt> <dd><span itemprop="title">Developer advocate</span> for    <span itemprop="affiliation">Google, Inc.<span></dd>

同样这个技术也可以用于组合街道地址。Person 词汇表定义了 address 属性，而这个属性本身也是一个词汇表，并且定义自己的属性（properties）：street-address, locality, region, postal-code, 和 country-name。
你可能对用点标识对象和属性的方式很熟悉，想象这样的关系：

• Person
• Person.address
• Person.address.street-address
• Person.address.locality
• Person.address.region
• Person.address.postal-code
• Person.address.country-name

这个例子中，所有的街道地址信息都包含在一个 <dd> 元素中。标识 address 属性比较简单，只需要在 <dd> 元素上添加 itemprop 属性。

1 2	<dt>Mailing address</dt> <dd itemprop="address">

但是要注意，address 本身也是一个 Microdata 项，所以我们需要还需要定义 itemscope 和 itemtype 属性：
清单 9

1 2 3

<dt>Mailing address</dt> <dd itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">

Address 同样遇到前面 title 和 affiliation 的问题，address 是一长串的字符串，但是我们想把它分割成几部分。解决办法是一样，我们把不同的部分内嵌到不同的 <span> 中，然后在 <span> 上声明不同的 Microdata 属性：
清单 10

1 2 3 4 5 6 7 8 9

<dd itemprop="address" itemscope      itemtype="http://data-vocabulary.org/Address">    <span itemprop="street-address">100 Main Street</span><br>    <span itemprop="locality">Anytown</span>,    <span itemprop="region">PA</span>    <span itemprop="postal-code">19999</span>    <span itemprop="country-name">USA</span> </dd> </dl>

还有一个需要关注的就是一系列的 URL。Person 词汇表有个叫做 url 的属性，url 的定义很宽松，可以是任何你想跟一个人关联的 url：一个博客，一个照片。
值得注意的是一个人可以有很多的 url 属性。从技术上讲，任何属性都可以出现多次，比如，你可以拥有两张图像，每个用不同的 url 表示。这里我们要列出四个不同的 url。在 HTML 中，它是一系列 url 的列表：四个 <a> 元素，每个在 <li> 元素中。在 Microdata 中，每个 <a> 元素有一个 itemprop="url"属性：
清单 11

1 2 3 4 5 6 7 8 9 10 11

<h1>My Digital Footprints</h1> <ul> <li><a href="http://diveintomark.org/"         itemprop="url">weblog</a></li> <li><a href="http://www.google.com/profiles/pilgrim"         itemprop="url">Google profile</a></li> <li><a href="http://www.reddit.com/user/MarkPilgrim"         itemprop="url">Reddit.com profile</a></li> <li><a href="http://www.twitter.com/diveintomark"         itemprop="url">Twitter</a></li> </ul>

根据表 1 知道，<a> 元素需要特别处理。它的 Microdata 属性值是 href 属性，而不是子元素的文本内容。