链接大观 - 王朝网络宽屏版

在主页制作中，我们对什么最不陌生？链接！可以毫不夸张地说，链接是主页的灵魂，有了它，我们才可以在网络世界恣意畅游。而对于网页制作者来说，它看似简单却并不容易。在此，笔者就自己的经验对网页中的链接进行一个综合的介绍，以期让大家对其有一个全面而深入的理解。

对于链接在HTML中的写法，在这里就不用详述了，大家可以在许多初级教程中找到这方面的介绍。我们着重介绍以下几个方面：

一、链接的种类

链接有两种，一种是不同页面间的链接，这种最常见。另外一种则是页内链接，我们一般称为页内锚(achor)链。

页面之间的链接是用URL(United Resource Location:统一资源定位符)来表示，如果是同一个站点之间页面的链接，则可直接根据目录之间的关系来表达这种链接，而不必用“http://...”这样的形式。如在content目录下有一个HTML文件的链接链接到该站点与content目录同级的目录chat下的index.htm文件，链接则直接表示为:../chat/index.htm。如果你学过DOS命令诸如目录操作命令的话，相信对这种表示方法不会陌生，只不过是将“\”变为“/”。

而对于页内锚链，有些朋友可能会疑惑了，什么叫做页内锚链，有什么用呢？对此，我们以一个很实际的例子来看一看其用处：

如果一篇文章很长，并分为几个部分，文章前面一般都列有该文章的各要点，如果我们因要择其中一部分阅读而不停地拉动滚动条是不是费时而费神呢？页面锚链可以让你很方便地点击要点链接，从而直接阅读到该部分内容。

●定义“锚”

要用页内锚链，首先要定义这些所谓的“锚”，即用符号来标识文件中某部分的位置。这要用到HTML标记中一个很常见而又重要的属性:id(Identification：标识符)。用id可以来指代所属标记的HTML内容。其定义形式如下：

<Tag id=″...″>HTML内容</Tag>

如 <p id=″content″>.........</p>

这样，id content就表示了一个段落。

在同一HTML文件中，除了特殊用途外，id最好是唯一的。不然，锚链只会连接到第一个id所标识的内容。

●加锚链

定义好“锚”以后，将链接指向锚位置的链接形式如下:

<a href=″＃id″>....</a>,即以＃再加上id格式。

如:

..............

...第一章内容..

</Div>

...第二章内容..

</Div>

...第三章内容..

</Div>

●引用不同页面内的“锚”

可能有些朋友要问，以上加的锚链都是在同一个页面之间的，如果是一个页面中的锚链接到同站点或另一个网站的另一个页面中的锚怎么办？很简单,形式为:

如 <a href=″http://netschool.yesky.com/homepage/index.htm＃block1″>指向地址：http://netschool.yesky.com/homepage/index.htm文件的第一部分</a>

二、链接的相关属性

●用CSS样式类改变链接外观

在与网友们交流过程中，他们问到的有关链接的问题最多大概集中于：一些网站页面当鼠标移动时链接字会变颜色、字体、出现下划线等，看起来很精彩，是怎么做的呢？要用到程序吗？

答案：非也，链接的CSS可以解你之惑!

CSS（层叠样式单）它主要是用来定义主页内容相关标记的显示风格及排列等，可以针对不同的标记定义不同的样式类，并可以形成样式表文件供整个网站的主页文件调用，或者在某个主页中单独定义，这样，可实现在网站风格统一的前提下，而又各有变化，哲学中物质的统一性与多样性的对立统一之说可谓一语中的。在天极网的网页陶吧栏目(http://homepage.yesky.com)中有很多关于CSS的讲述，这里不再赘述，单讲链接的几个重要的CSS属性:

hover:当鼠标悬停在链接上方时

active:当点击链接时

visited：当点击链后

这样就构成点击链接的全过程：移动到链接上→点击→点击后，我们可以在样式表中定义三个不同的阶段链接的外观，形式如下:

<style>

.....

}

A:hover{

.....

}

A:active{

.....

}

A:visited{

.....

}

</style>

上面，其中A{...}的定义表示链接在正常状态下的显示，这样，我们就可以用不同的样式表CSS类型来确定一个站点或特定页面的链接显示特性。

以下是一个例子:

A {

font－size : 9pt;font－weight : normal;font－style : normal;color: ＃0066CC;text－decoration : none;

}

A:Hover {

font－size : 9pt;

font－weight : normal;

font－style : normal;

color: ＃0066CC;

text－decoration : underline;

}

A:Active{

font－size : 9pt;

font－weight : normal;

font－style : normal;

color:red;

text－decoration : none;

}

A:Visited {

font－size : 9pt;

font－weight : normal;

font－style : normal;

color: ＃0066CC;

text－decoration : none;

}

上面的例子中专门对链接标记定义了相应的样式类，并对链接的几种不同状态对链接字的字体、颜色、修饰(如加下划线)等也作了定义。

二、链接的相关属性

●关于target属性

在链接中，target属性最让人费解。

target属性表示链接在哪个游览器窗口打开。其取值有以下几种情况：

1._self：如<a href=″...″ target=″_self″>

该属性值表示在当前窗口打开所链接的文件，如果你不对这个属性值进行设置的话，则默认为该值。

2._blank

如果你想将所链接的文件在新开的窗口打开，就取该值。

3._parent

在讲这个属性之前，我们先要了解一下多帧结构与浮动帧。

多帧结构其实就是多个HTML在同一个浏览器窗口中同时显示，并将其分为多个小窗口，一个帧就是一个HTML显示区。这样，这些当前浏览器窗口就叫做这些子窗口的“父(parent)窗口”。在多帧结构设置时，每个帧有自己的名称，如:

</frameset>

在这个多帧结构中，帧名top、left、main代表着三个小窗口，parent即为当前多帧结构的父窗口。

而标记iframe所表示浮动帧的效果就如我们所说的画中画电视，它实际就是在当前窗口中内嵌一个HTML页面，而不像多帧结构一样，帧间内容相互分隔。这个内嵌页面所在的浏览器窗口就是它的parent，如HTML文件example.htm中有如下代码：

<p>以下是一个内嵌帧示例</p>。

这样，名为child的HTML页面内嵌在主页example.htm中，它的parent就是当前浏览器窗口。

由此，不难明白了，target属性的_parent取值即表示链接文件在其父窗口中打开。

4._top

此属性值意义与_parent类同。

5.特定窗体名，如target=″main″

了解了上述的多帧结构以后，我们知道，每个帧可以有自己的帧名即name属性，所以，我们可以指定链接的文件在指定名称的帧里打开。如target=″main″表示标记<a>所指向的文件在帧main里打开。

如果喜欢阅读人民日报网络版的朋友细心的话，可以发现，target的取值是各不相同的名称，如数字等，并且又不是在多帧结构里，为什么要设置target呢？有兴趣的话，请你不妨试几个例子效果有什么不同:

另外试一下

怎么样？前一个例子中，两个链接都是在同一个新开的窗口中打开，而后一例子则打开两个新窗口。说明了什么？特定的窗口名代表着新打开的浏览器窗口，所以，如果几个链接的target属性值都为特定的窗口名，那么就表示这些链接都在这个窗口中打开，不另开窗口。这样，就可很好地解决令人厌烦的点击链接，不停地新弹窗口占用系统资源的情况。

就笔者自己的经验来说，设定target值还另有妙用，请大家试一下:

与

并且1.htm中有一链接是关闭窗口的:

<a href=″javascript:window.close()″>关闭本窗口</a> //注：window.close()是调用window对象的close方法关闭本窗口。

结果是在你点击“关闭本窗口”时，在第二个例子中是不是出现“你查看的页正在试图关闭窗口，是否关闭本窗口？”的提示?而第一个例子则不会。

●给链接加上注释

这在平时使用中很常见，比如当前链接字比较多时，只截取其中的一部分，而当你的鼠标移动到链接字上时，就会出现一个小黄条提示，将所有的链接字显示出来。实际上利用链接的title属性即可实现。定义格式为：

如:<a href=http://homepage.yeksy.com/ title=″网页陶吧，国内最cool的主页教学站点″>网页陶吧</a>。

三、链接的另几种特殊情况

●链接地址形式为URL?para1=expr1＆para2=expr2...

这种情况多用在运行服务器端CGI或脚本程序(即URL所指的程序)时，需要将一些参数取值传给程序，程序再将这些参数如para1、para2等的值分解出来，这样可从客户端获得信息，实现动态交互功能，并能根据这些取值生成相应的页面，而不是我们所看到的呆板的静态页面。

●关于点击链接下载

朋友对点击链接下载文件等肯定不会陌生，实际上，对于链接的文件，如ZIP以及用户端无法识别的文件,都会提示用户下载。所以，与一般的链接没有区别，另外，有一点要申明的是，链接文件不一定都要是HTML文件。

如:<a href=″http://netschool.cpcw.com/homepage/cgi/cgi.zip″>点击此下载</a>

一些朋友常问点击链接听MP3音乐或看flash动画是怎么回事，实际也是将链接直接链接到这些文件，当只有你自己的机器上安装了相应的软件或控件时才不会提示下载而直接打开这些文件。

●链接为脚本语言语句

这种应用相信到过Yesky旧版网页陶吧的朋友很熟悉的，首页上的链接都为:

javascript:openHTML(....) 形式。

链接可以是脚本程序，其定义格式为:

脚本语言类型:程序语句;程序语句...

其中脚本语言类型不外乎两种:javascript与vbscript

其中程序语句包括单语句或函数引用。

如网页陶吧的例子:

下面定义一个函数，用来将链接的HTML文件在新浏览器窗口打开：

function openHTML(url)

{

var hWnd=window.open(url,″″,″toolbar=yes,scrollbars=yes,menubar=yes,width=690,height=480,left=20,top=5,status=yes″)

}

</script>

而在链接要引用这个函数时，可以写成

这样，点击时就会执行相应的脚本程序。

●链接为邮件

链接也可以是一个邮件，当点击链接时，自动打开你在浏览器中设置的收发邮件软件，其链接形式为:

mailto:收信人邮箱；subject：邮件主题，可略。

如<a href=″mailto:hero@cpcw.com?subject=谈一下主页制作″>与主持人联系</a>