HTML-建立超链接

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

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

1 ·

CC 4.0 BY-SA版权

HTML基础专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML中创建超链接的基本方法，包括文字链接、图片链接、新窗口打开链接、电子邮件链接以及框架间的链接。通过实例展示如何设置cols和rows属性进行框架布局，并在框架中插入网页以及实现框架间链接。

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

超链接：一个链接中包含着其它链接

1、基本文字超链接


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本文字超链接</title>
</head>
<body>
<a href="http://www.java1234.com">Java知识分享网</a>
</body>
</html>

运行结果：
在这里插入图片描述
2、设置图片的超链接


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片的超链接</title>
</head>
<body>
<a href="http://www.java1234.com"><img src="java1234.gif"/></a>
</body>
</html>

运行结果：
在这里插入图片描述
3、设置以新窗口显示链接页面


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置以新窗口显示链接页面</title>
</head>
<body>
<a href="http://www.java1234.com" target="_blank">Java知识分享网</a><br/>
<a href="http://www.java1234.com" target="_blank"><img src="java1234.gif"/></a>
</body>
</html>

运行结果：
在这里插入图片描述
4、设置电子邮件链接


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置电子邮件链接</title>
</head>
<body>
<a href="mailto:12345678@qq.com">联系我</a>
</body>
</html>

5、框架之间的链接
框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
（1）用 cols 属性将窗口分为左右两部分


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用cols属性将窗口分为左右两部分</title>
</head>
<frameset cols="30%,*">
<frame>
<frame>
</frameset>
</html>

运行结果：
在这里插入图片描述
（2）用 rows 属性将窗口分为上中下三部分


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用rows属性将窗口分为上中下三部分</title>
</head>
<frameset rows="30%,10%,*">
<frame>
<frame>
<frame>
</frameset>
</html>

运行结果：
在这里插入图片描述
（3）框架的嵌套


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架的嵌套</title>
</head>
<frameset cols="30%,*">
<frame>
<frameset rows="50%,*">
<frame>
<frame>
</frameset>
</frameset>
</html>

运行结果：
在这里插入图片描述
（4）用 src 属性在框架中插入网页


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用src属性在框架中插入网页</title>
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frameset rows="50%,*">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="b.html" target="main">b</a><br/>
<a href="c.html" target="main">c</a>
</body>
</html>


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


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
c
</body>
</html>

运行结果：
在这里插入图片描述
（5）框架之间建立链接


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架之间建立链接</title>
</head>
<frameset cols="30%,*">
<frame src="a.html">
<frame name="main">
</frameset>
</html>

运行结果：
在这里插入图片描述