• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 基于链接关系的微格式 使用rel属性

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含链接,rel属性等相关知识,佚名 希望在学习及工作中可以帮助到您

原文链接: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 属性也会为文本模式的浏览器提供更强大的导航辅助,提升软件的无障碍使用特性,例如文本模式浏览器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 属性的:

Operator Firefox Add-On

您可能想查找下面的文章:

  • CSS3绘制有活力的链接下划线
  • CSS定义超链接样式的顺序及四个伪类的用法示例介绍
  • css控制超链接(css超链接样式)
  • CSS控制链接显示状态的CSS伪类
  • 用CSS指定外部链接的样式代码
  • 超链接点击移动至上方以及点击过的css效果设置
  • css通过伪类来设置超链接样式附示例
  • css简单实现热点链接当鼠标悬停时出现白色的框
  • CSS实现超级链接需要通过双击后跳转
  • Css样式--字体样式和链接样式详解

相关文章

  • 2017-08-06IE6下Select元素被div等元素覆盖的解决办法
  • 2017-08-06前端设计师需要了解的9个问题
  • 2017-08-06css文件不能被正常载入的问题解决方法
  • 2017-08-06使用css3制作登录表单的步骤
  • 2017-08-06让div透明而里面的文字不透明的写法
  • 2017-08-06CSS中的几个伪元素使用介绍
  • 2017-08-06CSS去掉A标签(链接)虚线框的方法
  • 2017-08-06CSS 透明度属性
  • 2017-08-06CSS3对背景图片的裁剪及尺寸和位置的设定方法
  • 2017-08-06你对CSS布局中的Position了解程度有多少

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS hack大全之特殊符号的应用解决浏览器兼容性问题
    • 手机文本输入框的设计方法介绍(图文)
    • 纯CSS实现背景半透明文字不透明效果兼容IE6
    • 一款基于css3和jquery实现的动画显示弹出层按钮教程
    • CSS3 中的@keyframes介绍
    • CSS样式中大于号的使用及Css中处理继承方法
    • css中 中文字体相关知识汇总
    • 全面总结CSS代码的编写规范及优化建议
    • html css将表头固定的最直接的方法
    • 小标签大作用 CSS中zoom:1的使用方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有