html5网站制作实例：改进“About Me”页面
作者：优品建站
发布日期：2022-03-10
访问量：130
我们已经了解了微格式和微数据这两个语义流派的基本结构。以此为起点，大家可以自己（到http://microformats.org）去找新的微格式，或者（到http://schema.org）去找微数据词汇表，从头开始编写富有语义的标记。
但生活往往并没有那么如意，至少对大多数Web开发者来说没有。更常见的情况则是你手头已经有了一个包含数据的网页，你需要改进其中的标记，将其语义化。如果你记住以下几点，这件事倒也不难。
❑ 通常，有些重要的数据会混在一些无关紧要的数据中。此时，可以给重要的数据加上新标记，比如用<div>标记块级元素，用<span>标记行内元素。
❑ 不用担心信息的次序。只要使用的类名（微格式）或属性名（微数据）正确，就可以按照自己的意愿组织标记。
❑ 想显示图片，就用<img>；想放个链接，就用<a>。除此之外，一般就是标记普通的文本。
下面就有一个典型的例子。图3-4中的“About Me”页面包含以下内容：
图3-4：这个“About Me”页面包含网站作者的详细联系信息，但尚未添加任何微数据标记
<h1>About Me</h1>
<img src="face.jpg" alt="Mike's Face">
<p>This website is the work of <b>Mike Rowe Formatte</b>.
His friends know him as <b>The Big M</b>.</p>
<p>You can contact him where he works, at
The Magic Semantic Company (phone
641-545-0234 and ask for Mike) or email mike-f@magicsemantics.com.</p>
<p>Or, visit Mike on the job at:<br>
42 Jordan Gordon Street, 6th Floor<br>
San Francisco, CA 94105<br>
USA<br>
<a href="http://www.magicsemantics.com">www.magicsemantics.com</a>
</p>
很明显，这个例子用我们熟悉的Person词汇表（http://schema.org/Person）正合适。我们试着给“About Me”页面中的重要信息添加微数据标记。新增的微数据标记都加粗了。
<h1>About Me</h1>
<div itemscope itemtype="http://schema.org/Person">
<img itemprop="image"src="face.jpg" alt="Mike's Face">
<p>This website is the work of
<span itemprop="jobTitle"style="display:none">Web Developer</span>
<b itemprop="name">Mike Rowe Formatte</b>.
His friends know him as <b itemprop="additionalname">The Big M</b>.</p>
<p>You can contact him where he works, at
The Magic Semantic Company</span> (phone
<span itemprop="telephone">641-545-0234</span> and ask for Mike)
or email <span itemprop="email">mike-f@magicsemantics.com</span>.</p>
<p>Or, visit Mike on the job at:<br>
42 Jordan Gordon Street, 6th Floor<br>
San Francisco, CA 94105<br>
USA<br>
<a itemprop="url" href="http://www.magicsemantics.com">www.magicsemantics.
com</a>
</p>
</div>
这个例子用了几种技巧。
❑ 使用新<span>包含了需要标注微数据的内容。
❑ 给原有合适的元素添加了itemprop属性。比如，<b>里面是名字，因此没必要再多此一举弄个<span>了。（当然，你加上也可以。就像这样：<b><span itemprop="name">Mike Rowe Formatte</span></b>。）
❑ 使用看不见的<span>表示人的职务。（文本使用行内样式将display设为none。）这个技巧经常用于隐藏多余信息，但又可以让搜索引擎和其他工具找得到。也有人说这种做法会导致一些工具（如Google）对其视而不见，因为这些信息对用户不可见。
微数据经常会有嵌套的结构，即一个词汇表会套住另一个。比如，可以在Person词汇表的个人详细信息中套上地址信息，而地址信息使用的词汇可能来自PostalAddress词汇表。
标记地址信息时，要使用带有itemprop、itemscope或itemtype属性的<div>或<span>元素。itemprop是属性名，itemscope属性表示要使用新词汇表提供属性数据，而itemtype属性是以XML命名空间表示的词汇表（在这里是http://schema.org/PostalAddress）。下面是两个词汇表嵌套的结果：
<div itemscope itemtype="http://schema.org/Person">
<img itemprop="image" src="face.jpg" alt="Mike's Face">
<p>This website is the work of
...
<p>Or, visit Mike on the job at:<br>
<span itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
...
</span>
</div>
接下来就可以在新区域中标注地址信息了：
<div itemscope itemtype="http://schema.org/Person">
<img itemprop="image" src="face.jpg" alt="Mike's Face">
<p>This website is the work of
...
<p>Or, visit Mike on the job at:<br>
<span itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">42 Jordan Gordon Street,
6th Floor</span><br>
<span itemprop="addressLocality">San Francisco</span>,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">94105</span><br>
<span itemprop="addressCountry">USA</span><br>
</span>
...
</div>
这样完全没有问题。或许你不太清楚什么时候可以在一个微数据区域中再新开一个微数据区域，那就看看这个参考页面吧：http://schema.org（参见图3-5）。
图3-5：Person词汇表的属性很多（图中只显示了一少部分）。大多数属性用于标注普通文本、数值或日期。但有一些（如这里能看到的address属性）会使用自己的词汇表（PostalA ddress）。单击相应链接，可以了解更多内容
在标注公司名称时，同样可以采用这种嵌套的方式。在此，需要把人的affiliation属性设置为使用Organizatioin词汇表：
<p>You can contact him where he works, at
<span itemprop="affiliation" itemscope
itemtype="http://schema.org/Organization">
<span itemprop="name">The Magic Semantic Company</span>
</span>
提示 如果你不喜欢手工输入itemtype或itemprop等属性名，可以找一个在线工具来帮你自动生成。比如，http://schema-creator.org和http://www.microdatagenerator.com。这两个网站的用法差不多，你选择词汇表，然后在文本框里输入数据，最后复制生成的标记。
在浏览器中提取语义数据
说到这儿，我们还应该了解一下这么做的好处。尽管目前还没有浏览器能原生识别微格式（至少在本书写作时没有），但还是有不少插件和脚本可以赋予浏览器这种能力。至于这些语义数据的用途，当然也不少。比如，浏览器可以检测页面中的联系信息，把它们单列在一个面板中，让你像添加页面书签一样，迅速地添加联系人信息。再比如，浏览器检测到会议信息后，你可以只单击一下，就把该会议添加到自己的活动日历中，或者在地图中标出会议地点。
目前还没有插件能做到这些。不过，一些骨灰级的Web开发人员已经写了不少JavaScript脚本，用于搜索微格式或微数据，通过弹出层显示它们，或者用于其他用途。（比如用JavaScript写的微格式工具：http://krofdrakula.github.io/microdata-tool/。）某些浏览器也有相应的插件可以发现网页中不同的元数据（图3-6）。
图3-6：Chrome扩展Semantic Inspector可以提取当前页面中的所有元数据。单击其工具条中的按钮，就可以看到语义数据层。这个图是使用该扩展提取“About Me”页面中元数据的结果
将来，主流浏览器很可能原生支持微格式，就像IE和Firefox原生支持数据源一样。数据源是一种特殊的标记文档，可以提供最新内容，比如最新文章汇总等。如果你使用Firefox打开某个博客，它会自动检测博客的RSS数据源，为你提供一个“实时”的新内容书签。微格式将来也可以为网页提供类似的附加价值。
优品建站免费提供网站制作报价服务。
