HTML（四）——建立超链接

最新推荐文章于 2024-11-16 14:45:11 发布

原创最新推荐文章于 2024-11-16 14:45:11 发布 · 2k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#超链接

● Web前端基础篇专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了HTML中超链接的多种使用方式，包括文字链接、图片链接、新窗口链接、电子邮件链接，以及如何使用框架进行网页布局，并展示了如何在框架间建立链接。

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

1.文字超链接

文字链接是最简单的一种，我们在html文件中，用<a></a>标签就可以实现；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

运行结果：

我们点击这个，就会跳转到百度的首页；

2.图片的超链接

这个其实在文字链接上把文字换成图片既可以了；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552215847&di=ad8fb21df97379ae7e73fc535efea130&imgtype=jpg&er=1&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F28a4962c297205e0868cdb45bb527e2bc5319f08f019-l7N1A3_fw658"></a>
</body>
</html>

在a标签里面嵌套img标签；

运行结果是网上的一张图片，点击图片后就会跳到百度页面；

3.以新页面显示链接页面

这里需要用到a标签的target属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

其中target的属性值为：

_blank：在新窗口/选项卡中打开

_self：在同一框架中打开(默认)

_parent：在父框架中打开

_top：在整个窗口中打开

framname：在指定的框架中打开

4.设置电子邮件链接

这里需要用到mailto标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="mailto:158238883@qq.com">联系一下</a>
</body>
</html>

运行结果：

点击链接，会自动跳到邮件的界面；

5.框架之间的链接

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

5.1 用cols属性将窗口分割成左右两个部分

要用到frameset标签，这个是和body一个级别层次的，所以要将body去掉；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset cols="20%,*"><!-- 分割的比例是2:8； -->
<frame>
<frame>
</frameset>
</html>

运行结果：

5.2 用rows属性将窗口分割成上中下三个部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="20%,30%,*"><!-- 分割的比例是2:3:5； -->
<frame>
<frame>
<frame>
</frameset>
</html>

运行结果：

5.3 框架之间嵌套

比如我想要左右3:7以及右边还要有上下5:5的布局；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset cols="30%,*">
<frame>
<frameset rows="50%,*">
<frame>
<frame>
</frameset>
</frameset>
</html>

运行结果：

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

比如我们想让三个空白的地方分别显示不同的网页；

先在文件中新建三个html文件，分别为a.html，b.html，c.html，

最后将三个网页分别插到框架之中：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>

运行结果：

5.框架之间建立链接

有时候需求是，一个网页左边是菜单，右边是相应的网页，点击相应的菜单，会出现对应的网页；

index.html内容是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="A">
</frameset>
</html>

其中a.html的内容是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.baidu.com" target="A">百度一下</a><br><br><br>
<a href="http://www.taobao.com" target="A">淘宝一下</a><br><br><br>
<a href="b.html" target="A">跳到网页b</a>
</body>
</html>

b.html的内容是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
这是b网页
</body>
</html>

我们去运行 index.html文件，运行结果是:

其中左边不同的链接对应不同的网页界面！

6.嵌入式架构iframe

我们在网页里面嵌套另一个网页；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
百度界面<br/>
<iframe width=900 height=1000 src="http://www.baidu.com">
</iframe>
</html>

运行结果：