什么是微格式？在前端构建中应该考虑微格式吗？

微格式

建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式（microformats.org官方定义）。

是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定，是兼顾人机可读性设计的数据表达方式，对Web网页进行语义注解的方法。

这种方法依托于标准的Web页面写作技术，例如，XHTML，这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面，在XHTML文档中给一些标签（Tag）增加一些属性（attribute），这些属性对信息的语义结构进行注解，处理XHTML文档的软件，

实例

简单的微格式

我们从上面的描述知道，微格式实际就是为现有的(X)HTML元素添加元数据和其他属性，增强语义。那么我们就来看一个简单的微格式应用吧。

以前我们是这样写一个链接到首页的<a></a>代码的：

<a href=”http://www.bbon.cn”>Web Design Blog</a>

而现在我们要为这个代码元素<a>加上 rel属性。

<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design Blog</a>

上面的链接标记<a>包括rel=”home”属性，该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性，就为这个链接添加了具体的结构和意义。

hCard 微格式

hCard是一种微格式，用来发布个人，公司，组织，地点等详细的联系信息。它可以包含在(X)HTML，Atom，RSS等可扩展置标语言中。hCard使用vCard（RFC 2426）的属性和值来实现这些功能。

它可以使分析器（比如其他网站，Firefox的Operator插件）获得详细的信息，并通过别的网站或者地图工具进行显示，或者载入到地址簿等其他程序。

示例一

如下HTML代码：

<div>
    <div>Joe Doe</div>
    <div>The Example Company</div>
    <div>604-555-1234</div>
    <a href="http://example.com/">http://example.com/</a>
</div>

加入微格式后，成为：

<div class="vcard">
    <div class="fn">Joe Doe</div>
    <div class="org">The Example Company</div>
    <div class="tel">604-555-1234</div>
    <a class="url" href="http://example.com/">http://example.com/</a>
</div>

这里，正式名称（class=”fn”），组织（class=”org”），电话号码（class=”tel”）和url（class=”url”）分别用相应的class标示；同时，所有内容都包含在class="vcard"里。

示例二

这里是维基媒体基金会的联系方式，可以作为hCard的一个真实示例：

Wikimedia Foundation Inc.

200 2nd Ave. South #358

St. Petersburg, FL 33701-4313

USA

Phone: +1-727-231-0101

Email: info@wikimedia.org

Fax: +1-727-258-0207

加入微格式后，成为：

<div class="vcard">
    <div class="fn org">Wikimedia Foundation Inc.</div>
    <div class="adr">
        <div class="street-address">200 2nd Ave. South #358</div>
        <div>
            <span class="locality">St. Petersburg</span>,
            <span class="region">FL</span>
            <span class="postal-code">33701-4313</span>
        </div>
        <div class="country-name">USA</div></div>
    <div>
        Phone:
        <span class="tel">+1-727-231-0101</span>
    </div>
    <div>
        Email:
        <span class="email">info@wikimedia.org</span>
    </div>
    <div>
        <span class="tel">
            <span class="type">Fax</span>:
            <span class="value">+1-727-258-0207</span>
        </span>
    </div>
</div>

注意，在这个例子中，正式名称（class=”fn”）和组织（class=”org”）写在了一个属性中，表示这是一个组织，而不是个人。

在前端构建中微格式的意义

那么，微格式在实际应用中的意义和作用又是什么呢？微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：

1. 在爬取Web内容时，能够更为准确地识别内容块的语义；
2. 对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

总结： 可以对网站进行SEO优化，如果需要可以考虑。

参考资料

转载出处

什么是微格式及实例