HTML框架

框架：将一个浏览器窗口划分为若干个窗口，每个窗口显示独立的网页

框架集：<frameset> 用于划分窗口

框架页：<frame> 指定窗口默认显示的网页地址

 

划分左右型窗口

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <frameset cols="450,*" frameborder="yes" border="5">
 8     <frame src="a.html">
 9     <frame src="https://www.baidu.com">
10 </frameset>
11 </html>

划分上下型窗口

实例：

 

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <frameset rows="300,*" frameborder="yes" border="5">
 8     <frame src="a.html">
 9     <frame src="https://www.baidu.com">
10 </frameset>
11 </html>

 

 

 

<frameset>

常用属性：

           cols:划分左右型框架   cols="450,*"表示左边框架的宽是450，其余都是右边的框架

                                        cols="450,*,450"表示左边框架宽是450，右边框架宽是450，其余都是中间框架

           rows：划分上下型框架rows="300,*"

                                        rows="300,*,300"

          frameborder：是否显示边框线，取值：yes或no  1或0

          border：边框线的粗细

          bordercolor：边框颜色

<frame>

常用属性：

           src：网页的位置

           noresize：不能调整窗口的大小  取值：noresize

           scrolling：是否显示滚动条    取值：1或0   yes或no     auto

           name：窗口名称     <a>中target属性使用

实现点击左边窗口的链接，在右边窗口显示

实例：

b.html

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <frameset cols="300,*" frameborder="yes" border="5">
 8     <frame src="a.html">
 9     <frame src="https://world.taobao.com" name="a">
10 </frameset>
11 </html>

 

a.html

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8      <a href="https://www.baidu.com" target="a">链接</a>
 9 </body>
10 </html>

 

打开b.html

点击链接

 

 

增强版实例：

b.html

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <frameset cols="300,*" frameborder="yes" border="5">
 8     <frame src="a.html">
 9     <frame src="https://world.taobao.com" name="a">
10 </frameset>
11 </html>

 

a.html

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <body>
 8      <a href="https://www.baidu.com" target="a">百度</a><br><br>
 9      <a href="http://union.click.jd.com" target="a">京东</a><br><br>
10      <a href="http://bj.jumei.com" target="a">聚美</a> 
11 </body>
12 </html>

 

 

 

 点击百度

 

 

 

点击京东

 

 

 

 点击聚美

 

 

<noframes>

当浏览器不支持框架时，显示的提示信息

<noframes>提示信息</noframes>

 

 

框架嵌套：

 1 <!DOCTYPE html>
 2 <html>
 3 <meta charset="utf-8">
 4 <head>
 5    <title>我的网页</title> 
 6 </head>
 7 <frameset rows="50,*" frameborder="yes" border="5" noresize="noresize">
 8     <frame src="">
 9     <frameset cols="200,*" frameborder="yes" border="5">
10        <frame src="">
11        <frame src="" name="a">
12   </frameset>
13 </frameset>
14 </html>

 

 

行内框架：<iframe>提示信息</iframe>

常用属性：

           src：文件地址

           width:

           height:

           frameborder:是否显示框架边框   取值：yes或no

           border：边框粗细

           name：

           align:框架在网页中的对其方式   取值：left   right   center

 

  

         

 

posted on 2016-12-26 17:04  心如止水微笑人生  阅读(237)  评论(0)    收藏  举报

导航