更多精彩尽在：《Microformats教程》系列文章

本部分我将介绍另一个常用的microformats:hCalendar。它是一个用于标记事件的microformats。如果你使用过 Yahoo的Upcomming ，你一定会觉得它是个具有不错概念的web 2.0网站，将所有的事件聚合在一起，非常强大。是的，我谈到了聚合，你想到了什么？完全正确。Microformats。事实上，Upcomming已经将每一个具体事件标记为microformats了，而这个microformats就是hCalendar。如果你在Firefox浏览器上安装了我 上一篇教程 所说的 Operator 插件，那么在Upcomming中某一个事件页面上，你就能够直接将该事件导入你的Google日历、Yahoo日历和Firefox书签上了。

当你要标记一个事件时，那么就要在你的root element上添加一个 class="vevent" 。

<div class="vevent"> ... </div>

以上标记将完成 一个事件 的标记。仅有以上root element是不够，一个 合法 的hCalendar 至少包含 两个内容：

• 事件名
• 事件开始日期

事件名的标记使用 class="summary" ，事件开始日期的标记使用 class="dtstart" title="20070206" ，这和hCard中标记出生日期的模式类似，如果我们要标记一个合法的hCalendar，那么我应当至少提供这些信息。

<div class="vevent">
    <span class="summary">D2前端技术论坛</span>
    <abbr title="20080426" class="dtstart">2008年4月26日</abbr>	
</div>

以上提供了一个合法的hCalendar的必要信息，但是hCalendar还能够包含许多具体信息。

注意：以上扩展信息中的 联系方式 中使用了 上一篇教程中提到的 vcard ，所以该信息中将包含主办机构名称、具体地址、联系电话等重要信息。

以 D2前端论坛 为例，较完整event应该如下：

<div class="vevent">
    <h3 class="summary"><a class="url" href="http://d2forum.cn/index.html">D2前端技术论坛</a></h3>
    <p class="description">现代前端技术在网站中的应用</p>	
    <p>开始日期：<abbr title="20080426" class="dtstart">2008年4月26日</abbr></p>
    <p>结束日期：<abbr title="20080428" class="dtend">2008年4月27日</abbr></p>
    <p>地址：<span class="location">北京国安宾馆3层会议厅</span></p>
    <div class="vcard contact">
        <span class="fn org"><abbr title="Designer and Developer">D2</abbr></span>
        <p>电子邮件：<a href="mailto:chengzhi@taobao.com">chengzhi@taobao.com</p>
    </div>	
</div>

注意以上“结束日期”的title中必须增加一天。

完成一个事件的标记是不是很简单呢？如果你要连续标记多个事件，那么可以将多个 class="vevent" 元素放在 vcalendar 中。

<div class="vcalendar">
    <div class="vevent"> ... </div>
    <div class="vevent"> ... </div>
    <div class="vevent"> ... </div>
</div>

虽然 D2前端论坛 已经可以说是我国Web前端行业中的领先者了，但是他们的网站没有使用Microformats标记该事件信息。这足以说明Microformats在我国还很少受到重视，更加不要说应用，不过我想Semantic Web的车轮很难被减缓，压过我国的土地也只是时间问题。

来自：http://www.lunaticsun.com/article/microformats-five

分类： 网页设计 站长经验 Web开发 交互设计 艺术设计