超链接随处可见，可以说是网页中最常见的元素了，例如绿叶学习网的导航、图片列表等都用到超链接。只要我们轻轻一点，就会跳转到其他页面。

超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。

一、a标签

在HTML中，我们可以使用a标签来实现超链接。

语法：

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

说明：

href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。对于路径，如果忘了的小伙伴，记得回去翻一下“7.2 图片路径”这一节。

超链接的范围非常广，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。

举例：文本超链接

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com">绿叶学习网</a>
</body>
</html>

分析：

当我们点击“绿叶学习网”这个文字，就会跳转到绿叶首页。

举例：图片超链接

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="绿叶学习网"/></a>
</body>
</html>

浏览器预览效果如下图所示。

分析：

当我们点击图片后，就会跳转到绿叶首页。不管是哪种超链接，我们都是把文字或图片放到a标签内部来实现的。

二、target属性

默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。

语法：

<a href="链接地址" target="打开方式"></a>

说明：

a标签的target属性取值有4种，如下表所示。

表1 target属性取值
属性值 说明
_self 默认值，在原来窗口打开链接
_blank 在新窗口打开链接
_parent 在父窗口打开链接
_top 在顶层窗口打开超链接

一般情况下，我们只会用到_blank这一个值，也只要记住这一个就够了，其他三个值不需要去深究。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>

浏览器预览效果如下图所示。

分析：

这个例子跟之前那个例子在浏览器效果上看不出什么区别，不过当我们点击超链接后，就会发现它们的窗口打开方式是不一样的，小伙伴们先自己试一下。

最后有一点要特别注意的， _blank属性是以下划线（_）开头，而不是中划线（-）开头。