HTML超链接合集

超链接的语法
超链接，即超级链接，就是指按内容链接。超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。在超文本文档中，超链接用标记语言的标签指出。

超链接是Web页面区别于其他媒体的重要特征之一，网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象，且超链接的数量是不受限制的。文本超链接是分配目标URL的字或短语，图片超链接是为整个图片分配默认超链接，也可以为图片分配一个或多个热点。

在 HTML 标签中， 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a  href = "跳转的路径url" title ="鼠标移到链接上的时候显示的文字"  taget = "打开窗口的方式">超链接</a>

1 a标签

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

<a href=”链接地址”>文本或图片</a>

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

其中，a 是英文 anchor(锚点) 的缩写，href 是 hypertext reference 的缩写，意思是超文本引用。
以上代码实现了一个超链接，指向一个网页。点击后可以访问连接指向的网页。

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>

<p id = “maod”></p><!– 定义一个锚点–>

<a href = “#maod”></a><!– 回到指定锚点->

<a href = “#”></a><!– 回到顶部 –>

2 超链接的具体应用

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

需要把图片标签 img 写到 a 标签内部，如下代码所示

<a href=”https://lol.qq.com/download.shtml?ADTAG=innercop.lol.web.top”>
    <img src=”img/下载游戏按钮.png” alt=”下载游戏” /></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”。

2.4文本链接

<a href=”https://www.baidu.com/”>点击跳转到百度首页</a>

当我们点击浏览器的超链接标签时，会跳转到百度首页。

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。

3.3链接分类

1、外部链接: 例如 < a href=”http:// www.baidu.com “> 百度。target 打开窗口的方式 默认值是 _self 当前窗口打开页面 _blank新窗口打开页面。
2、内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 。

内部链接，顾名思义指的就是自身网站的页面。这里我以我测试的 HTML 文件 HTMLDemo 为例

1）：在同级文件夹下新建一个名称为 跳转到第二个网页.html 的文件。
2）：在同级文件夹下新建一个文件夹 TempHTML，在该文件夹下新建一个名称为 跳转到第三个网页.html 的文件。

3、空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页 。
4、下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5、网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

<a href =”http://baidu.com/”> <img src=”../images/image01.jpg”/></a> <img src=”../images/image01.jpg”/>
6、锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置。

第一步：在链接文本的href属性时，设置属性值为 #名字 的形式，如<a href=”#tw”>第2集</a>

第二步：找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id=”two”>第2集介绍</h3>
 

原文链接：https://blog.csdn.net/qq_34966814/article/details/83662537

今天的文章HTML超链接合集分享到此就结束了，感谢您的阅读。