1.3 建立超链接

当浏览网页时，单击一个超链接，可以使网页切换到另一个HTML文档或由URL指向的站点。超链接最终使万维网形成了网络，万维网中的网页相互链接，才能构成网络。

1.3.1 超链接的概念

超链接（HyperLink）是从一个Web资源（例如网页中的文字、图片等）到另一个Web资源的连接，也称为链接。

超链接始于源端，指向目标端，因此，超链接的定义需要指定源端和目标端。源端在定义超链接的HTML文档中，目标端需要通过链接属性来指定，它可以是另一个Web页面、一段文本、一个图片、一段视频、一个应用程序，也可以是当前网页上的不同位置。

网页上的超链接一般分为三种：

第一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。

第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去。

第三种为同一网页的超链接，这就要使用到书签的超链接，一般用#号加上名称链接到同一页面的指定地方。

在网页中，如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变。只有图像的超链接访问后颜色不会发生变化。

1.3.2 绝对路径和相对路径

路径指文件存放的位置，在HTML文档中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：绝对路径和相对路径。

1.绝对路径

绝对路径是指完整的路径。以图1-20所示路径为例，C:/example/helloworld.html是helloworld.html文件的绝对路径，由绝对路径就可以看出helloworld.html文件是在C盘的example目录下。

超链接文件也有绝对路径，假设某一图片在icon.jpg所在网站域名为www.test.com，它的绝对路径是：https://www.test.com/img/icon. jpg。

图1-20 文件路径

有时会发现编写的HTML文档在自己的计算机上浏览可以正常显示图片，但上传到Web服务器上浏览就不显示图片了，这是因为静态的HTML文件需要上传到Web服务器上，而Web服务器存放文件的路径可能与自己计算机上编辑文件的路径不一致，按照之前的绝对路径去找，找不到对应的文件，所以在Web服务器上浏览不显示图片。这也是使用绝对路径的风险。

2.相对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：

● ./：代表HTML文件所在的目录（可以省略不写）。

● ../：代表HTML文件所在的父级目录。

● ../../：代表HTML文件所在的父级目录的父级目录。

● /：代表HTML文件所在的根目录。

例如，当前文档为helloworld.html（假设绝对路径为：C:/example/helloworld.html），如果要在helloworld.html文档中引入同一目录下img文件夹中的flower.jpg（假设其绝对路径为：C:/example/img/flower.jpg），采用相对路径可以用以下几种格式。

或者省略./，简写为：

还可以用：

相对路径可以避免上述绝对路径使用时根目录不同的问题。只要将网页文件及引用文件的相对位置与Web服务器上文件的相对位置保持一致，那么它们的相对路径也会一致。例如上面的例子，helloworld.html文档中引入图片flower.jpg，由于flower.jpg相对于helloworld.html文件是在同一个目录，只要这两个文件还在同一个目录内，无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

1.3.3 定义超链接

a元素定义超链接的语法如下。

其中，URL是指超链接指向的目标地址。“链接文本”是带有超链接的文本，但不局限于文本，图片或者其他HTML元素也可以成为链接。

使用a元素定义超链接时常用的属性如下。

1）href属性。href属性是a元素最重要的属性，它可以定义链接的目标。目标URL可以是另一个文档，也可以是当前文档的其他位置。

2）target属性。target属性可以定义在何处打开链接，比如设置其属性值为“_self”可以在当前窗口打开链接，也可以设置属性值为“_blank”在新窗口中打开链接。

3）rel属性。rel属性用来表示当前文档与链接的目标文档之间的关系。

例如下面的超链接定义，假设当前文档为page2.html，第一个超链接rel属性值“index”表明链接文档是当前文档的索引目录；第二个超链接rel属性值“prev”表明链接文档是当前文档的前一页；第三个超链接rel属性值“next”表明链接文档是当前文档的后一页。

在HTML中如果定义了超链接，那么浏览页面时，当鼠标移动到链接文本上，鼠标指针会变成超链接的手形形状，单击鼠标左键，将跳转至链接页面。

1.3.4 命名锚点

命名锚点类似阅读书籍时加入的书签，当需要翻阅指定的内容时，找到之前标记的书签即可。在访问内容繁杂的网页时，如果希望链接到网页的特定位置，通过创建命名锚点，就可以快速地链接到指定位置，便于浏览网页内容。

创建命名锚点需要两个步骤：

1）在HTML文档中对锚点进行命名（即创建一个书签），可用HTML元素的id属性来设置锚点名称。

2）在同一个文档中创建指向该锚点的链接，将a元素的href属性值设为“#锚点名称”。

例如下列代码段说明了在h3元素中使用id属性定义了锚点，将其命名为“第一节”，这个锚点通过<a>元素的href属性来设置链接，href的属性值为“#第一节”，可通过单击链接文本“查看1.1.1小节”链接到命名锚点。

完整代码示例如下。

【例1-5】 超链接命名锚点。

在浏览器中打开页面，将滑动条拉至链接文本处，如图1-21a所示，当单击链接文本时，页面将链接至命名锚点，如图1-21b所示。

图1-21 链接到命名锚点

a)链接前 b)链接后