美文网首页Web前端让前端飞Web前端之路
什么是微格式?在前端构建中应该考虑微格式吗?

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

作者: 与其感慨路难行 | 来源:发表于2017-08-09 21:34 被阅读1268次

    大家好,我是IT修真院深圳分院第02期学员,一枚正直善良的web程序员。

    今天给大家分享一下,修真院官网css任务15,深度思考中的知识点——什么是微格式?在前端构建中应该考虑微格式吗?

    1.背景介绍

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

    2.知识剖析

    microformat定义

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

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

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

    1、在捉取Web内容时,能够更为准确地识别内容块的语义;

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

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

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

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

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

    hCard 微格式

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

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

    其他常用的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。

    3.常见问题

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

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

    4.解决方案

    来看几个例子:

    •当我用手机浏览某公司的网站时,手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式,手机浏览器很聪明地提示我“是否保存到通讯录”,于是我很经松地保存了我所需要的信息。

    •手机浏览器还可以将页面中的 hCard 导出为 VCF 文件,我将 VCF 文件用蓝牙传输到同事的手机上,他们也轻松保存了这些联系信息,同时也可以方便地同步到电脑上的通讯录软件中。

    此外,Firefox 的 Operator 扩展还提供了一些针对微格式的在线应用,比如“使用 Google 地图查找”、“添加至雅虎通讯录”等等,有效地丰富了 hCard 的应用范围。

    5.编码实战

    6.扩展思考

    说到“微格式”,有人力捧,有人质疑,你是如何看待的呢?

    7.参考文献

    参考一:什么是微格式及经典实例演示_网页设计

    参考二:百度百科

    参考二:为网页添加hCard微格式

    8.更多讨论

    大家知道的微格式或者用过(遇到过)的微格式有哪些?

    9.视频资料


    什么是微格式_腾讯视频

    PPT

    今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

    下期不见不散~

    相关文章

      网友评论

        本文标题:什么是微格式?在前端构建中应该考虑微格式吗?

        本文链接:https://www.haomeiwen.com/subject/hpiqrxtx.html