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-->
</body>
</html>
点击便可发送邮件给这个邮件地址。