3、HTML ＜a＞标签（超链接）

在 HTML 中，我们使用 <a> 标签来表示超链接。

超链接（Hyperlink）是网页中最常见的元素之一，整个互联网都是基于超链接而构建的。每个网站都由众多的网页组成，超链接使得网页之间不再独立，它就像一根线，把网页连接在一起，形成一个网状结构。互联网之所以能够称之为“网”，就是因为有超链接的存在。

HTML 超链接（链接）
HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

<a> 标签的语法格式如下：

<a href="url"  target="opentype">链接文本</a>

href 属性用来指明要跳转到的 url，
target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间。

例如，链接到英雄联盟首页可以这样写：

<a href="https://lol.qq.com/act/a20200922competition/index.html?e_code=507042">英雄联盟</a>:

下面，我们来详细分析一下 <a> 标签的各个属性。

1. href 属性

href 属性指定链接的目标，也就是要跳转到什么位置。href 可以有多种形式，例如：

href 可以指向一个网页（.html、.php、.jsp、.asp等格式），这也是最常见的形式，例如
href="http://c.biancheng.net/view/1719.html"；
href 可以指向图片（.jpg、.gif、.png等格式）、音频（.mp3、.wav等格式）、视频（.mp4、.mkv格式）等媒体文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
href 可以指向压缩文件（.zip、.rar等格式）、可执行程序（.exe）等，一些下载网站的链接就可以写成这种形式，例如href="./../uploads/data_package/ComputerFoundation.zip"；
href 甚至还可以指向本机的文件，只是很少这样使用，例如 href=“D:/Program
Files/360/360safe/360Safe.exe”。

你看，href 本质上就是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。

另外，href 使用的路径可以是绝对路径，也可以是相对路径。绝对路径往往以域名为起点，例如 http://c.biancheng.net/view/1719.html；
相对路径往往以当前文件或者当前域名为起点，例如 ./../uploads/data_package/ComputerFoundation.zip。后续我们将在《绝对路径与相对路径》一文中详细讲解。

2. target属性

在创建网页时，默认情况下，超链接在当前的浏览器窗口打开，但是我们可以使用 target 属性来改变目标窗口的打开方式。常见的打开方式如下表所示：

target 属性值：

_self 默认，在现有的窗口中打开新页面，原窗口将被覆盖。
_blank 在新的窗口中打开新页面。
_parent 在当前框架的上一层打开新页面。
_top 在顶层框架中打开新页面。

绝大部分情况下，target 属性要么不写，保持默认的 _self，要么把它的值设置为 _blank，在新的窗口中打开链接。例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<a target="_top" href="https://lol.qq.com/act/a20200922competition/index.html?e_code=507042">英雄联盟</a>
</body>
</html>

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

1) 鼠标样式
当鼠标移入网页上的某个超链接时，其样式会变为一只小手；当鼠标移出超链接区域时，样式会再次回到箭头形状。

2) 颜色及下划线
任何 HTML 元素都有默认的样式，<a> 标签也不例外。在浏览器下，超链接被点击后颜色会发生改变：超链接被点击之前是蓝色的，点击之后会变成紫色。

超链接默认是带下划线的，下划线颜色和文本颜色保持一致。浏览器根据历史记录来判断超链接是否被点击过，如果 <a> 标签的 href 属性和历史记录中的某条 URL 重合，那就说明该链接被点击了，否则是没有被点击的。所以，清空浏览器的历史记录会让超链接的颜色再次变回蓝色。

4. 图片链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>创建图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="//www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

</body>
</html>

5、电子邮件连接

<a href="mailto:1170562998@qq.com">联系我</a>

6、框架之间的连接

框架是一种常见的网页布局工具，作用是吧浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页

用cols属性将窗口分为左右部分

<frameset cols="30%,*">
<frame>
<frame>
</frameset>

用rows属性将窗口分为上中下三个部分

<frameset rows="30%,10%,*">
<frame>
<frame>
<frame>
</frameset>

框架的嵌套

<frameset cols="30%,*">
<frame>
<frameset rows="50%,*">
<frame>
<frame>
</frameset>
</frameset>

用src属性在框架中插入网页

<frameset cols="30%,*">
<frame src="https://www.bilibili.com/?spm_id_from=333.788.b_696e7465726e6174696f6e616c486561646572.1">
<frameset rows="50%,*">
<frame src="https://www.douyu.com/">
<frame src="https://lol.qq.com/">
</frameset>
</frameset>