首页  >  文章  >  web前端  >  frameset标签、frame标签、iframe标签的使用分析

frameset标签、frame标签、iframe标签的使用分析

巴扎黑
巴扎黑原创
2017-06-27 09:59:312712浏览


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

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两属性尽量不要同在一个标签中使用。若要实现下图架构,代码正确写法为:


  

  

    

    

【即,若想即使用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标签之外。

 

四、综合示例

综合示例

</span></span></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"><body></span></span></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"><p>对不起,您的浏览器不支持“框架”!</p></span></span></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei"></body></span></span></p> <p style="text-indent:2em"><span style="background-color:rgb(255,255,255)"><span style="font-family:Microsoft YaHei">

【说明】

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

 

 

最后需要说明一点:

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


或者


解决方法如下:

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

 

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

以上是frameset标签、frame标签、iframe标签的使用分析的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn