链接标签（超链接）

最新推荐文章于 2023-02-05 21:34:17 发布

原创最新推荐文章于 2023-02-05 21:34:17 发布

· 1.2k 阅读

1 ·

版权

文章标签：

#servlet #java #开发语言

本文详细介绍了HTML中链接标签<a>的使用，包括基础的页面跳转、图片超链接、窗口打开位置设置（target）、锚链接（内部跳转及跨页面跳转）以及邮件链接的创建。通过实例代码展示各种链接的实现方式，帮助读者深入理解并掌握HTML链接的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a+tab便可快捷输入链接标签代码（<a href=""></a>）。

1.首先我们看一下最基础的链接标签代码，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<a href=""></a>
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
</body>
</html>

我们需要注意href里面必须需要填写内容，内容便是一个链接（上述以B站链接为例）。然后在其后面输入信息。便可完成基本的链接代码。我们看一下运行结果。

然后我们点击标签跳转。

到这里我们便完成了最基本的链接标签代码。

2.接下里我们尝试通过图片进行跳转，这里便是在链接标签里插入图片超链接。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/"><img src="../resource/image/2.png" alt="头像" title="跳转到B站"></a>
</body>
</html>

这里我们便完成了图片链接的插入。我们通过点击图片也能直接跳转至B站。

3.窗口打开位置target=""

通过前两个页面跳转我们注意到页面跳转总是在本窗口打开，我们可以通过target来改变窗口打开位置。例如我们要想在新窗口进行跳转，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<!--target表示窗口在哪里打开，其中填入的_blank表示在新窗口打开，
_self表示在本窗口打开（默认情况下也是在本窗口打开）-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/" target="_blank">
    <img src="../resource/image/2.png" alt="头像" title="跳转到B站">
</a>
</body>
</html>

我们在href里面添加了target，其中的_blank表示代行窗口打开，另外_self表示在本窗口打开。默认情况下就是在本窗口打开。通过target="_blank"的添加，我们便完成了跳转在新窗口打开的设置。

4.锚链接

通过链接标签，我们不仅可以实现页面跳转。我们还可以通过设置锚链接进行特殊的跳转。例如，回到本页面的顶部，跳转到本页面或其他页面的具体某个位置。

下面我们来设置锚链接，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--<a name="name">顶部</a>定义锚链接跳转位置-->
<a name="top"></a>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<!--target表示窗口在哪里打开，其中填入的_blank表示在新窗口打开，
_self表示在本窗口打开（默认情况下也是在本窗口打开）-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/" target="_blank">
    <img src="../resource/image/2.png" alt="头像" title="跳转到B站">
</a>
<a href="#top">点我回到顶部</a>
</body>
</html>

我们可以看到我们在顶部加入一个<a name="top">此处可添加内容</a>这个通过name确定跳转标记，其中的top可以修改。然后在底部添加了链接标签<a href="#top">点我回到顶部</a>，这是跳转的标签函数。通过这两个代码我们便可实现指定位置跳转，而且不局于一个窗口，还可以跳转到其他窗口页面的指定位置。

4.1锚链接之跳转到其他页面的指定位置

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--<a name="name">顶部</a>定义锚链接跳转位置-->
<a name="top"></a>
<!--链接标签a+tab输入链接标签代码-->
<!--href必须填，代表要跳转到哪个页面-->
<!--target表示窗口在哪里打开，其中填入的_blank表示在新窗口打开，
_self表示在本窗口打开（默认情况下也是在本窗口打开）-->
<a href="https://www.bilibili.com/">点击我跳转到B站</a>
<hr>
<!--插入图片超链接-->
<a href="https://www.bilibili.com/" target="_blank">
    <img src="../resource/image/2.png" alt="头像" title="跳转到B站">
</a>
<a href="#top">点我回到顶部</a>
<!--跳转到其他页面的指定位置-->
<a href="1.我的第一个网页.html#111">跳转到1.我的第一个页面</a>

如下1.我的第一个网页.html页面的代码

<!--DOCTYPE:告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们的网站的一些信息    -->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords"content="学习">
    <meta name="description"content="来这里好好学习">
<!-- title网页标题   -->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello world！
<a name="111"></a>
</body>
</html>

和同一页面跳转是几乎相同的，主要区别是在href后不仅需要跳转标记的名字，还需要跳转到另一个页面的链接。

5.功能性链接

5.1邮件链接

邮件链接：mailto其功能可以跳转发送给某人邮件。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--邮箱链接，mailto-->
<a href="mailto:529209274@qq.com">点击联系我</a>
</body>
</html>

点击便可发送邮件给这个邮件地址。