`

A Link 链接的rel、target属性详解

阅读更多

    在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。一般这里是不需要改动的    

 

     rel 和 rev 属性可以同时在 <a> 标签中使用。二者均描述了href所指定文档与当前页面的关系.

rel (relationship) 属性规定了从源文档到目标文档的关系。rev (reverse) 属性规定了从目标文档到当前文档的反向关系。

浏览器可以使用它们改变锚内容的外观,或者自动构建文档浏览菜单。其他工具也可以使用这些属性构建特殊的链接集合、目录和索引等。

  

 

    关于target="_blank"去留的问题在网上已经被反复争议很多次了。有的说要留,有的说要去掉。主张留的一方主要是考虑到target="_blank"的属性目前来讲还没有一个好的方式来解决,而主张去的一方则拿出了rel与JS的解决方案。target="_blank"是否的存在是否有必要我想目前还有很多正处在一种盲区。我查阅了相关的文献,发现其实情况并非是我们所想的那样,事实上target="_blank"并非是不符合标准的,而用rel与JS的解决方案也是没有必要的,因为这是个误区,只要我们了解了rel与target的真正含义我们就清楚了其实这里本不应存在争议。下面我将我通过查阅文献所得到的知识与大家分享,我们先来了解一下target与rel的含义:

 

 

      target ,允许指定在什么位置显示已经选择的超链接内容。也就是说链接的内容将在什么样的窗口被显示。target 的属性值有四个保留的名称,分别是:_blank,_self,_parent,_top。其中_blank的意思是浏览器总在一个新打开的、未命名的窗口中载入target="_blank"链接的文档。这里大家也许会很不理解“未命名”是什么意思。事实上target 是可以给新打开的窗口赋一个ID,例如:target="name" 这就表明通过target="name"链接载入的文档将会在一个叫"name"的窗口显示。如果没有ID为"name"的窗口,那么浏览器就会新建一个名为"name"的窗口来显示链接文档。如果当前窗口的ID就是"name"那么这个链接文档就会在当前的窗口中替换原有的内容显示出来。而_self的意思其实就是当前文档,<a>的默认目标就是_self,这个属性值一般来说是用不到的。_parent是使链接文档在父级窗口显示,这个属性值只在框架结构中使用,如果身本就是顶级框架,那么其作用与_self相同。_top同样是应用在框架中的,但是他的效果是清除框架来显示目标文档。这对于从框架结构转向无框架结构是很有作用的。

 

     现在我们知道了,target 是一目标显示的属性与浏览器密切相关的。那么rel又是什么呢, 为什么很多人把他当作是target 的替代属性呢?下面我们就来认识一下rel。其实不只有一个rel还有一个与之对应的属性叫rev,这两个属性的意思分别是:从源文档到目标文档的关系;从目标文档到源文档的关系。这里的源文档可以理解为链接所处在的当前文档,而目标文档也就是这个链接将要打开的文档。这下我们应该清楚了,其实rel与rev是一种文档之前的链接关系,而并非是与浏览器相关的如何显示目标文档的属性。

  那么rel与rev有哪些关系呢?下面将一一列取并解释其中的含义:



        next,链接到下一个文档;
   prev,链接到前一个文档;
   head,链接到集合中的顶级文档;
   toc,链接到集合的目录;
   parent,链接到源上面的文档;
   Child,链接到源下面的文档;
   index,链接到此文档的索引;
   glossary,链接到此文档的术语表;

 

其中next与prev是一组。表明了当前文档与目标文档之前的关系是同级的关系,可以写成这样

<a href="movie_002.htm" rel=next rev=prev>

 

     head与toc可以形成一个组合,表示者是由目录链接到最终的文档,或是由文档链接到目录。parent与child是一组,表示着由当前的文档链接到父级文档或是子级文档。而index与glossary可以与head分别组合,形成由文档到索引,或是由索引到文档;文档到术语表或是术语表到文档。

 

 

      也许这样讲可能还是不很清楚,下面举个例子:我这里整理了一个电影文档资源,那么我需要对这些资源进行分类,我把电影分成:武侠片、战争片、爱情片、恐怖片、纪录片。那么我在电影根目录需要链接到下面的子类的时候那么链接的关系应该是:rel=child rev=parent ,而如果当前是武侠片的频道页,我需要转爱情片频道或是其它频道时,那么链接关系就应该是:rel=next rev=prev,当我们由一个武侠片链接到“卧虎藏龙”这部电影的文档时链接的关系应该是:rel=head rev=toc,当由“卧虎藏龙”链接到索引的时候链接关系又变成了:rel=index rev=head。

 

 

    由于目前的CSS还不能抓取rel与rev的属性值,所以没有办法给不同关系的链接提供不同的样式,所以现在rel与rev只是用来使得网页的语义性更为完善。

 

另:

css樣式的rel屬性:

rel属性用于定义连接的文件和html文档之间的关系。rel=stylesheet指定一个固定或首选的样式而rel="alternate    stylesheet"定义一个交互样式。固定样式在样式表激活时总被应用。

链接标签a的rel屬性

超级链接<a>标记代表一个链接点,是英文anchor的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<a>标记的基本语法结构是:     
   <a     
   class=type     
   id=value     
   href=reference     
   name=value     
   rel=same|next|parent|previous     
   rev=value     
   target=window     
   style=value     
   title=title     
   onclick=function     
   onmouseout=function     
   onmouseover=function>    </a>     
     从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?!     
     其中class和id选项:用于设定链接点所属的类型和分配的id号,通常不加以设定。最常用的两个参数是href和name。其中href是hypertext    reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。    链接到的文件也分为几种情况:如果为html文件,则在当前浏览器中直接打开;如果为可执行文件,则直接执行或下载,我们提供下载的文件就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。     
   rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。     
   rev:则用于设定反向链接。     
   target:是在采用帧窗口的情况下设定链接到哪一个窗口,还有target="_bank"是表示新开一窗口打开网页。     
   title:用于设定链接点被选到时显示的标题。     
   onclick:对应于一个事件,当链接点被点击后将触发这个事件,执行对应的子程序。     
   onmouseover:与onclick类似,对应的事件在鼠标移到链接点上时被触发。     
   onmouseout:对应的事件在鼠标移出镇接点后被触发。     
   举几个例子:    <a    href=http://www.blue1000.com/article/"index.htm">回到主页</a>     
   <a    href=http://www.blue1000.com/article/"sound.wav">播放语音文件</a>     
   <a    href="javascipt.open()">执行对应的程序</a>     
   <a    herf="document.doc">打开对应的文档进行加工</a>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics