Web开发——HTML基础(HTML框架 Frame 通过使用在同一个浏览器中显示不止一个页面)

   通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

1、举例(垂直框架和水平框架)

  举例1(垂直框架):

 1 <html>
 2 
 3 <frameset cols="25%,50%,25%">
 4 
 5     <frame src="/example/html/frame_a.html">
 6     <frame src="/example/html/frame_b.html">
 7     <frame src="/example/html/frame_c.html">
 8 
 9 </frameset>
10 
11 </html>

  输出结果:

  举例2(水平框架):

 1 <html>
 2 
 3 <frameset rows="25%,50%,25%">
 4 
 5     <frame src="/example/html/frame_a.html">
 6     <frame src="/example/html/frame_b.html">
 7     <frame src="/example/html/frame_c.html">
 8 
 9 </frameset>
10 
11 </html>

  输出结果:

2、框架

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

  使用框架的坏处:

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

3、基本的注意事项 - 有用的提示:

  假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。

为不支持框架的浏览器添加 <noframes> 标签。

  重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)

4、更多实例

4.1 如何使用 <noframes> 标签

  举例:

 1 <html>
 2 
 3 <frameset rows="25%,50%,25%">
 4 
 5     <frame src="/example/html/frame_a.html">
 6     <frame src="/example/html/frame_b.html">
 7     <frame src="/example/html/frame_c.html">
 8     <noframes>
 9         <body>Your browser is unable to handle the framework!</body>
10     </noframes>
11 </frameset>
12 
13 </html>

4.2 混合框架结构

  举例:

 1 <html>
 2 
 3 <frameset rows="50%,50%">
 4     <frame src="/example/html/frame_a.html">
 5     
 6     <frameset cols="30%,70%">
 7         <frame src="/example/html/frame_b.html">
 8         <frame src="/example/html/frame_c.html">
 9     </frameset>
10     
11 </frameset>
12 
13 </html>

  输出结果:

4.3 含有 noresize="noresize" 属性的框架结构

  举例:

 1 <html>
 2 
 3 <frameset rows="50%,20%,30%">
 4 
 5     <frame src="/example/html/frame_a.html" noresize="noresize">
 6     <frame src="/example/html/frame_b.html">
 7     <frame src="/example/html/frame_c.html">
 8     
 9 </frameset>
10 
11 </html>

2、Iframe

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

  语法:

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

2.1 Iframe设置高度和宽度

  举例:

1 <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

2.2 Iframe删除边框

  举例:

1 <iframe src="demo_iframe.htm" frameborder="0"></iframe>

2.3 使用Iframe作为链接的目标

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>My test page</title>
 6         
 7     </head>
 8     
 9     <body>
10     
11         <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
12         <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
13         
14     </body>
15 </html>

  输出结果:

  点击W3School.com.cn后:

猜你喜欢

转载自www.cnblogs.com/zyjhandsome/p/9783830.html