前端HTML学习-（6）微格式

走马Ricardo
90 阅读4分钟

前言

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

微格式介绍

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

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

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

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

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

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

上面的链接标记a包括rel=”homepage”属性，该属性显示链接的目标页面是该网站的首页。

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

hCard 微格式

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

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

例如以下代码

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

其他常用的hCard属性包括：

  • bday – 生日
  • email
  • honorific-prefix -（西式）名字前的尊称，例如：博士（Dr.）、牧师（Rev.）等，在东方会放在名字的后方。
  • honorific-suffix -（西式）名字后的尊称，一般都是封衔，例如：太平绅士（JP）、大紫荆勋章（GBM），一般详列在名字的最后方。
  • logo
  • nickname – 昵称、爱称或外号。西方人的名字一般都有简写，有时这些昵称或外号就用来分辨同名的人。例如：William “Bill” Gates 中间的”Bill”。
  • note
  • photo
  • post-office-box

Geo也可以被包含在hCard中，表示某个地址的坐标。Geo是一种在HTML和XHTML中标记WGS84地理坐标（经度，纬度）的微格式。尽管属于“草案”，其格式是稳定的并已经被使用。它还可以作为hCard微格式的一个子集。

以上摘自:维基百科

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

总结

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

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

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

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

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

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

1.在爬取Web内容时，能够更为准确地识别内容块的语义;

2.对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。

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

avatar
文章
阅读
粉丝