html框架之iframe和frame及frameset
1.1框架概念
所谓框架便是网页画面分成几个框窗,同时取得多个URL。只要<frameset>和<frame>即可,而所有框架标记要放在一个总的html 文档中,这个文档只记录了该框架如何划分,不会显示任何内容。
1.2 <frameset>和<frame>
1.2.1 概述
<frameset>称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割; <frame>则只是设定某一个框窗内的参数属性。
1.2.2 <frameset>参数设定
例:
<frameset rows="90, *" frameborder="0" border=0 framespacing="2" bordercolor="#008000">
border 设置框架的边框粗细,以px为单位。
bordercolor 设置框架的边框颜色。
frameborder 设置是否显示框架边框。设定值只有0、1(默认);0表示不要边框,1表示要显示边框(避免使用yes或no )。
cols
纵向分割页面。其数值表示方法有三种:“30%、30(或者30px)、*(或者空着)”;数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%;“30”表示该区域横向宽度为30像素;“”表示该区域占用余下页面空间。例如:cols="25%, 200, *" 表示将页面分为三部分,左面部分占页面25%,中间横向宽度为200像素,页面余下的作为右面部分。
rows 横向分割页面。数值表示方法与意义与cols相同。
framespacing 设置框架与框架间的保留的空白距离。
注意:cols与rows两参数尽量不要设置同一个<frameset>标记,否则该框架有可能不能显示,应尽采用多重分割。
1.2.3 <frame>参数设定
例:
<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
src属性,定义此框窗中要显示的网页路径,每个框窗一定要对应一个网页。
name属性 ,定义此框窗的名称,这样才能指定框架来作链接。
注意:name属性值必须定义,但可以任意命名。
frameborder、bordercolor、framespacing属性同<frameset>。
scrolling属性,定义是否要显示卷轴,yes表示显示卷轴,no表示不显示,auto表示视情况显示。
noresize 属性,定义框窗是否能够被用户改变大小。添加此属性则不让用户拖动从而改变其的大小,没有添加此属性,则用户可以随意拖动从而改变其大小。
marginhight属性,设置框架高度部份边缘所保留的空间。
marginwidth属性,设置框架宽度部份边缘所保留的空间。
1.3 <noframes>
用户浏览器太旧,不支持框架功能时,网页则是一片空白。为了避免这种情况,可使用<noframes>标记,当浏览器无法识别框架时,可以识别<noframes>与</noframes>之间的内容,而不是一片空白。
在<noframes>与</noframes>之间可以添加提醒信息,如“您的浏览器无法处理此框架,请切换浏览器以获得更好的体验!”,甚至可以是一个没有框架的网页。
注意:若浏览器支持框架,则不会解析<noframes>中的内容;若浏览器不支持框架,所有的框架标记都会被略过,而放在<noframes>范围内的内容会被识别。
1.4 <iframe>
1.4.1概述
iframe标记,又叫浮动帧标记,可以用它将一个HTML文档嵌入在另一个HTML中显示。iframe标记创建的包含另外一个文档的框架叫做内联框架(即行内框架)。
注意:所有浏览器都支持<iframe>标签。
1.4.2 <iframe>的属性设置
例:
<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes">
src属性,规定在iframe中显示的文档的URL。
name属性,规定此框窗名称,这是链接标记的target参数所必要的。
align属性,规定如何根据周围的元素来对齐此框窗。不赞成使用,请使用样式代替。
width属性,规定此框窗的宽度。不赞成使用,请使用样式代替。
height属性,规定此框窗的高度。不赞成使用,请使用样式代替。
marginwidth属性,定义此框窗与插入文件的左右留白间距。不赞成使用,请使用样式代替。
marginheight属性,定义此框窗与插入文件的上下留白间距。不赞成使用,请使用样式代替。
frameborder属性,规定是否显示框窗周围的边框,其值只有0和1(默认),0表示不要边框,1表示要显示边框(避免使用yes或no)。
scrolling属性, 规定是否在iframe中显示滚动条,yes表示显示,no表示不显示,auto(默认)表示视情况显示。
1.5 iframe和frame的区别
用frameset和frame可以进行固定布局,但frame必须嵌套在frameSet中使用;而iframe是一个html标签,在html中任何地方,都可以随意使用。
frameset与frame不能放在body中,否则无法显示;相反,iframe放在frameSet中时,则必需放在body中。
frame的高度只能通过frameSet控制;而iframe可以自己控制,且不能通过frameSet控制。
如果在同一个页面使用了两个以上的iframe,在IE中可以正常显示,在firefox中只能显示出第一个;使用两个以上的frame在IE和firefox中均可正常。
发表评论
-
Select下拉选择框的美化
2017-11-02 17:19 3386Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 7060Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1701Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1737Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1210input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3508html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 961HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1712html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 638html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1220html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 1003Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6308HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16180div元素按比例缩放的实现方法 某些场景下,窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1184HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2436HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1110RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 667Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 813DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1490HTML引入CSS样式的方式详解 1.1内联属性(Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4955设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
总结来说,HTML 框架提供了在单个浏览器窗口内组织多个网页内容的能力,通过 `<FRAMESET>`、`<FRAME>` 和相关的属性,我们可以定制复杂的布局和交互体验。然而,由于其局限性,现代网页设计中更多地使用 CSS 和 ...
里面包含了frameset,frame以及iframe的一些技术的演练,希望对大家有帮助,如果有什么补充或疑问,可以加QQ374053115进行和我讨论交流,互相进步!里面代码均手写,大致功能都已经实现,如果错误欢迎指出!
HTML中的`frame`, `iframe`, 和`frameset`是用来创建多窗口或框架布局的重要元素,它们允许在同一个浏览器窗口中加载多个独立的网页。这些元素主要用于构建复杂的网页结构,使得不同内容可以并列显示,提高用户体验...
JS 操作 Frameset、Frame、Iframe 对象可以实现框架之间的互相访问和控制。 Frameset 对象 Frameset 对象是 HTML 中的框架集,它可以包含多个 Frame 对象。Frameset 对象可以通过 `window.frames` 属性来访问,...
在本文档中,将会深入探讨HTML中框架相关的三个标签:frame、iframe和frameset。这三者都是与页面布局有关的技术,它们能够让页面的不同部分加载不同的网页,但是每种标签的用法和功能都有所区别。 首先,我们来...
4. **iframe.html** - `iframe`(内联框架)是另一种实现类似效果的方式,它可以在页面中嵌入另一个HTML文档,具有更高的灵活性,但不支持历史记录和书签功能。 5. **fixedframes.html** - 固定大小的框架,框架大小...
如果需要实现类似`frameset`的交互效果,可以结合`div`和`iframe`一起使用。 总的来说,通过熟练运用`div`和CSS,我们可以创建出与`frameset`类似甚至更灵活的布局,同时避免了`frameset`带来的问题。这要求开发者...
本文将深入探讨`frameset`及其子元素`frame`、`noframes`、`iframe`的使用方法,并通过实例来解析如何设置这些元素的属性来实现复杂页面布局。 #### Frameset标签详解 `<frameset>`标签用于定义一个由多个框架组成...
在网页设计中,`frame` 和 `frameset` 是HTML4时代用于构建多窗口布局的元素,而`iframe`则是内联框架,常用于在页面中嵌入其他页面。这三个概念都是与网页布局紧密相关的,尤其在处理页面分栏或者复杂内容展示时...
而`IFRAME`则是内联框架(Inline Frame)的缩写,它可以嵌入到HTML文档中的任何位置,并且可以在其中加载另一个HTML文档,实现页面内部的嵌套。 #### FRAME的使用与特性 - **框架的基本结构**:使用`FRAME`创建多...
在HTML页面设计中,`iframe`和`frame`都是用于创建多窗口或分割页面的元素,但它们之间存在显著的差异。理解这些区别对于优化网页布局和用户体验至关重要。 首先,`frame`是HTML4标准的一部分,它通过`<frameset>`...
HTML5标准中不再推荐使用frameset和frame标签,提倡使用`<iframe>`元素作为替代,它可以在页面中嵌入其他网页,同时提供了更好的可访问性和控制。 8. **Iframe的使用**: `<iframe>`比frameset更灵活,可以动态...
在HTML中,frameset定义了一个框架集,而frame和iframe则用于嵌入单独的HTML文档。 1. **框架编程概述**: - 一个HTML页面可以包含一个或多个子框架,通常通过`<iframe>`标签实现,每个`iframe`可以显示独立的HTML...
由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame 所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地...
在编程领域,特别是Web开发中,`frame`和`parent`的概念主要与HTML框架(Frames)和DOM(Document Object Model)结构相关。`frame`是HTML4时代的一个特性,允许网页分割成多个独立的浏览区域,每个区域可以加载不同...
`name`属性可以被添加到`<iframe>`、`<frameset>`、`<frame>`等元素中,用于标识特定的框架或窗口。这个属性值在`target`属性中作为目标引用,实现内容的定向加载。 ### 关键知识点二:在`frameset`对象中实现多...
2. frameset和frame标签:在较早版本的HTML中,frameset和frame是用于定义一组框架的标签,它们可以创建一个多窗口的框架集。frameset定义框架集,而每个frame定义一个单独的框架。不过,由于frameset和frame已经...
在HTML中,`<FRAMESET>`和`<FRAME>`是用于定义框架结构的主要标签。`<FRAMESET>`标签定义了一个包含多个框架的容器,而`<FRAME>`则定义了每个单独框架的内容来源。 - **<FRAMESET>**:用于定义一组框架,可以指定...
然而,"iframe"(内联框架)与frameset和frame有所不同。iframe是在一个HTML文档内部嵌入另一个HTML文档的元素,它不需要frameset来定义布局。例如: ```html <iframe src="embedded_page....
在网页设计和开发中,`frame`框架是一个重要的概念,它允许我们将网页分割成多个独立的区域,每个区域可以加载不同的HTML文档。这样的设计能够帮助我们实现内容的分区展示,提高网页的组织性和交互性。在本示例中,...