首页 > 编程笔记 > HTML笔记 阅读：78

HTML <a>标签：设置超链接（非常详细）

超链接是指从一个网页指向一个目标的连接关系。在一个 Web 项目中，各个网页就是由超链接连接起来的。

在 HTML 中，使用 <a> 标签来指定一个超链接，其语法格式如下所示。 
<a>......</a>
<a> 标签间的内容会显示到页面上，在页面上单击超链接后，链接目标将显示在浏览器上，并且根据目标类型来打开或运行。

但并不是只要书写标签间的文字就可以实现超链接，HTML 为 <a> 标签提供了 href 属性，该属性用来指定单击链接之后要跳转的目标，标签的属性需要书写在标签中，如下代码所示。

<a href=""></a>


例如，想要链接到 C语言中文网，就可以书写为如下形式。 
<a href="https://c.biancheng.net/">C语言中文网</a>

测试超链接标签如下图所示：


图 1 测试超链接标签

当在页面上单击“C语言中文网”文本的超链接时，会跳转到 C语言中文网的官网。

href 属性值可以使用绝对路径，也可以使用相对路径。接下来我们对绝对路径和相对路径进行相关介绍。

绝对路径和相对路径

首先我们需要明确什么是路径。所谓路径就是用来描述当前文件和其他文件的位置关系。比如，a.html文件在磁盘E的目录下，这样的位置关系就可以称之为路径，因为它准确地描述了a.html 文件和磁盘 E 的关系。

本地绝对路径比较常见，比如，“E：\www\logo.jpg”就是本地绝对路径，表示 E 盘下的 www 文件夹下的 logo.jpg。

而相对路径是相对于当前文件所在的路径来计算的路径。在相对路径中，使用“.”表示当前文件所在的目录，使用“..”表示当前文件所在文件目录的上级目录，“./”表示当前文件所在的目录下，“../”表示当前文件所在目录的上级目录下。另外，“./”可以省略，也就是路径前面不加“./”时也表示当前文件所在的目录下。

在上面的讲解中，出现了目录分隔符“/”和“\”，它们用来表示文件路径中的层级关系。在 Windows 操作系统中能识别“\”和“/”，而在 Linux 操作系统中只能识别“/”，因此在 Web 网页中我们统一使用“/”作为目录分隔符。

针对以下目录，分析四种文件路径的使用情况： 
- 1.html
- img1/
  - img.jpg
  - test.html
- src/
  - 2.html
- html/
  - 3.html

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 文件中编写字符串“我是一个新网页”，具体代码如下。
<!DOCTYPE html>
<html>
<head>
    <title>新网页</title>
    <meta charset="UTF-8">
</head>
<body>
    我是一个新网页
</body>
</html>
然后，在 section03.html 文件中添加一行代码，跳转 1.html 网页。
<a href="./1.html">跳转到 1.html 页面</a>
使用浏览器访问 section03.html，使用相对路径跳转页面如下图所示。


图 2 使用相对路径跳转页面

此时超链接的 href 属性使用的是相对路径，单击“跳转到1.html页面”，即可成功跳转，如图 3 所示。


图 3 跳转到1.html页面

对于 href 属性还有一点需要注意，最好不要将其值写为本地的绝对路径，否则经过 Web 服务器端将不能进行访问。

另外，<a> 标签中的 target 属性指定跳转目标在哪里打开。它有两个属性值，分别是 _self 和 _blank。具体如下：
例如，在 section03.html 文件中，编写测试代码如下。 
<!--在本页面打开-->
<a href="https://c.biancheng.net" target="_self">C语言中文网 1</a>
<!--在新页面打开-->
<a href="https://c.biancheng.net" target="_blank">C语言中文网 2</a>
运行代码查看效果，测试 <a> 标签中的 target 属性：
另外，书写标签属性时需要注意以下两点：
1) 双标签的属性应写在开始标签内部，并用空格分隔。如果有多个属性，它们之间也应用空格分隔。例如： 
<a href="https://c.biancheng.net"target="_blank">Link</a>

2) 在书写属性值时，可以使用单引号或双引号将值包裹起来，也可以不使用引号。然而，建议在书写属性值时加上引号，并使用双引号来包裹值。这样可以增强代码的可读性和一致性。例如： 
<img src="image.jpg"alt="Image description">
请注意，尽管在某些情况下可以省略引号，但使用引号是一种良好的编码风格，可以避免由于属性值中含有空格或特殊字符而引起的错误。

相关文章