DDR爱好者之家

基于链接关系的微格式 使用rel属性
站长资源 2024/11/24 佚名
70 1538
DDR爱好者之家 Design By 杰米

原文链接：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浏览器会提供一个导航的工具条──如果启用的话──允许用户使用该工具条进行站内导航：
基于链接关系的微格式 使用rel属性

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

最后，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，包括 claimID 和 Plaxo’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 属性的：

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

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显示博客上的版权信息：

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

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

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

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

全面使用的好处

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

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

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

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米