HTML中的超链接(a元素)用法详解
最新推荐文章于 2024-07-23 08:49:01 发布
阅读量1.6w
收藏
83
点赞数
24
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻💻，如果我写的文章有幸可以得到你的青睐，万分有幸~
这是【 从头学前端】系列文章的第十八篇-《HTML中的超链接》
编写不易转载请获得允许
写在前面
本篇文章我们将来学习HTML中的链接，通过本篇文章的学习可以掌握的内容如下图所示：
超链接
HTML页面使用超链接与网络上的另一个HTML页面相连。几乎可以在所有的网页中找到超链接，点击超链接会出现很多效果，例如从一个页面到另一个页面，或者下载一个文件等。
在HTML中链接可以是一个字，一个词，也可以是一个图片，这些都是可以点击的。
如下动图展示链接的基本用法：
超链接元素
<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>
代码运行结果如下图所示：
值得注意的是，如果不写href属性，<a>元素将会和普通元素无异，示例代码如下所示：
<body>
<a>没有href的a元素</a>
</body>
代码运行结果如下图所示：
<a>元素的默认是样式
我们可以看到<a>元素是存在一个默认效果：
-
字体是蓝色的
-
鼠标放在上面会出现一个小手的效果
-
字体下面还有一个下划线的效果
-
点击时字体变为红色
-
默认有一个下划线
鼠标悬停的效果和点击变色这是通过伪类选择器实现的，我们以后进行学习。
现在我们可以通过CSS来改写其默认的UI效果。
css
a {
color: #444;
text-decoration: none;
/* 通过 cursor来设置鼠标悬停的状态 */
cursor: pointer;
}
代码执行结果如下图所示：
这里补充一个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>
代码执行结果如下图所示：
锚点
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>
代码执行结果如下图所示：
下载功能
在HTML5中为<a>元素新增了download属性，该属性用于设置下载文件的URL。用户点击链接时，浏览器会提示用户将其保存到本地。
如果download属性只有一个值的话，它将在保存提示中作为预定义的文件名。
如下示例代码展示了通过<a>元素的download属性实现下载功能：
<a href="./files/love.zip" download="love.zip">下载文件</a>
如上述示例，用户在点击此链接时，浏览器会自动下载该文件。
总结
预告：下一篇文章我们将来学习与超链接息息相关的URL定位伪类选择器
扫一扫
5756
暂无认证
到【灌水乐园】发言
钧_: odd为奇数，等同于2n+1吧，你写反了
2301_76473871: 假设我们当前的目录为E:\...\02_HTML和CSS\06_链接\src\test\ 需要访问的文件的目录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html 那么相对路径就是./../demo.html
2301_76473871: 假设我们当前的目录为E:\...\02_HTML和CSS\06_链接\src\test\ 需要访问的文件的目录为E:\Repository\Learn-front-end-from-scratc\02_HTML和CSS\06_链接\src\demo.html 那么相对路径就是./../demo.html
2301_76473871: 假设我们当前的目录为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
weixin_57758765: 博主，倒计时只有刷新时间才会变，是因为什么