HTML中的超链接(a元素)用法详解

一碗周
VIP.5 如鱼得水
716 阅读7分钟

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十二篇-《HTML中的超链接》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

本篇文章我们将来学习HTML中的链接，通过本篇文章的学习可以掌握的内容如下图所示：

导读.png

超链接

HTML页面使用超链接与网络上的另一个HTML页面相连。几乎可以在所有的网页中找到超链接，点击超链接会出现很多效果，例如从一个页面到另一个页面，或者下载一个文件等。

在HTML中链接可以是一个字，一个词，也可以是一个图片，这些都是可以点击的。

如下动图展示链接的基本用法：

01_演示HTML中的链接.gif

超链接元素

<a>元素

HTML中使用<a>元素定义HTML页面中的超链接。每一个<a>元素一般都会存在一个href属性，该属性的作用是来设置跳转到指定HTML页面或其他链接的地址。如果使用<a>元素时没有设置href属性的话，那么<a>元素将是无效的。

我们演示的那段代码实际上这个样子的：

html

<body>
    <h1>这是一个演示页面</h1>
    <a href="./demo.html">点击这里跳转到另一个页面</a>
</body>

点击<a>元素就会跳转到demo.html页面中。这里的./demo.html实际上一个相对路径。关于相对路径我们稍后学习。

如果我们不想使这个<a>元素生效的话，可以在href属性中写入一个#或者是javascript:;，这个超链接就失效了。

示例代码如下：

<body>
    <a href="#">这是写#号的超链接</a>
    <br />
    <a href="javascript:;">这是写javascript:;号的超链接</a>
</body>

代码运行结果如下图所示：

02_失效的超链接.gif

值得注意的是，如果不写href属性，<a>元素将会和普通元素无异，示例代码如下所示：

<body>
    <a>没有href的a元素</a>
</body>

代码运行结果如下图所示：

03_没有href属性的a元素.png

<a>元素的默认是样式

我们可以看到<a>元素是存在一个默认效果：

  • 字体是蓝色的

  • 鼠标放在上面会出现一个小手的效果

  • 字体下面还有一个下划线的效果

  • 点击时字体变为红色

  • 默认有一个下划线

鼠标悬停的效果和点击变色这是通过伪类选择器实现的，我们以后进行学习。

现在我们可以通过CSS来改写其默认的UI效果。

css

a {
    color: #444;
    text-decoration: none;
    /* 通过 cursor来设置鼠标悬停的状态 */
    cursor: pointer;
}

代码执行结果如下图所示：

04_覆盖a元素的默认样式.png

这里补充一个CSS属性，cursor属性用于设置鼠标悬停的元素上面的状态，该属性的值可以参考MDN

相对路径和绝对路径

由于<a>元素核心的是href属性，该属性的作用是设置跳转到目标的地址。这个地址可以是绝对路径，也可以是相对路径。

绝对路径

绝对路径 就是指完整的描述目标文件位置的路径。简单来说，绝对路径就是无论你当前的位置在哪，找到目标文件的路径是不变的。

例如我们的本地电脑中的某个文件，如果我们想要找到它的话，可以通过绝对路径的方式，如下所示：

E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html

如上述所示的路径就是绝对路径，它是从系统盘符（E是盘符名称）开始查找的路径。

再例如网络上存在某个网站，如果我们要访问到这个网站的话，也可以通过绝对路径的方式，如下所示：

https://seecode.cc

如上述所示的路径就是绝对路径，它是从网络协议开始查找的路径。

上述两个例子无论是本地电脑也好，还是网络上的网站也好，系统盘符或者网络协议后面的//都称为根目录 。也就是说，绝对路径是从根目录开始查找目标文件的路径。

绝地路径的优点如下所示：

  • 防止网站被恶意抄袭。使用绝对路径，如果有人抄袭采集你的网站内容，里面的链接还会指向你的网站。

  • 网页被移动位置，里面的链接还是指向正确的URL。

绝对路径的缺点如下所示：

  • 除非链接是动态插入的，不然没办法在测试服务器上进行测试。因为里面的链接将直接指向真正的域名URL，而不是测试服务器中的URL。

  • 除非链接是动态插入的，不然移动内容页面将很困难。因为内容页面位置发生变化，在其他页面上的链接却可能无法跟着变化，还指向原来的已经硬编码的绝对路径。

相对路径

相对路径 就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。简单来说，相对路径和你所在的位置是有关系的，你所在位置的不同会导致相对路径也会不同。

例如我们的本地电脑中的某个文件，如果我们想要找到它的话，可以通过相对路径的方式，如下所示：

假设我们当前的目录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\

需要访问的文件的目录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html

那么相对路径就是./demo.html

相对路径中使用 ./表示当前目录，使用 ../表示上一级目录 。

假设我们当前的目录为E:\...\02_HTML和CSS\06_链接\src\test\

需要访问的文件的目录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html

那么相对路径就是./../demo.html

如果是网络上的相对路径的话，就是指目标位置与当前位置处在同一个网站域名中，目标位置相对于当前位置的路径。

链接的打开方式

当使用<a>元素设置跳转到指定的HTML页面或文件时，默认情况下是在当前浏览器页签中直接打开目标HTML页面或文件。

通过<a>元素的target属性可以用来设置以什么方式打开目标资源，该属性的值有如下两种常见的值：

  • _self：默认值，表示目标链接在当前页面打开。

  • _blank：表示目标链接在新窗口打开。

如下示例代码展示了在一个新的浏览器页签中打开目标资源：

<body>
    <h1>这是一个演示页面</h1>
    <a href="./demo.html" target="_blank">点击这里跳转到另一个页面</a>
</body>

代码执行结果如下图所示：

05_打开方式.gif

锚点

HTML中的<a>元素的href属性与当前HTML页面中其他元素的id属性值配合使用，可以实现锚点功能。该功能常出现展示文档的网站或者电商网站的楼层效果。

所谓锚点 ，就是指当点击链接文本时，跳转到当前页面的指定元素位置。想要实现这种锚点功能只需要在<a>元素的href属性值设置为#ID属性值的格式即可。

如下示例代码展示了<a>元素实现锚点功能：

<body>
    <a href="#third">跳转到第三个h标签</a>
    <h1>第一个h标签</h1>
    <h1>第二个h标签</h1>
    <h1 id="third">第三个h标签</h1>
    <h1>第四个h标签</h1>
    <h1>第五个h标签</h1>
</body>

代码执行结果如下图所示：

06_锚点.gif

下载功能

在HTML5中为<a>元素新增了download属性，该属性用于设置下载文件的URL。用户点击链接时，浏览器会提示用户将其保存到本地。

如果download属性只有一个值的话，它将在保存提示中作为预定义的文件名。

如下示例代码展示了通过<a>元素的download属性实现下载功能：

<a href="./files/love.zip" download="love.zip">下载文件</a>

如上述示例，用户在点击此链接时，浏览器会自动下载该文件。

总结

总结.png

预告：下一篇文章我们将来学习与超链接息息相关的URL定位伪类选择器

avatar
文章
阅读
粉丝