1.frameset(它称为框架标记,是用来告知html文件是框架模式,并且设置可视窗口怎么分割)
frameset在一个页面中设置一个或多个框架不能嵌套在body标签里
<html>
<head></head>
<frameset>
<frame src="test.html"></frame>
<frame src="test.html"></frame>
<body></body>
</frameset>
<html>
frameset属性
1.cols: 它是把整个画面竖向分割成几个画面
2.rows: 它是把整个画面横向分割成几个画面
3.frameborder: 它表示设定这个框架的边框值。它的值只有两个0或者1,0表示不显示边框,1表示显示边框。
4.border: 它表示设置边框的宽度
5.bordercolor: 它设定边框的颜色
2.frame
是frameset的子标签
frame属性
1.src: 指在此框架窗口中要显示的网页档案的链接
2.name: 指这个框架窗口的名称
3.framespacing: 指框架和框架之间保留的空白距离
4.scrlling: 指该框架窗口是否要显示滚动条
5.noresize: 指框架的尺寸不能被随意的拖动,改变大小
6.marginheight: 指框架顶部和底部边缘所保留的空间大小
7.marginwidth: 指框架左右两边边缘所保留的空间的大小
注:frameset和frame标签必须在一起使用
frame一个重要的属性target,它表示在指定的框架中打开网页
target的值
1.blank 它表示在一个新的窗口中打开链接网页
2.top 它表示在本窗口中打开链接网页
3.parent 在上一层的框架中打开链接网页
4.self 在超链接中打开链接网页
noframes 当浏览器显示不出框架时,页面就会显示出<noframes></noframes>中的内容
3.iframe(它是在一个页面中嵌入一个框架窗口)
iframe是在html页面内嵌入框架 框架内可以连接另一个页面
<html>
<head></head>
<body>
<iframe src="test.html"/>
</body>
<html>
iframe的属性
1.name: 是框架窗口的名称
2.align: 是框架窗口中内容的对齐方式
3.width: 是框架窗口的宽,单位是pixels
4.height: 是框架窗口的长,单位是pixels
5.marginwidth: 是插入的文件和框架左右边缘所保留的空间
6.marginheight: 是插入的文件和框架上下边缘所保留的空间
7.frameborder: 指是否显示边框,1和0
8.scrolling: 是指是否允许使用滚动条
frameset和frame可以把网页制作成所需要的不用大小的框架,可以用来布局
iframe是把一些网页嵌入到当前网页中,达到所需要的效果
frameset和frame使用案例
<frameset rows="80,*">
<frame name="top" src="text.html">
<frame name="bottom" src="text2.html">
</frameset>
垂直切割画面(左右两个画面),接受整数值、百分数,*代表占用余下的空间。数值的个数代表分成的视窗数目且以逗号分隔。
例如cols="30,*,50%"可以切成三个视窗,第一个视窗是30pixels的宽度,为一绝对分割,第二个视窗是当分配完第一个及第三个视窗后剩下的空间,第三个视窗则占整个画面的50%宽度为一相对分割。
rows="120,*"是横向切割,将画面上下分开,数值设定同上。唯cols与rows两个参数尽量不要同在一个<frameset>标记中,因netacape偶然不能显示这类型的框架,采用多重分割。frameborder="0" 设定框架的边框,其值只有0和1(避免使用yes或no) border="0" 设定框架的边框厚度,以pixels为单位。 bordercolor="#0080000" 设定框架的边框颜色。 framespacing="5" 表示框架与框架间的保留空白的距离。
<frame name="top" src="test.html" marginwidth="5" marginheight="5" scrolling="auto" frameborder="0" noresize framespacing="6" bordercolor="#0000ff">
src="test.html" 设定此框架窗口要显示的网页档案名称,每个窗口一定要对应着一个网页档案。可以使用绝对或相对路径
name="top" 设定这个窗口的名称,这样才能指定框架来做连接,必须
scrolling="auto" 设定显示卷轴,yes显示,no不显示,auto视情况显示
noresize 设定不让使用者改变框的大小
<frameset rows="80,*">
<noframes>
<body>
浏览器不支持框架功能,请使用新的浏览器
</body>
</noframes>
<frame name="top" src="a.html">
<frame name="bottom" src="b.html">
</frameset>
若浏览器支持框架,那么他不会理会<noframes>中的东西,如果浏览器不支持框架,放在<noframes>范围内的文字会被显示
<iframe src="test.html" name="test" align="middle" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="yes"></iframe>
src="test.html" 显示此框架文件来源,必要加上相对或绝对路径
name="test" 此框窗名称,这是连接标记的target参数所需要的
align="middle"可选值为left,right,top,middle,bottom,作用不大
案例
3.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>frameset</title>
</head>
<frameset cols="20%,*" border="4" bordercolor="red">
<frame src="menu.html" scrolling="no" name="Left">
<frame src="page1.html" scrolling="auto" name="Main">
<body>
</body>
</frameset>
</html>
menu.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>menu.html</title>
</head>
<style type="text/css">
span{font-size:26px;color:#0033ff;}
</style>
<body>
<h1>搜索引擎</h1>
<div>
<span><a href="https://www.baidu.com" target="Main">百度</a></span><br>
<span><a href="https://www.baidu.com" target="Main">谷歌</a></span><br>
<span><a href="https://www.baidu.com" target="Main">有道</a></span><br>
<span><a href="https://www.baidu.com" target="Main">即可</a></span><br>
<span><a href="javascript:;">盘古</a></span><br>
<span><a href="javascript:;">中收</a></span><br>
<span><a href="javascript:;">必应</a></span><br>
<span><a href="javascript:;">返回</a></span>
</div>
</body>
</html>
效果图