`

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>

分享到:
评论

相关推荐

    a标签样式 和 a标签属性 .docx

    &lt;a href="http://example.com" title="Example Link" target="_blank" rel="noopener noreferrer" accesskey="x"&gt;Visit Example&lt;/a&gt; ``` ### 总结 通过对A标签样式的理解和掌握,以及对其属性的熟悉,我们可以更好...

    JS tree菜单详解

    ### JS Tree菜单详解 在软件开发尤其是Web应用开发过程中,树型菜单是非常常见的数据组织与展示方式之一。本文将详细介绍两种流行的JavaScript树型菜单插件:`dTree` 和 `xTree`,并深入探讨它们的功能、使用方法及...

    HLML标签详解.pdf

    36. `&lt;a&gt;`: 创建超链接,`href`属性指定链接目标,`target`属性定义打开方式,`rel`和`rev`用于描述链接关系,`accesskey`定义热键,`shape`和`coords`用于定义图像映射。 37. `&lt;a&gt;`的`mailto:`协议: 创建邮件链接,...

    详解js中构造流程图的核心技术JsPlumb.docx

    &lt;link href="path/to/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet"/&gt; &lt;script src="path/to/jsPlumb-master/dist/js/jquery.jsPlumb-1.7.5.js"&gt;&lt;/script&gt; ``` ##### 2. 定义全局变量 接下来,...

    PHP实现把文本中的URL转换为链接的auolink()函数分享_.docx

    // 输出: A link: &lt;a href="http://example.com/?param=value#anchor" rel="external nofollow"&gt;http://example.com/?param=value#anchor&lt;/a&gt;. ``` ##### 示例2: 添加自定义属性 ```php $str = '...

    简单html例子

    ...它通过一系列的标签来定义文本、图像和其他...- `&lt;a&gt;` 标签用于创建指向QQ聊天的链接,虽然使用了非标准的属性 `atarget` 和 `href` 值中包含的特殊符号,但在实际应用中,正确的写法应为 `&lt;a target="_blank" href=...

    Html标签大全.txt

    - **属性详解**: - `href`:指定链接的目标地址。 - 示例:`&lt;a href="http://www.example.com"&gt;` - `target`:决定链接打开的方式。可以设置以下几种值: - `_blank`:新窗口打开(默认行为) - `_self`:在...

    jadeDemo例子

    多个属性可以连续书写,如`a(href="#", target="_blank")`。 4. **行内元素**:如果元素只包含一个单词或短语,可以省略`&gt;`,如`a(href="#") 链接文本`。 ### 三、Pug示例 在“jadeDemo”中,可能包含如下基本结构...

    jQuery 1.4实用技巧

    此代码使用 `[rel$="external"]` 选择器来定位具有 `rel` 属性并以 `"external"` 结尾的 `&lt;a&gt;` 标签,当点击这些链接时,它们将在新窗口中打开。 #### 四、检测浏览器 在 jQuery 1.4 版本中,`$.support` 替代了...

    jsplumb-js包.zip

    6. **更新与删除**:根据需要,可以动态更新连接的属性,或者删除已存在的连接。 ### 示例代码 ```html &lt;!DOCTYPE html&gt; &lt;link rel="stylesheet" href=...

    Web前端阶段考试.docx

    - `rel` 属性用于指定当前文档与被链接文档的关系,在这里应为 `stylesheet`。 - 正确答案 `D` 使用了正确的语法来引入外部样式表。 ### 7. CSS选择器的使用 - **ID选择器与伪类的选择**: - ID 选择器以 `#` ...

    HTML5常用方法

    &lt;link rel="stylesheet" href="styles.css"&gt; &lt;link rel="icon" href="img/icon.png"&gt; ``` #### 三、Blockquote标签 - **用途**:定义长引用文本。 - **特点**: - 浏览器通常会将其内容以等宽字体显示,并自动...

    javascript实现动态导入js与css等静态资源文件的方法.docx

    - 根据资源类型设置相应的元素类型(`&lt;script&gt;` 或 `&lt;link&gt;`)及其属性(如 `type`、`charset`、`rel`)。 5. **监听资源加载事件**: - 使用 `addEventListener` 或 `attachEvent` 添加事件监听器,以便在资源...

    BlackBerry HTML参考手册

    - `alink`:活动链接的颜色。 - `vlink`:访问过的链接的颜色。 - `link`:未访问过的链接的颜色。 ##### 13. ` ` - **用途**:定义换行符。 - **属性**:无特定属性。 ##### 14. `&lt;button&gt;` - **用途**:...

    HTML命名空间问题

    &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt; ``` 通过以上几点的介绍,我们可以看出,虽然XHTML 1.0相对于HTML 4.01来说更加严格,但在实际开发过程中遵循这些规则有助于创建更高质量、更...

    jsplumb 流程图

    &lt;link href="jsplumb/dist/css/jsplumb.min.css" rel="stylesheet" /&gt; &lt;script src="jsplumb/dist/js/jsplumb.min.js"&gt;&lt;/script&gt; &lt;!-- 添加你的元素 --&gt; var instance = jsPlumb.getInstance(); ...

    详解bootstrap导航栏.nav与.navbar区别

    &lt;a href="#" rel="external nofollow" class="nav-link"&gt;1&lt;/a&gt; &lt;a href="#" rel="external nofollow" class="nav-link"&gt;2&lt;/a&gt; &lt;a href="#" rel="external nofollow" class="nav-link"&gt;3&lt;/a&gt; ``` 在...

    html语法概述和各个标签的说明

    - **示例用法:** `&lt;link rel="stylesheet" href="styles.css"&gt;` ##### 5. `&lt;isindex&gt;` 标签 - **用途:** 此标签表示文档是一个网关脚本,用于接收用户输入进行搜索。此标签已过时,不推荐使用。 - **示例用法:**...

    web的开发基础

    ### Web开发基础知识点详解 #### 一、HTML (超文本标记语言) 1. **HTML简介** - **定义**:HTML是一种标记语言,用于创建网页。它的全称是Hypertext Markup Language,即超文本标记语言。 - **特点**: - 文件...

Global site tag (gtag.js) - Google Analytics