网页简历结构和语义信息 hResume微格式

2020-05-14 07:25:24易采站长站整理

<div class="contact vcard“>
<img src="/images/personal/emilyLewis.jpg" width="150" height="203" class=”photo” alt=”Emily Lewis” />
<h2 class=”fn n” id=”emily-hcard-name”><span class=”given-name”>Emily</span> <span class=”additional-name”>Paige</span> <span class=”family-name”>Lewis</span></h2>
<p class=”adr”><span class=”locality”>Albuquerque</span>, <abbr class=”region” title=”New Mexico”>NM<abbr> <span class=”postal-code”>87106</span> <abbr class=”country-name” title=”United States of America”>USA</abbr></p>
<ul>
<li><a href="mailto:eplewis@gmail.com" class=”email”>eplewis[at]gmail[dot]com</a></li>
<li><a href="http://www.emilylewisdesign.com/" class=”url” rel=”me”>Design Portfolio</a></li>
<li><a href="http://www.linkedin.com/in/emilyplewis/" rel="me">LinkedIn profile</a></li>
</ul>
</div>

同rel-me定义统一的身份

在上面的例子中,我在到网站的链接上使用了rel-me:

<li><a href="http://www.emilylewisdesign.com/" class="url" rel=”me”>Design Portfolio</a></li>
<li><a href="http://www.linkedin.com/in/emilyplewis/" rel=”me”>LinkedIn profile</a></li>

如同我们在第一部分中讨论的,rel="me"用来定义从关于某人的某个页面到另一个页面的超链接关系。

使用address的问题

hResume规范中也建议使用<address>来描述个人联系信息。根据W3C的描述,<address>元素为:

“… used by authors to supply contact information for a document or a major part of a document such as a form.(译:作者用来为文档或者文档大部分内容提供联系信息)“

在简历的例子中,<address>语义上是正确的,因为他描述的联系信息是属于简历作者的。不过,您会注意到我在上面的例子中没有使用<address>,这是因为<address>不能包含块级元素。当然,我可以使用<span>来替换所有的<p>和<ul>,但是那会让文档失去很多语义信息和结构,所以就没有考虑<address>。