微格式

最新推荐文章于 2023-12-27 20:34:11 发布

@星城

最新推荐文章于 2023-12-27 20:34:11 发布

阅读量737

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44624386/article/details/107954866

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是微格式？

是以现成、流行的web技术如高度语义化的XHTML来一致地表达、传递和存储具有一定普遍形式和用途的数据结构。

微格式（Microformat），是通过语意相关让内容人机可读。网页上的允许的微格式数据包括事件、人物、地点等，它可以被其他的软件检测到，并提取出相应的信息，以及对信息进行索引、搜索、跨平台的参考，把这些信息以其他形式重复使用或组合。

背景介绍

由于HTML中缺少相应的元素，很难突出显示人、地点或日期等类型的信息。为了解决这个问题，有一组开发人员决定开发一套标准的命名约定盒标记模式来表示这些数据。这些命名约定基于vCard（电子名片）和iCalendar（日历数据交换）等现有的数据格式，现在称为微格式（microformat)。

microformat定义

建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式（microformats.org官方定义）。是把语义嵌入到HTML以便有助于分离式开发而制定的一些简单约定，是兼顾人机可读性设计的数据表达方式，对Web网页进行语义注解的方法。

微格式在实际应用中的意义和作用又是什么呢？

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

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

简单的微格式的应用

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

<a href=”http://www.baidu.cn”>百度</a>

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

<a href="www.baidu.com"  rel="homepage">百度</a>

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

hCard 微格式

hCard 是一种微格式，通常应用在 HTML 等语言中，主要用于组织并标记网页中的联络信息。hCard 直接采用 vCard 的属性名称作为自身的标记规则，这意味 hCard 与 vCard 有着天生的兼容性。这些特性令它成为最受关注的微格式应用。

和其它微格式一样，hCard 对网页的浏览者是完全透明的。hCard 使用 HTML 标签的 class 属性来对数据进行标记。有时，当 HTML 文档中现有的标签不足以进行细致的标记时，可能需要增加额外的标签（通常是不影响网页外观的 span 或 div 标签）。关于在网页中添加 hCard（或将 vCard 转换成 hCard）的具体方法，我不打算在此赘述，因为网上已经有了非常详尽的参考资料，我会将它们列在本文的末尾。

在何处添加 hCard

在网页的什么地方添加 hCard 呢？其实从它的用途可以看出，网页中凡是涉及到个人、网站或公司的联系信息都可以采用 hCard 来进行标记。

以 CSS魔法的首页为例，涉及此类联系信息的页面元素有站点标题、“关于站长”、“友情链接”三块区域，我们就可以分别以网站、站长、朋友为主体单独设置 hCard。

实例一
没有加微格式的代码如下：

<div>
        <div>Jonk</div>
        <div>The Example Company</div>
        <div>600-553-1234</div>
        <a href="http://baidu.com">百度</a>
    </div>

加了微格式的代码如下：

<div class="vcard">
        <div class="fn">Jonk</div>
        <div class="org">The Example Company</div>
        <div class="tel">600-553-1234</div>
        <a class="url" href="http://baidu.com">百度</a>
    </div>

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

实例二

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>

其他常用的hCard属性包括：

bday– 生日；email；honorific-prefix-（西式）名字前的尊称，例如：博士（Dr.）；honorific-suffix -（西式）名字后的尊称，一般都是封衔，例如：太平绅士（JP）、大紫荆勋章（GBM）；logo；nickname – 昵称、爱称或外号。；note

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

vCard/VCF

在讨论 hCard 之前，有必要先介绍一下 vCard。

vCard 是电子名片的文件格式标准，它可以存储联系人的姓名、公司名称、职位、电话、地址、电子信箱、网站等信息。vCard 的文件扩展名通常为 .VCF，一个简单的 VCF 文件看起来通常是这个样子的：

BEGIN:VCARD
VERSION:2.1
N:Michael;Jackson
TEL:13912345678
END:VCARD

虽然对普通网友来说，VCF 文件似乎并不常见，但事实上它已经在众多领域得到了广泛的支持和应用。

我第一次接触到 VCF 文件是在整理手机通讯录时。当时我需要将手机中的通讯录转移到新手机中，我下载并试用了一些相关的工具软件，比如 PC 端手机管理软件 NOKIA PC Suite 与 Oxygen Phone Manager、通讯录管理软件 Outlook/Outlook Express、手机端通讯录备份工具 SmartVCard 等等。我发现所有这些软件都“不约而同”地支持 VCF 格式，NOKIA 智能手机甚至原生支持在手机端导入/导出 VCF 文件。

为什么要使用 hCard

你可能会问，既然 hCard 对网页的浏览者是完全透明的，那我们为什么又要费神费力地在网页中添加 hCard 呢？

目前看来，这似乎是一件费力不讨好的事情，因为 hCard 等微格式尚未得到浏览器和终端设备的良好支持。但是一旦这些不足得到了改善，hCard 就会为我们的数字生活带来极大的便利。来看几个理想中的例子：

当我用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息。
手机浏览器还可以将页面中的 hCard 导出为 VCF 文件，我将 VCF 文件用蓝牙传输到同事的手机上，他们也轻松保存了这些联系信息，同时也可以方便地同步到电脑上的通讯录软件中。
更令我惊喜的是，手机浏览器识别出了 hCard 中的地理位置信息（经纬度），并可将此信息传递给手机内的 GPS 导航软件，这样连出行道路都不需要我四处打听了！
这些应用看起来似乎不错吧？其实这些情景离我们已经越来越近了，目前 hCard 已经有了一些可行的应用流程。