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

夜辰姑娘_7735

夜辰姑娘_7735

2017-06-27

2931人浏览

原创


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标签之外。

 

四、综合示例

综合示例

对不起,您的浏览器不支持“框架”!

万圣节主题插画标签卡设计下载
万圣节主题插画标签卡设计下载

万圣节主题插画标签卡设计适用于万圣节标签卡设计 本作品提供万圣节主题插画标签卡设计的图片会员免费下载,格式为PSD,文件大小为5.6M; 请使用软件Photoshop进行编辑,作品中文字及图均可以通过软件修改和编辑;

下载

【说明】

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

 

 

最后需要说明一点:

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


或者


解决方法如下:

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

 

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

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

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

相关专题

更多
Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

2026.11.12

80

15

Go-Zero安装与goctl环境配置教程
Go-Zero安装与goctl环境配置教程

本专题围绕Go-Zero的安装与工具链配置展开,讲清Go版本要求、goctl安装方式、代理镜像、protoc依赖与环境变量设置,说明多版本共存、升级回退与CI流水线安装的做法,并整理安装阶段的常见报错与验证步骤。

2026.11.12

60

15

Go-Zero零基础入门教程
Go-Zero零基础入门教程

本专题整理Go-Zero的入门知识,从框架定位、环境准备到跑通第一个API服务,讲清目录分层、配置加载、日志与中间件的基本用法,并对比Gin、Kratos的差异,帮助Go开发者建立整体认知,判断它是否适合当前项目。

2026.11.12

40

15

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

140

12

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

2026.11.06

120

13

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

2026.11.06

120

10

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

100

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

80

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

100

16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML 代码实例
HTML 代码实例

共27课时 | 16.8万人学习

夸克AI浏览器使用手册
夸克AI浏览器使用手册

共0课时 | 0人学习