HTML超链接标签

点击打开在线编译器，边学边练

一、什么是超链接

超链接属于网页的一部分，它是让网页和网页连接的元素。只有通过超链接把多个网页连接起来之后才能算得上是一个网站。超链接是指从一个网页指向另一个目标的连接关系，目标可以是网页、位置（相同网页的不同位置）、图片等等。在网页中用来超链接的对象，可以是文本、图片等。

二、超链接代码a标签

a标签是实现超链接的html代码，它是用来定义超链接的。接下来我们就一起来看一看a标签是怎么用的。

语法格式：超链接对象

说明：href是a标签中最重要的一个属性，指定了连接的目标，如果没有该属性，不能使用hreflang、media、rel、target 和 type属性。

三、a标签的常用属性

属性	作用
href	用于指定链接目标的url地址，该属性为超链接标签的必须属性，当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式

说明：a标签除了href属性和target属性这两个常用属性外，还有很多属性，比如：download、name、rel等等属性。不常用就不介绍了，有兴趣的朋友可以自行研究一下。

1. 超链接的语法规范

<a href="https://www.dotcpp.com/" target="_blank">C语言网链接</ a>

其中a是anchor的缩写，中文意思是：锚

其中href用于指定目标页面的url地址**(不可省略)**，标签拥有href属性时，才有了超链接功能。

target用于指定目标页面的打开方式，可在引号""中输入_self为在当前页面中打开，输入_blank为在新窗口中打开，target可以省略不写，不写默认值为_self，即为在默认窗口中打开。

2. 超链接分类

（1）外部链接，当前项目外部的链接：

<a href="https://www.dotcpp.com/" target="_blank">C语言网链接</ a>

（2）内部链接，当前目录内部的链接也可以说是本项目不同页面之间的链接：

<a herf="index.html" target="_blank">首页</a><br />

（3）空链接，即当前项目尚未完成的页面，用#代替开发完成之后可以替换回来，点击之后会再次打开当前页面：

<a href="#" target="_blank">未完成的页面</a><br />

（4）下载链接：当内部链接的地址时一个文件或者压缩文件时：

<a href="新建 Microsoft Excel 工作表.xlsx">下载文件</a><br />
<a href="新建 Microsoft Excel 工作表.zip">下载文件</a><br />

（5）网页元素链接：在网页中的各种元素，如文本，图像，表格，音频，视频等都可以作为超链接：

（6）锚点链接：点击该链接可以迅速定位到页面中的某个位置(作用和目录的链接类似)：

在链接文本中的href属性中，设置属性值为"#"+文本的形式，如：
<a href="#锚点">这是一个锚点</a>
找到目标位置标签，里面添加一个ID属性 = 刚才的属性值，如：
<h3 id="锚点">锚点</h3>

3.<a> 标签的默认样式

浏览器会为 <a> 标签设置一些默认样式。

（1）鼠标样式

当鼠标移入链接区域时，会变成一只小手；当鼠标移出链接区域时，会变回箭头形状。

（2）颜色及下划线

超链接被点击之前为蓝色，超链接被点击之后变成紫色。超链接默认带有下划线，下划线颜色和文本颜色保持一致。

浏览器根据历史记录来判断超链接是否被点击过，如果 href 属性和历史记录中的某条 URL 重合，那么说明该链接被点击了。清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

【示例】HTML 超链接的多种形式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
    <p>
        <a href="https://www.dotcpp.com/course/html/" target="_blank">HTML教程（新窗口打开）</a><br>
        <a href="https://www.dotcpp.com/course/css/">CSS教程（当前窗口打开）</a><br>
        <a href="https://www.dotcpp.com/course/algorithm/">算法竞赛教程（被点击过）</a>
    </p>
</body>
</html>

效果展示如下：

超链接