详解链接的rel与target区别_经验交流-css教程-PHP中文网

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的意思其实就是当前文档，的默认目标就是_self，这个属性值一般来说是用不到的。_parent是使链接文档在父级窗口显示，这个属性值只在框架结构中使用，如果身本就是顶级框架，那么其作用与_self相同。_top同样是应用在框架中的，但是他的效果是清除框架来显示目标文档。这对于从框架结构转向无框架结构是很有作用的。

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

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

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

其中next与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只是用来使得网页的语义性更为完善。

魔珐星云

无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

下载