web前端之HTML中的框架

框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

使用框架的坏处:

  • 开发人员必须同时跟踪更多的HTML文档
  • 很难打印整张页面

 

框架结构标签(<frameset>)

  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

垂直框架:

 

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>框架</title>
 6     </head>
 7     
 8         <frameset cols="25%,50%,25%">
 9             <frame src="0001.html"><frame />
10             <frame src="0002.html"><frame />
11             <frame src="0003.html"><frame />
12         </frameset>
13     
14 </html>

 

水平框架:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>框架</title>
 6     </head>
 7     
 8         <frameset rows="25%,50%,25%">
 9             <frame src="image/1.jpg"><frame />
10             <frame src="image/2.jpg"><frame />
11             <frame src="image/3.jpg"><frame />
12         </frameset>
13     
14 </html>

 

 

 重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

 

内联框架:

   iframe 用于在网页内显示网页。

 

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

 

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。

 

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框:

 

使用 iframe 作为链接的目标

iframe 可用作链接的目标(target)。

链接的 target 属性必须引用 iframe 的 name 属性:

 

程序演示:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>框架</title>
 6     </head>
 7         <body>
 8             <iframe src="image/wc.jpg" width="80%"  name="a_iframe"></iframe><br />
 9             <a href="http://www.cnblogs.com/ztyy04126/" target="a_iframe">http://www.cnblogs.com/ztyy04126/</a>
10         </body>
11 </html>

 

转载于:https://www.cnblogs.com/ztyy04126/p/4909134.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值