Frame是网页设计一个比较重要也比较基础的内容。
在讲代码实例前先普及一下Frame由哪几个标签组成，以及这些标签中可设置的属性。
frameset标签：
用于设置框架的样式
- border:框架的边框粗细
- bordercolor:设置框架的边框颜色
- frameboder:0--不要边框，1--要显示边框
- cols:纵向分页面。其数值的表示方法有三种：
- 1.n%表示该框架区域占浏览器页面区域的n%
- 2.n或者npx表示该区域横向宽度为n像素
- 3.* 表示该区域占用余下页面空间
- col="25%,800,*”表示将页面分为三部分，左边占页面25%,中间横向宽度为200，剩下的就是右边部分
frame标签：
用于导入html，搭建框架
属性包括
- name:框架名称
- src：框架来源，也就是网页链接或者html文件路径
- scrolling：是否显示滚动条，auto,yes,no
- bordercolor:边框颜色
- frameborder:0--不要边框，1--要显示边框
- noresize:“noresize"表示设置的框架大小可以手动调节
- marginhight:框架边界和其中内容之间的高度
- marginwidth:框架边界和其中内容之间的宽度
- width:框架的宽度
- height:框架的高度
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>frame标签</title>
</head>
<frameset cols="80%,20%" >
<frame src="外部.html" name="frame1" scrolling="yes"
noresize></frame>
</frameset>
</html>前面两个标签都是写在body外面的,而接下来这个iframe标签是写在body内的
iframe标签
它大部分的属性都与frame类似，但它是浮动的框架
- align:设置水平或者垂直对齐方式
- allowTransparency：获取对象是否透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe标签</title>
</head>
<style>
.box{
background-color: rgb(148, 86, 213);
height: 500px;
width: 500px;
}
</style>
<body>
<iframe src="外部.html" width="700" frameborder="1"></iframe>
<div class="box">我是一个本身就在body里的盒子</div>
</body>
</html>怎么实现“交互”呢？
这里要借用target
- target="_self"将链接的内容显示在目前的视窗中，这个也是默认值、
- target=“_parent"将链接的画面内容，当成文件的上一个画面
- target="_top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
- target="_blank"表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。
- 当网页没有框架时，target="_self"和target="_parent"以及target="_top"三种方式的显示方式几乎相同。
其实还有一种用法，target="html链接",比如在<a>超链接中加上target="main.html"的属性，且把mian.html构造进框架里面，那么在同一个页面，点击<a>出的超链接,就可以在mian的框架里面显示画面，实现交互。
<body>
<h1>this is top</h1>
<a href="login.html" target="main">click to log in </a>
<br>
<a href="register.html" target="main">click to register</a>
</body>
<frameset rows="20%,80%">
<frame src="top.html" noresize scrolling="no" name="top"></frame>
<frameset cols="30%,70%">
<frame src="bili.html" noresize scrolling="no" name="treemenu"></frame>
<frame src="main.html" noresize scrolling="yes" name="main"></frame>
</frameset>
</frameset>当我把超链接的target都设置成main,然后右下角的框架导入mian.html，三个超链接都会在右下角区域轮番展示。
大家可以戳下面网页链接自己点击体会一下。