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>
复制代码
运行结果：
评论