HTML超链接

在互联网中，超链接可谓是无处不在，它是各个网页之间的桥梁，使得网页能够进行跳转。一个网站之中的页面也必须通过超链接连接起来才能称之为网站。

当然，超链接除了指向另一个网页之外，还可以指向邮箱地址、图片、文件等。

1 a标签

向网页中添加a标签是实现超链接的重要方式，但不是唯一方式。本文后面所提到的超链接一般是指通过a标签添加的超链接。

<a href="https://gitee.com/HeavyLeaf">我的码云</a>

以上代码实现了一个超链接，指向一个网页。点击后可以访问连接指向的网页。

1.1 重要属性

在超链接中最主要的属性有三个，分别是：href、title、target。其他一些属性会在后面陆续出现。

1.1.1 href

href属性用于指示一个目标，该属性是a标签必不可少的，少了它超链接将不能跳转。href属性的值是一个链接，也就是网页或资源的地址。比如：href="https://gitee.com/HeavyLeaf"，href的值是一个网页的地址。

链接可以是一个完整的地址，也可以是相对路径。对于外部连接通常使用完整的链接，链接必须包含所使用的协议（HTTP，HTTPS等），否则将是一个无效链接。

<a href="https://gitee.com/HeavyLeaf">我的码云</a>
<a href="gitee.com/HeavyLeaf">我的码云</a>

上例中，第一个超链接的地址是完整的地址，包含了https协议，因此该超链接是有效的；第二个超链接的地址个缺少协议类型，因此是无效的超链接。

对于内部链接，通常使用的是相对路径。

<a href="../src/index.html">我的主页</a>

1.1.2 title

title属性可以为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时，会显示title属性值的内容。设置了title不仅可以提升用户体验，还可以提升网页的SEO（搜索引擎优化）。

<a href="https://gitee.com/HeavyLeaf" title="欢迎访问我的码云">我的码云</a>

PS：上图中，鼠标其实是悬停在链接上的，截图没有捕获到鼠标。

1.1.3 target

target属性用于控制链接网页打开的位置（相对于当前网页）。默认情况下，是刷新当前网页所在的窗口，加载新的页面。

target属性值及描述：

_self：默认状态。在当前页面所在窗口打开链接的网页。

_blank：在当前浏览器中打开一个新窗口加载链接的网页。

_parent：在父窗口打开链接的网页。（有些页面可以通过等方式打开一些子窗口）

_top：清除当前窗口中打开的所有框架（子窗口），并在整个窗口打开链接的网页。

framename：在指定的框架中打开链接的网页。

使用得最最频繁的属性值是_self和_blank。至于_parent、_top和framename基本已不再使用。

1.2 锚链接

锚链接可以链接到本页面的特定位置，也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。

当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。

<a href="#标记名">跳转到本页面的id标记处</a>

当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。

<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>

关于“#标记名”，它其实是页面中某一个标签的id属性值。也就是说，如果要跳转到网页的某个位置，就先在这个位置所在的标签设置id属性，然后就可以通过锚链接跳转到这个位置了。

<a href="#标记名">跳转</a>

<标签名 id="标记名"></标签名>

当href属性的值为一个“#”时，表示该链接是指向页面顶部的，点击后可直接跳转到本页面顶部。

<a href"#">返回顶部</a>

2 超链接的具体应用

2.1 可点击图片

在一些网站上存在一些图片，当点击图片时，就会跳转到另一个页面。这其实是将图片作为了a标签的内容。

<a href="http://www.baidu.com">
    <img src="image.png"/>
</a>

2.2 邮件链接

在很多网站中，都会有一个可点击的邮箱地址，当点击后，会打开邮箱发送邮件。这其实是将a标签中的href属性值设置为了邮件发送的相关内容。

发送邮件时使用的是mailto：链接，这类型的连接有几个参数：

name@email.com：这是第一个参数，也是必填参数。它指的是接收方的邮件地址。

cc=name@email.com：抄送地址。（可选）

bcc=name@email.com：密送地址。（可选）

subject=subject text：邮件主题。（可选）

body=body text：邮件内容。（可选）

?：第一个参数与第二个参数的分隔符。（可选）

&：除第一和第二个参数之间的分隔之外的其他参数之间的分隔符。（可选）

下面是一组例子：

<a href="mailto:zhangsan@qq.com">zhangsan@qq.com</a>
<a href="mailto:zhangsan@qq.com?cc=name1@qq.com">zhangsan@qq.com</a>
<a href="mailto:zhangsan@qq.com?bcc=name2@qq.com">zhangsan@qq.com</a>
<a href="mailto:zhangsan@qq.com?cc=name1@qq.com&bcc=name2@qq.com">zhangsan@qq.com</a>

<a href="mailto:zhangsan@qq.com?subject=the%20subject%20of%20email&body=the%20body%20of%20email">zhangsan@qq.com</a>

总的来说，就是mailto的第一个参数是必须的，其他参数可以没有，也可以是任意一个或几个的组合。

注意：参数subject和body的值不应该直接使用中文和特殊字符以及空格，否则会造成乱码以及一些意想不到的结果。中文和特殊字符应该使用URL编码，如空格使用“%20”代替。

2.3 下载链接

有一些链接在点击后可以下载文件、图片、音视频等，这一类链接称为下载链接。其实现方法是将href属性的值设为被下载资源的路径，然后再添加download属性。

<a href="./img/1.jpg" download="picture.jpg">下载</a>
<a href="./img/1.jpg" download>下载</a>

在上例中，第一个下载链接的download属性值为“picture.jpg”，这表示图片下载后命名为“picture.jp”g。当然文件后缀也可以不写。第二个下载链接的download属性没有属性值，这表明下载后图片的文件名为资源文件的文件名，即“1.jpg”。

3 超链接样式

3.1 a标签的伪类

a标签有4种伪类选择器：

:link：超链接未被访问时的状态，也是超链接的初始样式，可以不设置；

:visited：超链接已被访问的状态；

:hover：光标悬停在标签上的状态（该伪类不局限于a标签使用）；

:active：光标在标签上被按下时（鼠标单击按下还没释放时）的状态（该伪类不局限与a标签使用）；

当不适用这些伪类修改a标签的样式时，标签的默认样式如下：

:link：蓝色，有下划线；

:visited：紫色，有下划线；

:hover：和hover前一样；

:active：红色，有下划线；

3.2 重要：伪类顺序

a标签的4个伪类选择器要求遵循顺序：:link→ :visited → :hover → :active。

有人会问：为什么一定要遵循这个顺序？不按这个循序行不行？

其实是可以的，但只允许:link和:visited交换以下位置。至于为什么，后面会解释。

在CSS样式优先级中有这么一条规则：当样式优先级优先级相同时，后面的样式会覆盖前面的样式。因此，这四种样式需要按照一定的顺序出现，否则会导致某些状态的样式被其他状态样式覆盖的情况。

这四种样式都是在某种行为下被触发的。这些行为是：未访问过（:link）、访问过（:visited）、光标悬停（:hover）和光标按下（:active）。

首先，一个超链接要么已经访问过，要么未访问过，因此访问过与未访问过两种状态不可能同时存在，因此:link和:visited的先后顺序可以随意。但从逻辑上，链接是先未访问过，然后到已访问过的。所以顺序应该先:link，后:visited。

当光标移动到标签上时，标签的:hover伪类样式将被激活，覆盖:link或:visited的样式。因此:hover应该在:link和:visited之后，否则:hover的样式将被覆盖，无法显示。此时伪类选择器的顺序是：:link → :visited → :hover。

当鼠标按下时，标签的:active伪类样式被激活。这时光标是停留在标签上的，而且是未访问或已访问的状态。因此，为了能够样:active样式能够正常的显示出来，:active应该将:hover、:visited、:link的样式覆盖。这时就可以得出四个伪类选择器的顺序就是：:link → :visited→ :hover → :active。