3.3 链接标签

链接（Link），全称为超文本链接，也称为超链接，是HTML的一个很强大和非常有价值的功能。它可以实现将文档中的文字或图像与另一个文档、文档的一部分或一幅图像链接在一起。一个网站是由多个页面组成的，页面之间依据链接确定相互的导航关系。当在浏览器中单击这些对象时，浏览器可以根据指示载入一个新的页面或转到页面的其他位置。常用的链接分为文本链接和书签链接。下面具体介绍这两种链接的使用方法。

3.3.1 文本链接

在网页中，文本链接是最常见的一种。它通过网页中的文件和其他的文件进行链接。语法格式如下：

● href：链接地址，是Hypertext Reference的缩写。

● target：打开新窗口的方式，主要有以下4个属性值。

➢_blank：新建一个窗口打开。

➢_parent：在上一级窗口中打开，常在分帧的框架页面中使用。

➢_self：在同一窗口中打开，默认值。

➢_top：在浏览器的整个窗口中打开，将会忽略所有的框架结构。

说明：在该语法中，链接地址可以是绝对地址，也可以是相对地址。

下面列举一个实例，在页面中添加文字导航和图像，并且通过＜a＞标签为每个导航栏添加超链接。代码如下（实例位置：资源包\MR\源码\03\05）：

完成代码编辑后，在浏览器中运行，显示页面效果如图3.5所示。当单击“手机酷玩”“精品抢购”和“手机配件”超链接时，页面会跳转到51购商城的欢迎界面，如图3.6所示。

多学两招

在填写链接地址时，为了简化代码和避免文件位置改变而导致链接出错，一般使用相对地址。

3.3.2 书签链接

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

建立书签链接分为两步：一是建立书签；二是为书签制作链接。

下面列举一个实例，在网页中添加书签链接，当用户单击文字时，页面跳转到相应位置。其实现过程如下所示（实例位置：资源包\MR\源码\03\06）。

（1）建立书签。分别为每一版块位置后面的文字（如“华为荣耀”“华为p8”等）建立书签。部分代码如下：

（2）为网页导航部分的书签制作链接，代码如下：

代码编辑完成后，在浏览器中打开文件，显示页面效果如图3.7所示。当用户单击“华为荣耀”“华为mate8”等文字时，页面会跳转到相应位置。

说明：本实例中使用了CSS样式，有关CSS的学习请参照第10章。另外，上述代码省略了实例中添加第二、三版块手机图片的代码，详细代码请参照资源包中的源码。