打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
HTML iframe 和 frameset 的区别
iframe 和 frameset 都用于html页面的框架布局
1.<iframe> 标签
iframe 是个内联框架,是在页面里生成个内部框架。
1.1格式:<iframe></iframe>
1.2主要属性:
frameborder :是否显示框架的边框;
src :指定一个资源(如网页、图片)的uri;
scrolling :是否显示框架的滚动条;
width:定义iframe的宽度;
height:定义iframe的高度;
1.3优点:缩短页面的整体长度。
代码示例:
<body><h3>HTML标签演示</h3><iframe src=1.1-ShowHtml.htm ></iframe></body>
1.4 注意事项
在 "<iframe>我是内容</iframe>" 内添加内容时,在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。
1.5 应用场景:
①版本升级页面,版本日志过多,可以把升级的信息放到一个iframe里。
②富文本编辑框,如博客园的【新建随笔】区域。
2.<frameset> 标签
frameset 定义一个框架集,包含多个框架,每个框架都有独立的文档。
2.1格式:
<frameset >
<frame src=a.htm />
<frame src=b.htm />
<noframes></noframes>
</frameset>
2.2 子项说明:
<frame src=a.htm /> :子框架
<noframes></noframes>:浏览器不支持此框架的时,显示的内容。
注意:必须包含<body></body>标签。
2.3 属性:
frameset 属性:
rows :表示子框架按行的样式布局(
)。以2个子框架为例:rows="30%,*" ,表示第一个框架占整个页面30%的高度,第二个占剩下的;
cols :表示子框架按列的样式布局(
)。以2个子框架为例:cols="30%,*" ,表示第一个框架占整个页面30%的长度,第二个占剩下的;
noresize="noresize" :表示不调整子框架的范围。
frame 属性:
src :指向一个资源(如页面、图片等)的URI;
name :指定框架的名称,以便进行框架间的操作。
代码示例:
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>frameset 演示</title></head><frameset rows="30%,*" noresize="noresize"> <frame src=DateGrid.htm name="frm1" /> <frame src=Dialog.htm name="frm2"/> <noframes></noframes></frameset></html>
2.4 注意事项:
使用frameset标签时,注意要去掉外层的<body></body>标签。
2.5 子框架集间的操作
参照示例代码,frm1更改frm2的子集指向的页面:window.parent.frames["frm2"].location.href = 'b.htm'
2.6 应用场景
①后台页面的管理,左边显示 菜单,右边框架 显示详细页面。
②功能菜单页面,如bbs.csdn.net
3.小知识
浏览页面中的框架时,在框架页面内 点击右键,会多出框架的信息。
以chrome为例:
==================================系列文章==========================================
本篇文章:1.3 HTML iframe 和 frameset 的区别
Web开发之路系列文章
1.HTML
1.1HTML页面源代码布局介绍
1.2HTML基础控件介绍
1.3iframe 和 frameset 的区别
1.4name、id、class 的区别
1.5 table、form表单标签的介绍以及get和post提交方式
2.CSS 层叠样式表
2.1 CSS 选择器及各样式引用方式
2.2 CSS HTML元素布局及Display属性
2.3 CSS Float 浮动属性
2.4 CSS Position 定位属性
3.JavaScript介绍
3.1 JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
3.2 JavaScript function函数种类
3.3JavaScript Array对象
3.4JavaScript Date对象
3.5 JavaScript Math和Number对象
3.6JavaScript String对象
3.7 JavaScript Object对象
3.8 JavaScript 自定义对象
3.9JavaScript 属性介绍
3.10JavaScript 开发规范
4.Dom
4.1 Window对象 : 对浏览器的当前窗口进行操作。
4.2 Navigator对象 :对浏览器进行操作。包括获取浏览器的名称、平台、版本信息等等。
4.3 Screen对象 :对显示器屏幕进行操作。包括获取屏幕的高度、宽度。
4.4 Location对象 :对当前页面的URL进行操作。
4.5 Document对象 : 对HTML内的元素进行操作。
4.6 Event对象 :HTML元素的事件操作。
5.Jquery
5.1 Jquery选择器
5.2 常用的方法
5.3 对数组、字典进行操作
5.4 指定一个对象,获取相邻元素
5.5 动态操作HTML元素
5.6 事件操作
5.7 动画操作
5.8 Css操作
5.9 扩展插件
6.EasyUI 框架
7.其他技术
7.1 Ajax
7.2 正则表达式
只是记录了自己在学习、使用Web前端内容时的心得和碰到的问题。
参考文献:
1)http://www.w3school.com.cn/
2)《JavaScript权威指南(第六版)》
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
frame,iframe,frameset 的区别
frame,iframe,frameset之间的关系与区别 | 学步园
Frameset使用教程
JavaScript框架编程
详解iframe与frame的区别
网页的架构页面
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服