死亡是一座永恒的灯塔

0%

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

微格式

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

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

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

实例

简单的微格式

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

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

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

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

1
<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代码:

1
2
3
4
5
6
<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>

加入微格式后,成为:

1
2
3
4
5
6
<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的一个真实示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
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

加入微格式后,成为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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优化,如果需要可以考虑。

参考资料

什么是微格式及实例

版权声明:本文为CSDN博主「deng131」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/deng131/article/details/83632737

坚持技术分享,您的支持将鼓励我继续创作!