frameset标签、frame标签、iframe标签实现页面部局

系统管理员 2022-08-01 02:56 153阅读 0赞

frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。

frame局部刷新：<a href="???" target="frameName"></a> 把a标签的target设置成frame的名字，就会跳转到相应的fram中了，这样就能实现局部刷新。

frame知识点包括（frameset标签、frame标签、iframe标签）。下面就对其一一介绍。

**一、frameset**

**1. 属性**

①border

设置框架的边框粗细。

②bordercolor

设置框架的边框颜色。

③frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

④cols

纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、\*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“\*”表示该区域占用余下页面空间。例如：cols="25%,200,\*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。

⑤rows

横向分割页面。数值表示方法与意义与cols相同。

⑥framespacing

设置框架与框架间的保留的空白距离。

**2. 用例**

**注意1：**

cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构，代码正确写法为：

[![Frameset使用教程][Frameset]][Frameset_Frameset]

【即，若想即使用cols又使用rows，可利用frameset嵌套实现】

**注意2：**

意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。

意思是：浏览器窗口等分为四部分。

**二、frame**

**1. 属性**

①name

设置框架名称。此为必须设置的属性。

②src

设置此框架要显示的网页名称或路径。此为必须设置的属性。

③scrolling

设置是否要显示滚动条。设定值为auto, yes, no。

④bordercolor

设置框架的边框颜色。

⑤frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

⑥noresize

设置框架大小是否能手动调节。

⑦marginwidth

设置框架边界和其中内容之间的宽度。

⑧marginhight

设置框架边界和其中内容之间的高度。

⑨width

设置框架宽度。

⑩height

设置框架高度。

**2. 用例**

**三、iframe**

是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）

**1. 属性**

①align

设置垂直或水平对齐方式

②allowTransparency

设置或获取对象是否可为透明。

**2. 用例**

**注意：**

iframe标签与frameset、frame标签的验证方法不同，是 **XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。**

**四、综合示例**

<html>

<head>

</head>

<body>

<p>对不起，您的浏览器不支持“框架”！</p>

</body>

</noframes>

</frameset>

</html>

【说明】

<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body></body>标志对，然后才可以使用我们熟悉的任何标志。

**最后需要说明一点：**

如果将代码按照我以上所写写到VS中报错的话，例如：

[![Frameset使用教程][Frameset 1]][Frameset_Frameset 1]

或者

[![Frameset使用教程][Frameset 2]][Frameset_Frameset 2]

解决方法如下：

**工具→选项→文本编辑器→HTML→验证→Internet Explorer 6.0**

好了，通过以上内容，大家再多加练习，就会慢慢熟悉frame的相关知识了，用好了的话你会发现真的挺好。至于frame系列标签的事件方法，一般用的不是非常多，需要的话，大家自己再查吧。【呵呵，其实本人还没有用到过】

[Frameset]: http://s2.sinaimg.cn/middle/60452746t95e0089a58c1&690
[Frameset_Frameset]: /images/20220731/d220545146ea434f88df9cc5a66921ad.png
[Frameset 1]: http://s5.sinaimg.cn/middle/60452746t95e0b0b6f9c4&690
[Frameset_Frameset 1]: /images/20220731/e0a6a9d2a3f348ab8f90b952d23f9030.png
[Frameset 2]: http://s10.sinaimg.cn/middle/60452746t95e0ba310a79&690
[Frameset_Frameset 2]: /images/20220731/52e31c4f6f6949b78e1942e2cb6b6abe.png