frameset ,frame,iframe 的使用

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>

效果图

frameset ,frame,iframe 的使用