html 框架frame,iframe,frameset区别详解及html框架布局实例代码

作者:IT技术 | 时间:2018-10-28

所谓框架就是把网页划分几个窗,同时显示多个 URL。但定义框架包含的html标签有:frame,iframe,frameset,这三种html标签框架有什么区别呢?本文为大家做详细讲解,文中我们还会加入一些html框架布局实例代码供大家参考。

<iframe>框架

<iframe> 标签定义的是内联框架。

所谓内联框架就是在一个页面中嵌入一个框架窗口。说再简单点就是:在当前网页中显示另外一个网页。通过使用内联框架,你可以在当前浏览器窗口中显示多个网页。

iframe格式:  

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

Iframe高度与宽度设置

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")

<iframe src="demo_iframe.html" width="150" height="150"></iframe>

Iframe取消边框

frameborder 属性用于定义iframe是否显示边框。

设置属性值为 "0" 移除 iframe 的边框:

<iframe src="demo_iframe.html" frameborder="0"></iframe>

iframe的属性

1、name                  是框架窗口的名称
2、align                   是框架窗口中内容的对其方式
3、width                  是框架窗口的宽,单位是pixels
4、height               是框架窗口的长,单位是pixels
5、marginwidth      是插入的文件和框架左右边缘所保留的空间
6、marginheight     是插入的文件和框架上下边缘所保留的空间
7、frameborder      是指是否显示边框。1表示显示边框,0表示不显示边框
8、scrolling             是指是否允许使用滚动条。

<frameset>标签定义一个框架集

<frameset> 称为框架标记,是用来告知HTML文件是框架模式,并且设定可视窗口怎么分割,它定义一个或者多个 <frame> 元素。每个 <frame> 有各自独立的文档。

实例代码:

<!DOCTYPE html><html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <frameset cols="20%, 30%, 50%">
            <frame src="frame1.html"></frame>
            <frame src="frame2.html"></frame>
            <frame src="frame3.html"></frame>
        </frameset>
    </head>
    <body>
    </body></html>

frameset的属性

1、cols                     它是把整个画面竖向分割成几个画面
2、rows                   它是把整个画面横向分割成几个画面
3、frameborder       它表示设定这个框架的边框值。它的值只有两个0或者1.0表示不显示边框,1表示显示边框。
4、border                它表示了边框的宽度
5、bordercolor         它是设定了框架边框的颜色

frame的属性

1、src              指在此框架窗口中要显示的网页档案的链接
2、name             指这个框架窗口的名称
3、framespacing     指框架和框架之间保留的空白的距离
4、scrlling         指该框架窗口是否要显示滚动条
6、noresize         指框架的尺寸不能被随意拖动,改变大小  
7、marginheight      指框架顶部和底部边缘所保留的空间的大小
8、marginwidth      指框架左右两边边缘所保留的空间的大小。 

小提示:

frameset和frame标签必须在一起使用

frame target属性

它表示在指定的框架中打开网页

1、blank                它表示在一个新的窗口中打开链接网页

2、top                   它表示在本窗口中打开链接网页

3、parent              在上一层的框架中打开链接网页

4、self                   在超链接中打开链接网页

target是在编写导航时肯定会用到的

noframes
当用户使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容,而不是一片空白。

通过上面的讲解,你现在明白html框架frame,iframe,frameset区别了吗?可以按照本文讲的内容练习下html框架布局实例代码。