根据连接关联的微文件格式 应用rel特性

2021-03-13 13:57 jianzhan

原文连接:http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part⑴-rel/

这篇文章内容做为第1篇详细介绍会关键集中化在根据连接关联的微文件格式,应用rel 特性。如今让大家刚开始吧。

根据连接的关联

rel 特性一般用来叙述连接之间的关联,也便是说目地详细地址 (href) 跟源(站点)之间的关联。绝大多数人将会十分熟习这个特性,由于他经常被用来叙述CSS的连接详细地址:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”/styles/main.css” />

另外,在这个标识中您可使用好几个 rel 值,就仿佛能够在 class 特性中应用好几个值1样。

告知我回家了的路

rel-home 微文件格式用来指明连接的目地详细地址是该站点的主页。这个微文件格式的主要目地是以便导航栏应用的,可是另外也为网页页面出示了站点构造的叙述信息内容。

留意: rel-home 现阶段还处在规范提议环节,这也就代表着他還是个变数。可是,既然转变自身便是互联网技术技术性的特点,我并不是很在乎这1点。

如今大家返回程序编写上面来……我在两种状况下会应用 rel-home 微文件格式。在我的 XHTML 编码的 <head> 一部分,我会加上:

<link rel=”home” href=”http://www.ablognotlimited.com/” title=”Home page” />

一样,任何指向主页的连接(比如在导航栏处,自然还可以包含文章正文中)都会被特定这个特性 rel="home"

<a href="http://www.ablognotlimited.com" rel=”home”>A Blog Not Limited</a>

这样做的益处

除出示词义的基础叙述,Opera 会全自动鉴别出文本文档<head>段中<link>的rel-home特性。Opera访问器会出示1个导航栏的专用工具条──假如开启的话──容许客户应用该专用工具条开展站内导航栏:

一样的,依据Mark Pilgrim的文章内容Dive Into Accessibility,rel-home 特性也会为文字方式的访问器出示更强劲的导航栏輔助,提高手机软件的无阻碍应用特点,比如文字方式访问器Links 和 Lynx都会检验该特性。

最终,rel-home 能够被Firefox额外组件 cmSiteNavigation专用工具条鉴别,会在专用工具条中显示信息1些导航栏輔助信息内容。现阶段,这个额外组件能够在FFFFFFFF 1.5–2.0版本号上应用,可是我如今应用FF 3.0,因此不可以协助出示截图了。FFFFFFFF 1.5–2.0版本号上应用,可是我如今应用FF 3.0,因此不可以协助出示截图了。

我和我的

一样,既然这是我的blog,而且rel可使用好几个特性值,因此,全部指向主页的连接也都被特定rel="me"的特性:

<a href="http://www.ablognotlimited.com" rel=”home me”>A Blog Not Limited</a>

依据微文件格式的详尽表明,rel="me"能够被应用在用来叙述从叙述别人的网页页面到另外一个一样叙述该人网页页面的超连接。

记牢了这1点,我把指向我社交媒体站点(例如,Flickr、Facebook、Twitter等)本人网页页面的连接上都加上了 rel="me"特性:

<a href="http://twitter.com/emilylewis" rel=”me”>Twitter</a>

益处

特性出示的词义叙述早已让我十分的令人满意了,在此以外,应用 rel-me 特性有愈来愈多的益处闪过出来,关键是应用在叙述XFN之间的关联上。

XFN(XHTML 朋友互联网的缩写)是1个用来叙述社交媒体关联(比如,朋友、家中、朋友等)的微文件格式。Google正在应用XFN来开发设计Social Graph API来协助互联网变得更为小区化,使的在任何网站上找寻盆友都变为1件十分非常容易的事儿。

一样的,有愈来愈多的“线上身份结合(online identity consolidation)”的服务应用XFN,包含 claimID 和 Plaxo’s Open Social Graph。

另外,很多的社交媒体互联网站点刚开始在她们的材料页连接中加上 rel="me",包含Flickr、Twitter、LinkedIn等。这些行動都在适用着“线上身份结合”:在任何应用别的身份的网页页面中,分散化的本人身份被再次结合在1起。(译注:好晦涩难懂,不容易翻)

我会在这个系列文章内容的第2一部分中更实际的来说述XFN。

归类 + 标识 = 让人激动的机构性

因为我对机构性非常的偏好(也由于全部十分COOL的孩子都这么做),我在blog中应用“标识”来相互配合“归类”作用。刚好有1个微文件格式是适用这个机构构造的:rel-tag。

给连接(<a>) 加上 rel="tag" 特性能够说明 该网页页面──或该网页页面的1一部分──是有关甚么的。rel-tag普遍的在blog中应用,作者一般应用标识来标明她们的文章内容,从而协助机构和归类她们的內容。

标准规定连接的目地详细地址 (href) 的URL中最终1一部分要包括“标识”的具体取值。这类连接的机构方法也被称作“标识室内空间(tagspace)”。

在 A Blog Not Limited blog上,我对全部的标识连接逗运用了这个微文件格式:

<a href="http://www.ablognotlimited.com/articles/tag/ExpressionEngine/” rel=”tag”>ExpressionEngine</a>

一样,针对我全部的归类连接:

<a href="http://www.ablognotlimited.com/articles/category/experiments/” rel=”tag”>Experiments</a>

这些事例表明在应用这些连接的网页页面中包括了叙述“ExpressionEngine”和“Experiments”的內容。另外,这些事例还表明“ExpressionEngine”和“Experiments”界定的标识室内空间可使用这些连接来精准定位。

益处

还必须多说吗?是的,由于我喜爱这么说:词义是这些微文件格式带给我最主要的益处。一样,在另外应用本文中叙述的别的微文件格式时,会带来更多的益处。

比如,Firefox的额外组件 Operator 会全自动发现 rel-tag 随后出示该标识开展左右文有关的检索,这些检索来自于Amazon、YouTube和Flickr这样的网站。下图便是 Operator 怎样应用我blog上的 rel-tag 特性的:

Technorati 出示 标识检索的服务,用来数据库索引这些应用标识的blog文章内容和內容。这会协助那些站点和blog开展散播,由于客户彻底能够根据浏览 Technorati的标识服务 来检索到这些被数据库索引的文章内容。blog检索模块 Icerocket 也适用 根据标识的检索.

License to Kill (With Semantics)

是的,我了解,十分烂 再次……

我应用的最终1个根据连接的关联微文件格式是rel-license。将会您早就经猜到了,这个微文件格式用来叙述內容的版权,应用在那些指向版权信息内容的连接(<a>)中(根据href值)。

当我刚开始“A Blog Not Limited”,做的第1件事儿便是获得1份Creative Commons的版权来维护我的內容。以后,在页脚一部分改动了版权申明,就包括了1条这样的连接,我为他加上了rel="license"特性:

<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/" title="Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported" rel=”license”>copyright</a>

益处

Yep,词义!以外的益处便是,一样有1个FF的额外组件能够鉴别rel-license:Tails Export。下图是Tails显示信息blog上的版权信息内容:

Creative Commons 在转化成版权标识的情况下也应用rel-license。

一样,Google和Yahoo!也出示根据rel-licensed內容过虑的检索:

  • Yahoo! Creative Commons Search
  • Google “Usage Rights” search

全面应用的益处

上面各自讲述了每一个微文件格式应用的益处,一样必须留意的也有1个全面的益处便是:CSS特性挑选器。

根据应用CSS特性挑选器,您能够为不一样rel特性的连接界定特殊的设计风格。比如,为特定rel="license"的连接加上1个标志:

a[rel~="license"]:before {content: url(copyright.png);}

自然,IEIEIEIE6不适用特性挑选器,我恨IE 6……要我说,大家就只为那些适用规范的访问器开发设计这些提高的设计方案,例如那些适用特性挑选器的。IEIEIEIE6不适用特性挑选器,我恨IE 6……要我说,大家就只为那些适用规范的访问器开发设计这些提高的设计方案,例如那些适用特性挑选器的。

拓宽阅读文章:为网页页面加上hCard微文件格式