超链接标签

哈喽，亲爱的小伙伴们，好久没见啦，最近忙于项目的事情，所以并没有按时间发布新的文章，但是对于之前写的文章，我都有新的补充，尽量做到最全面和最易懂，那么这篇文章我就带大家了解一下什么是超链接标签。

超链接标签顾名思义就是它是一种允许我们同其他网页或站点之间进行连接的元素标签，就像我之前在文章里贴出来的链接传送门，你一点的话是不是会跳到指定的网页去，这就是超链接，所以我们的超链接标签的作用就是跳转到指定的页面里去。

超链接标签，也就是a标签，它是个双标签，也就是写成<a></a>的形式，最为寻常的写法，也是我们用的最多的一种书写形式就是：

<a href="https://www.baidu.com/">百度</a>

href属性是a标签最主要的元素，它代表的就是指示链接的目标。大家可以试着写一下，当我们点击的时候，是不是去了百度的页面。

百度的超链接标签，点击过的颜色紫色

这个应该不难看出来，在超链接标签的下面，会有一个横线。

在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

大家可能不知道这个活动链接表示的是什么，就是"当前正打开的网页"是通过单击哪个链接打开的,那么这个链接就属于"活动链接"，也可以理解是用户最后一次点击的链接，在简单的说就是你鼠标放在超链接上面，然后点击不松手，就是红色了。当然了，你要是问我这个下划线的颜色可以更改吗，那时当然可以的，但是目前我所讲到的知识点并不能做到，所以之后再说。

没有点击过的颜色，蓝色

鼠标点击不要松手的状态是红色

如果你希望当前的页面保持不动，点击之后可以在新的窗口打开页面，这里就要用到一个新的属性，就是target属性。官方给出的解释是：<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

是不是有点难理解，target属性有四个属性值，分别是：_blank，_self，_parent，_top。

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

如果a标签内没有此元素，默认是在浏览网页中重新载入对应链接网页，一般来说，我们除了_blank和_parent，其余不怎么常用。但是呢，这个_parent的效果和没有target属性其实是差不多的，是整个网页父级重新载入，这里我就不演示了，就比较一下_black和不写target。

<a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" target="_blank">出现吧神龙</a>

上面没写target属性的，就是你点击了跳转页面的时候是在原来的页面进行跳转的，这里也不是很好演示，写了_blank的话，会在新的窗口打开。

在点击的页面后面的新开了一个页面打开百度

除了targe属性还有最为熟悉的title属性，就是鼠标放上去，会有一个提示出现。

<a href="https://www.baidu.com/" target="_blank" title="百度">出现吧神龙</a>

到这里的话，就要开始说一下a标签里最为重点的锚链接了，锚文本又称锚文本链接，是链接的一种形式。把关键词做一个链接，指向别的网页，这种形式的链接就叫作锚文本。这么说，肯定不清楚，所以接下来，我们就通过两个案例来深入了解一下a标签的作用。

第一个案例，做一个从底部回到头部的跳转，也就是点击底部然后回到头部。

头部的位置

底部的位置

我们来分析一下，首先用我们上面最先讲到的a标签的常规跳转网址路径可不可以，貌似好像不可以，这时候，我们就要想到锚链接了。

首先我们要在顶部写一个a标签，此时顶部的a标签是我们希望被转过去的位置，所以需要在被转到位置添加，<a id="命名" name="命名"></span>，注意id和name值相同并且与a命名相同,当然你省略id也是可以的，一般来说就写一个name也行了。

然后，就要在我们想要跳转点击的地方，给一个<a href="#命名">文字</a>，注意href值是#开头+英文字母命名，注意命名都要一样的，不然是无法判断要跳转到对应的地方的，只限在当前页面进行锚链接的跳转。

<a name="top">这是头部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#top">这是底部</a>

ps：这么多的<br>标签是为了给它换行然后产生底部往上的一种视觉效果。

那么，像这样的例子就是为了在同页面里面进行对应位置的跳转就是这么写的，当然了除此以外，我顺便再拓展一下别得东西，href不一定只是一些网址，它还可以是电话，可以是邮件地址，可以是短信，甚至可以发qq给对应qq号的好友，是不是很新奇，那就赶紧去试一下吧。

<!-- 打电话 tel是手机号 -->
<a href="tel:188888888">打我电话</a>
<!-- 发邮件 mailto是邮箱账号 -->
<a href="mailto:8888888888@qq.com">这不是我qq</a>
<!-- 发短信 sms是手机号 -->
<a href="sms:188888888">发短信</a>
<!-- 发qq uni后面跟的是你想发的qq号 -->
<a href="tencent://message/?uin=10000000&Site=400301.com&Menu=yes">QQ</a>

第二个例子，我们就写个从一个标签里调到第二个页面，在从第二个页面跳到第三个页面，然后第三个再回到第二个页面，第二个再回第一个页面，像极了顺口溜，禁止套娃。我们还是来分析一下该怎么写，那么这里又会涉及到绝对和相对的问题，之前我在说图片那个文章的时候就已经详细的说过了绝对和相对的区别，这里我就简单的阐述一下。

绝对地址：就是你在任何情况下都能找的到的地址，是一个非常完整和准确的地址。

相对地址：就是你必须知道当前的位置，才能找到

为了方便举例子，我就只写一遍的跳转了。首先来一个图片，图片的插入具体我已经在前面的文章就详细的介绍了，要是忘了的话，我给个传送门：https://cloud.tencent.com/developer/article/1664281。一般图片的选取呢，你可以直接去网上找，也可以去iconfont上面拿，顺便说一下，iconfont这个网站非常非常的好用，基本上你没有找不到的小图标，传送门：https://www.iconfont.cn/。插入好图片，我们怎样做到点击图片能进行跳转呢，非常的简单，只要在img标签的外面套一个a标签就可以了，只要在a标签的，不管你是任何的文字还是图片，都会有点击的效果，也就是你鼠标放上去会有一个小手出现，然后，我们只要写上我们想要跳转的路径名字就可以了，我这里的话，我是在文件里面创建了一个新的文件夹，然后在这个新文件夹里面写了一个新的html文件，我们要做的就是从这个文件跳转到新建的这个文件夹里的文，再从这个新的文件里面跳转回来。

 <a href="first/first.html">
    <img src="images/file.png" alt="看不见我吗" width="60px"> 一级目录
 </a>

这里呢，我是起始页面，一级目录跳到这个first文件里面

 <p>哈喽欢迎来到德莱联盟，点击首页回到前面吧</p>
    <a href="../06-超链接的使用.html">
       <img src="../images/home.png" alt="你看的到我吗" width="60px">首页
    </a>

这里是我跳转过去的first.html文件，点击首页图片或者文字，就可以再跳转回起始页面。这里的../表示的就是回到上一级

起始页面

first.html

那么到这里a标签的使用就差不多讲完了，非常感谢小伙伴们的阅读，是不是感觉自己又比之前强了一点呢，按照惯例，心灵鸡汤不能少，当你不能够再拥有的时候，你唯一可以做的就是令自己不要忘记。当你的知识已经达到你的脑容量的极限了，我们可以停下来不再去灌输知识，但是你不能忘记之前学的东西，就像现在你学前端，你可以不会vue，不会jq，不会小程序，但是你不能不会我之前讲的那些知识点吧，嘻嘻。