Skip to content

微格式

经典真题

  • 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式介绍

所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。

具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾 HTML 文档的人机可读性，相当于对 Web 网页进行了语义注解。

talk is cheap，show me code

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

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

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

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

通过上面的代码，我们可以发现，多了一个 rel 属性。这个 rel=”home” 属性显示链接的目标页面是该网站的首页。

通过为已有的链接元素添加语义化属性，就为这个链接添加了具体的结构和意义。

就这？

No、No、No，我们再去微格式的官网瞅一瞅：https://microformats.org/

官网对微格式是这么介绍的：

Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content.

微格式基于简单的标记约定，使您能够向web内容添加有意义的结构。

One of the key principles of microformats, is to privilege human readable content. This means that you should think first and foremost of your content design being readable and accessible to web viewers.

微格式的一个关键原则是赋予人类可读内容特权。这意味着您应该首先考虑内容设计的可读性和可访问性。

Using the most appropriate HTML elements and applying structured class names to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools.

通过使用最合适的HTML元素并将结构化类名应用到标记中，您可以生成人类观众可以清楚理解的内容，并通过自动化程序和其他在线工具以结构化方式使用这些内容。

But the point is that you shouldn't have to go out of your way to produce such machine friendly markup - microformats make it easy to integrate this greater degree of structure into your websites, without the overhead of having to learn complicated new languages or formats.

但关键是，你不应该不遗余力地制作这样的机器友好型标记——微格式可以轻松地将这种更高程度的结构集成到你的网站中，而无需学习复杂的新语言或格式。

正如前面所介绍的，微格式就是为了兼顾 HTML 文档的人机可读性，在标签中添加的语义注解。

那好，那么我们以后书写所有的 HTML 代码，都要这样书写注解么？

并不是，否则人都傻了。微格式一般用于标记人员、组织、事件、地点、博客帖子、产品、评论、简历、食谱等的 HTML。

例如：

Mark-up your contact info with h-card, link to other profiles with rel="me"

使用 h-card 标记您的联系信息，使用 rel=“me” 链接到其他个人资料

Mark-up your blog with h-entry.

用 h-entry 标记你的博客。

这里我们以 h-card 为例。

h-card 是一种微格式，用来发布个人，公司，组织，地点等详细的联系信息。 它可以使分析器（比如其他网站，Firefox 的 Operator 插件）获得详细的信息，并通过别的网站或者地图工具进行显示，或者载入到地址簿等其他程序。

例如，没有加入 h-card 微格式时，我们的 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" 里。

再例如，我们用一个维基媒体基金会的联系方式，来作为 h-card 微格式实例。

加入 h-card 微格式之前的信息内容如下：

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”）写在了一个属性中，表示这是一个组织，而不是个人。

这个时候，有的小伙伴就要提问了，这些 h-card 里面的属性名是固定的么？

没错，常用的 h-card 属性还包括：bday（生日）、email（邮箱）、tel（电话）、nickname（昵称）等。

目前已具备完整规范的微格式还包括：hCard、hCalendar、XOXO、XFN、VoteLinks 和 3 个 “rel-” 的微格式：rel- license、rel-nofollow 和 rel-tag。

至于每一种微格式的规范（里面有哪些属性）是什么，我们可以在官网进行查阅。

例如： h-card 的规范就可以参阅：https://microformats.org/wiki/h-card

真题解答

  • 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

参考答案：

所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。

具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾 HTML 文档的人机可读性，相当于对 Web 网页进行了语义注解。

采用微格式的 Web 页面，在 HTML 文档中给一些标签增加一些属性，这些属性对信息的语义结构进行注解，有助于处理 HTML 文档的软件，更好的理解该 HTML 文档。

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

微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情：

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

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

-EOF-