基于链接关系的微格式 使用rel属性

所属分类: 网页制作 / CSS 阅读数: 1008
收藏 0 赞 0 分享

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

这篇文章作为第一篇介绍会主要集中在基于链接关系的微格式,使用rel 属性。现在让我们开始吧。

基于链接的关系

rel 属性通常用来描述链接之间的关系,也就是说目的地址 (href) 跟源(站点)之间的关系。大部分人可能非常熟悉这个属性,因为他常常被用来描述CSS的链接地址:

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

此外,在这个标记中您可以使用多个 rel 值,就好像可以在 class 属性中使用多个值一样。

告诉我回家的路

rel-home 微格式用来指明链接的目的地址是该站点的首页。这个微格式的首要目的是为了导航使用的,但是同时也为页面提供了站点结构的描述信息。

注意: rel-home 目前还处在标准提案阶段,这也就意味着他还是个变数。但是,既然变化本身就是互联网技术的特性,我不是很在意这一点。

现在我们回到编程上面来……我在两种情况下会使用 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浏览器会提供一个导航的工具条──如果启用的话──允许用户使用该工具条进行站内导航:
Opera Navigation Toolbar

同样的,根据Mark Pilgrim的文章Dive Into Accessibility,rel-home 属性也会为文本模式的浏览器提供更强大的导航辅助,提升软件的无障碍使用特性,例如文本模式浏览器LinksLynx都会检测该属性。

最后,rel-home 可以被Firefox附加组件 cmSiteNavigation工具条识别,会在工具条中显示一些导航辅助信息。目前,这个附加组件可以在FFFFFFFF 1.5–2.0版本上使用,但是我现在使用FF 3.0,所以不能帮助提供截图了。FFFFFFFF 1.5–2.0版本上使用,但是我现在使用FF 3.0,所以不能帮助提供截图了。

我和我的

同样,既然这是我的博客,并且rel可以使用多个属性值,所以,所有指向首页的链接也都被指定rel="me"的属性:

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

根据微格式的详细说明rel="me"可以被使用在用来描述从描述某人的页面到另一个同样描述该人页面的超链接。

记住了这一点,我把指向我社交站点(比如,Flickr、Facebook、Twitter等)个人页面的链接上都添加了 rel="me"属性:

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

好处

属性提供的语义描述已经让我非常的满意了,在此之外,使用 rel-me 属性有越来越多的好处浮现出来,主要是使用在描述XFN之间的关系上。

XFN(XHTML 好友网络的缩写)是一个用来描述社交关系(例如,好友、家庭、同事等)的微格式。Google正在使用XFN来开发Social Graph API来帮助网络变得更加社区化,使的在任何网站上寻找朋友都变成一件非常容易的事情。

同样的,有越来越多的“在线身份集合(online identity consolidation)”的服务使用XFN,包括 claimIDPlaxo’s Open Social Graph

此外,大量的社交网络站点开始在他们的资料页链接中添加 rel="me",包括Flickr、Twitter、LinkedIn等。这些行动都在支持着“在线身份集合”:在任何使用其他身份的网页中,分散的个人身份被重新集合在一起。(译注:好晦涩,不会翻)

我会在这个系列文章的第二部分中更具体的来讲述XFN。

分类 + 标签 = 令人兴奋的组织性

由于我对组织性特别的偏好(也因为所有非常COOL的孩子都这么做),我在博客中使用“标签”来配合“分类”功能。恰恰有一个微格式是支持这个组织结构的:rel-tag

给链接(<a>) 添加 rel="tag" 属性可以表明 该网页──或者该网页的一部分──是关于什么的。rel-tag广泛的在博客中使用,作者通常使用标签来标注他们的文章,从而帮助组织和分类他们的内容。

规范要求链接的目的地址 (href) 的URL中最后一部分要包含“标签”的实际赋值。这种链接的组织方式也被称作“标签空间(tagspace)”。

在 A Blog Not Limited 博客上,我对所有的标签链接逗应用了这个微格式:

<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 如何使用我博客上的 rel-tag 属性的:

Operator Firefox Add-On

Technorati 提供 标签搜索的服务,用来索引这些使用标签的博客文章和内容。这会帮助那些站点和博客进行传播,因为用户完全可以通过访问 Technorati的标签服务 来搜索到这些被索引的文章。博客搜索引擎 Icerocket 也支持 基于标签的搜索.

License to Kill (With Semantics)

是的,我知道,非常烂 继续……

我使用的最后一个基于链接的关系微格式是rel-license。可能您早已经猜到了,这个微格式用来描述内容的版权,使用在那些指向版权信息的链接(<a>)中(通过href值)。

当我开始“A Blog Not Limited”,做的第一件事情就是获取一份Creative Commons的版权来保护我的内容。之后,在页脚部分修改了版权声明,就包含了一条这样的链接,我为他添加了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,语义!之外的好处就是,同样有一个FF的附加组件可以识别rel-license:Tails Export。下图是Tails显示博客上的版权信息:

Tails Export Firefox Add-On

Creative Commons 在生成版权标记的时候也使用rel-license

同样,Google和Yahoo!也提供基于rel-licensed内容过滤的搜索:

全面使用的好处

上面分别讲述了每个微格式使用的好处,同样需要注意的还有一个全面的好处就是:CSS属性选择器

通过使用CSS属性选择器,您可以为不同rel属性的链接定义特定的风格。例如,为指定rel="license"的链接添加一个图标:

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

当然,IEIEIEIE6不支持属性选择器,我恨IE 6……要我说,我们就只为那些支持标准的浏览器开发这些增强的设计,比如那些支持属性选择器的。IEIEIEIE6不支持属性选择器,我恨IE 6……要我说,我们就只为那些支持标准的浏览器开发这些增强的设计,比如那些支持属性选择器的。

延伸阅读:为网页添加hCard微格式

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多