2.3.4 超链接
超链接是指从一个网页指向一个目标的连接关系。在一个Web项目中各个网页就是由超链接连接起来的。在HTML中，使用<a>标签来指定一个超链接，其语法格式如下所示。
<a>标签间的内容会显示到页面上，在页面上单击超链接后，链接目标将显示在浏览器上，并且根据目标类型来打开或运行。
但并不是只要书写标签间的文字就可以实现超链接，HTML为<a>标签提供了href属性，该属性用来指定单击链接之后要跳转的目标，标签的属性需要书写在标签中，如下代码所示。
例如，想要链接到尚硅谷官网，就可以书写为如下形式。
测试超链接标签如图2-17所示。
图2-17 测试超链接标签
当在页面上单击“尚硅谷”文本的超链接时，会跳转到尚硅谷的官网，如图2-18所示。
图2-18 单击超链接后跳转到尚硅谷官网
href属性值可以使用绝对路径，也可以使用相对路径。接下来我们对绝对路径和相对路径进行相关介绍。
首先我们需要明确什么是路径。所谓路径就是用来描述当前文件和其他文件的位置关系。比如，a.html文件在磁盘E的目录下，这样的位置关系就可以称之为路径，因为它准确地描述了a.html文件和磁盘E的关系。
本地绝对路径比较常见，比如，“E：\www\logo.jpg”就是本地绝对路径，表示E盘下的www文件夹下的logo.jpg。
而相对路径是相对于当前文件所在的路径来计算的路径。在相对路径中，使用“.”表示当前文件所在的目录，使用“..”表示当前文件所在文件目录的上级目录，“./”表示当前文件所在的目录下，“../”表示当前文件所在目录的上级目录下。另外，“./”可以省略，也就是路径前面不加“./”时也表示当前文件所在的目录下。
在上面的讲解中，出现了目录分隔符“/”和“\”，它们用来表示文件路径中的层级关系。在Windows操作系统中能识别“\”和“/”，而在Linux操作系统中只能识别“/”，因此在Web网页中我们统一使用“/”作为目录分隔符。
针对以下目录，分析四种文件路径的使用情况。
（1）情况一：使用下级目录中的文件。
假设在编写1.html时，需要使用同目录中img1中的img.jpg，那么可以在1.html中写为“./img1/img.jpg”。需要注意的是，前面不加“./”时同样表示当前文件所在的目录下。也就是说，“img1/img.jpg”也可以表示，使用同目录下img1中的img.jpg。
（2）情况二：使用同级目录中的文件。
假设在编写 img1 目录下的 test.html 时，需要使用同目录下的 img.jpg，那么可以在 test.html 中写为“./img.jpg”。与情况一相同，同样可以省略“./”。
（3）情况三：使用上级目录中的文件。
假设在编写 src 目录下的2.html时，需要使用 img1目录中的 img.jpg，那么可以在2.html 中写为“../img1/img.jpg”。
（4）情况四：使用多层上级目录中的文件。
假设在编写 html 目录中的3.html 时，需要使用 img1目录中的img.jpg，那么可以在3.html 中写为“../../img1/img.jpg”。
接下来继续演示使用相对路径跳转新页面。在section03.html同级目录下创建1.html，并在1.html文件中编写字符串“我是一个新网页”，具体代码如下。
然后，在section03.html文件中添加一行代码，跳转1.html网页。
使用浏览器访问section03.html，使用相对路径跳转页面如图2-19所示。
图2-19 使用相对路径跳转页面
此时超链接的href属性使用的是相对路径，单击“跳转到1.html页面”，即可成功跳转，如图2-20所示。
图2-20 跳转到1.html页面
对于 href 属性还有一点需要注意，最好不要将其值写为本地的绝对路径，否则经过 Web 服务器端将不能进行访问。
另外，<a>标签中的target属性指定跳转目标在哪里打开。它有两个属性值，分别是_self和_blank。具体如下。
●_self值：表示在当前页面加载，该值为默认项。
●_blank值：表示在新窗口打开。
例如，在section03.html文件中，编写测试代码如下。
运行代码查看效果，测试<a>标签中的target属性如图2-21所示。
图2-21 测试<a>标签中的target属性
单击“尚硅谷官网1”，如图2-22 所示，跳转的网页在当前窗口打开，覆盖之前的网页，在当前页面加载新网页。
图2-22 在当前页面加载新网页
单击“尚硅谷官网2”，如图2-23所示，跳转的网页在新窗口打开，之前的网页没有被覆盖。
图2-23 新窗口加载网页
另外，书写标签属性时需要注意以下两点。
（1）双标签的属性应写在开始标签内部，并用空格分隔。如果有多个属性，它们之间也应用空格分隔。例如，<a href="https：//www.atguigu.com"target="_blank">Link</a>。
（2）在书写属性值时，可以使用单引号或双引号将值包裹起来，也可以不使用引号。然而，建议在书写属性值时加上引号，并使用双引号来包裹值。这样可以增强代码的可读性和一致性。例如，<img src="image.jpg"alt="Image description">。
请注意，尽管在某些情况下可以省略引号，但使用引号是一种良好的编码风格，可以避免由于属性值中含有空格或特殊字符而引起的错误。