HTML 基础教程（四）

 

网页链接标记

链接标记的属性

链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称作url(Uniform Resource Locator：通用资源标示符)。在地址栏输入http://www.sina.com.cn然后回车，会打开新浪网站的主页面。可以看到，页面中有多个栏目，多条新闻等，最上方不同的栏目就是文字链接。 

链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是<a>标记。本站介绍的链接应用都是基于<a>标记基础上的。 

链接标记的属性  

属性  描述 

href  指定链接地址 

name  给链接命名 

title  给链接提示文字 

target  指定链接的目标窗口 

accesskey  链接热键

关于路径

每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。url—统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址之下，但是当创建网页时，不可能也不需要为每一个链接都输入完全的地址。我们只需要确定当前文档同站点根目录之间的相对路径关系。因此链接可以分为以下3种：

在了解这三种地址形式前先要理解另外两个概念：内部链接和外部链接:

内部和外部都是相对于站点文件夹而言，如果链接指向的是站点文件夹之内的文件，就是内部链接。如果链接指向站点文件夹之外的，就被称做外部链接。在添加外部链接的时候，将用到下面所讲的绝对地址；而添加内部链接的时候，将用到下面所讲的根目录相对地址和文件相对地址。 

下面分别介绍这3种链接：

1.绝对路径 

绝对路径为文件提供完全的路径，包括适应的协议，如http,Ftp,rtsp等。一般常见的有：

http://www.sohu.com

ftp://202.136.254.1

当链接到其它网站中的文件时，必须使用绝对链接。 

2.相对路径 

相对链接最适合网站的内部链接。只要是同一网站之下的，即使不在同一个目录下，相对链接也非常合适。文件相对地址是书写内部链接的理想形式。只要是处于站点文件夹之内，相对地址可以自由地在文件之间构建链接。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此这种书写形式省略了绝对地址中的相同部分。这样做的优点是：站点文件夹所在的服务器地址发生改变时，文件夹的所有内部链接(如果采用此种地址形式)都不会出问题。

相对链接的使用方法为： 

•如果链接到同一目录下，则只需输入要链接文档的名称。 

•要链接到下一级目录中的文件，只需先输入目录名，然后加" / "再输入文件名。 

•如链接到上一级目录中的文件，则先输入"…/ "，再输入目录名、文件名。 

3.根路径 

根目录相对地址同样适应于创建内部链接，但大多数情况下，不建议使用此种地址形式。它在下列情况下使用:

1.当站点的规模非常大，防置于几个服务器上时 

2.当一个服务器上同时放置几个站点时 

根目录相对地址的书写形式也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。根路径以" / "开始，然后是根目录下的目录名。

内部链接

所谓内部链接，指的是在同一个网站内部，不同的html页面之间的链接关系。在建立网站内部链接的时候，要考虑到使链接具有清晰的导航结构，使用户方便地找到所需内容的html文件。 

基本语法

<a href="File_name">链接文字</a> 

语法解释

通过href属性指定地址，File＿name为要链接文件的路径，"链接文字"为鼠标单击的文字内容。

设定链接的目标窗口

单击链接后，默认的浏览器窗口是原有窗口，我们可以指定这个链接打开的目标窗口，如新开窗口等。 

基本语法

<a href="File_name"  target="value">链接文字</a> 

语法解释

通过target定义目标窗口，value的取值如下所示 

链接的目标窗口属性  

属性值  描述 

_parent  在上一级窗口中打开。一般使用分帧的框架会经常使用 

_blank  在新窗口中打开 

_self  在同一个帧或窗口中打开，这项一般不用设置 

_top  在浏览器的整个窗口中打开，忽略任何框架

建立书签链接

在浏览页面的时候，如果页面的内容较多、页面过长，浏览的时候需要不断拖动滚动条，很不方便，如果要寻找特定的内容，就更加不方便。这时如果能在该网页或另外一个页面上建立目录，浏览者单击目录上的项目就能自动跳到网页相应的位置进行阅读，应该是件很方便的事，并且还可以在页面中设定诸如"返回首页"的链接。这就称为书签链接。

建立书签链接分为两步：一是建立书签，二是为书签建立链接。 

下面来制作一个包含网页设计三剑客内容的软件介绍页面，并为其中的每一个软件建立一个书签，这个书签就是随后将要跳转转的位置。也就是说，这个书签就确定了一个页面内部的链接导引依据。 

基本语法

<a  name="name">文字</a>

链接同一页面中的书签

基本语法

<a href="#name">文字链接</a> 

语法解释

name就是刚刚定义的书签名称。

链接到其它页面中的书签

在页面之间，也可以完成跳转到另一页面某一位置的过程。这需要指定好链接的页面和链接的书签位置。 

基本语法

<a href="index.jsp# name">文字链接</a> 

语法解释

index.jsp是要跳转到的页面路径，name是定义的书签名称。

外部链接

所谓外部链接，指的是跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。这种链接在一般情况下需要书写绝对的链接地址。 

制作外部链接的时候，使用url统一资源定位符来定位万维网信息，这种方式可以简洁、明了、准确地描述信息所在的地点。最常见的url格式是"http://"，其它的格式如下所示。 

服务  url格式  描述 

www  http://  进入万维网站点 

Ftp  ftp://  进入文件传输服务器 

News  news://  启动新闻讨论组 

Telnet  telnet://  启动Telnet方式 

Gopher  gopher://  访问一个Gopher服务器 

Email  mailto://  启动邮件

链接到外部网站

页面中的常用友情链接，经常是单击后可以访问别人的网站，达到互相交流信息的目的。下面就是制作链接到外部网站的方法。 

基本语法

<a href="http://">文字链接 </a> 

语法解释

"http://"后面写下的就是网站的地址

发送E-mail

在html页面中，可以建立E-mail链接。当浏览者单击链接后，系统会启动默认的电子邮件进行E-mail的发送。在windows系统中，如果用户设置了邮件软件，如Outlook,Outlook Express等，在浏览器中单击E-mail链接会自动打开新邮件窗口，地址栏会自动添加E-mail链接中的邮箱地址。 

基本语法

<a href="Mailto://a@b.c">文字链接</a> 

<a href="Mailto://a@b.c?subject=content">文字链接</a> 

<a href="Mailto://a@b.c?cc=a@b.c">文字链接</a> 

<a href="Mailto://a@b.c?bcc=a@b.c">文字链接</a> 

语法解释

其中a@b.c为邮件地址，后面的参数如下表所示 

邮件的参数  

参数   描述 

Subject  电子邮件主题 

cc  抄送收件人 

bcc  暗送收件人 

如果希望同时写下多个参数，则参数之间使用"＆"符号分隔，如： 

<a href="mailto://a@b.c?subject=content＆cc=a@b.c＆bcc=a@b.c">文字链接</a>

链接Ftp

Internet上资源丰富，通过文件传输协议Ftp，就可以足不出户地获得各种免费软件和其它文件。Ftp即"文件传输协议"。协议是使计算机与计算机之间能够相互通讯的语言。Ftp使文件和文件夹能够在Internet上公开传输。在某些情况下，您需要从网络计算机管理员处获得许可才能登陆并访问计算机上的文件。但是通常您会发现可以使用Ftp访问某个网络或服务器，而不需要拥有该计算机的帐户，也不必须是授权的密码持有人。这些匿名Ftp服务器可包含能够通过Ftp公开获得的广泛数据。 

基本语法

<a href="Ftp://">文字链接</a> 

语法解释

"ftp://"后面写下的就是Ftp主机的地址

链接Telnet

Telnet也是Internet上最主要和最广泛的应用之一，远程登陆Telnet指一台计算机远程链接到另一台计算机上，并在远程计算机上运行自己系统的程序，从而共享计算机网络系统的软件和硬件资源。 

基本语法

<a href="telnet://">文字链接</a> 

语法解释

"Telnet://"后面写下的就是Telnet站点的地址

链接到Gopher

在www出现之前，Gopher软件是Internet上最主要的检索工具，Gopher站点也是最主要的站点。在www出现后，Gopher失去了昔日的辉煌。尽管如此，今天Gopher仍很流行，因为Gopher站点能够容纳大量的信息供用户查询。 

基本语法

<a href="Gopher://">文字链接</a> 

语法解释

"Gopher://"后面写下的就是Gopher站点的地址

链接到News新闻组

New新闻组是由分布在世界各地的上千个新闻服务器组成，它能够随时更换消息，任何一条发送到新闻组服务器上的消息，在几分钟之后就能传遍全球。新闻组是个人向新闻服务器所张贴邮件的集合，一台计算机上可建立数千个新闻组。每一个浏览者几乎可以找到任何主题的新闻组。虽然某些新闻组是受到监控的，但大多数不是。对于受监控的新闻组，其拥有者可以检查张贴的邮件、提出问题，或删除不适当的邮件等。任何人都可以向新闻组张贴邮件。新闻组不需要成员资格或如入费用。 

基本语法

<a href="News ://">文字链接</a> 

语法解释

"News://" 后面写下的就是New服务器的地址。

下载文件

如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。 

基本语法

<a href="File_url">文字链接</a> 

语法解释

"File_url"代表文件所在的路径，可以写下相对路径，也可以写下绝对路径。

脚本链接

在链接语句中，可以通过脚本来实现html语言完成不了的功能。下面以JavaScript脚本为例说明脚本链接的使用。 

基本语法

<a href="JavaScript:…">文字链接</a> 

语法解释

在JavaScript:后面编写的就是具体的脚本

<html> 

<head> 

<body> 

<a href="JavaScript:window.close()">关闭窗口</a> 

</body> 

</html>

空链接

在链接中，可以通过#符号实现空链接。所谓空链接，是指指向链接后，鼠标变成手行，但单击链接后，仍然停留在当前页面。 

基本语法

<a href="#">文字链接</a>