HTML iframe和frameset的区别_动力节点Java学院整理

所属分类: 网页制作 / HTML/Xhtml 阅读数: 1178
收藏 0 赞 0 分享

简介

1.<iframe> 标签:iframe 是个内联框架,是在页面里生成个内部框架。

2.<frameset> 标签:frameset定义一个框架集,包含多个子框架,每个框架都有独立的文档。

<iframe> 标签

iframe 是个内联框架,是在页面里生成个内部框架。

<iframe></iframe>

属性

frameborder{int}:是否显示框架的边框;

src{URL}:指定一个资源(如网页、图片)的uri;

scrolling{boolean}:是否显示框架的滚动条;

width{int}:定义iframe的宽度;

height{int}:定义iframe的高度;

示例

<body>
<h3>HTML标签演示</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>

注意事项

在 "<iframe>我是内容</iframe>" 内添加内容时,在展示页面不会显示添加的内容。所以还是使用src属性指定一个页面吧。

应用场景

1) 版本升级页面,版本日志过多,可以把升级的信息放到一个iframe里。

2) 富文本编辑框,如博客园的【新建随笔】区域。

<frameset> 标签

frameset定义一个框架集,包含多个框架,每个框架都有独立的文档。

格式

<frameset >
  <frame src=a.htm />
  <frame src=b.htm />
  <noframes></noframes>
</frameset> 

子项说明

<framesrc=a.htm /> :子框架 <noframes></noframes>:浏览器不支持此框架的时,显示的内容。

属性

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> 

注意事项

使用frameset标签时,注意要去掉外层的<body></body>标签。

子框架间的操作

参照示例代码,frm1更改frm2的子集指向的页面:window.parent.frames["frm2"].location.href = 'b.htm'

应用场景

1) 后台页面的管理,左边显示 菜单,右边框架 显示详细页面。

2) 功能菜单页面,如bbs.csdn.net

小知识

  浏览页面中的框架时,在框架页面内 点击右键,会多出框架的信息。

以chrome为例:

更多精彩内容其他人还在看

HTML常用标签大全及html标签的特点

本篇文章给大家整理些关于html常用标签大全及html标签的特点,希望对大家学习html相关知识有所帮助,感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

HTML页面3秒后自动跳转的三种常见方法

在项目中,我们经常会遇到这样一个功能:如何实现页面N秒后自动跳转。其实方法很简单,下面小编通过本文给大家分享HTML页面3秒后自动跳转的三种常见方法,对html页面3秒后自动跳转的相关知识感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

HTML实现页面自动跳转的五种方法

本文通过五个实例给大家介绍html实现页面自动跳转的五种方法,对html页面跳转相关知识感兴趣的朋友一起学习吧
收藏 0 赞 0 分享

举例讲解HTML中META标签的一些使用技巧

这篇文章主要介绍了HTML中META标签的一些使用技巧,共举了10个小例子,HTML5中META标签也有演进,可以说是HTML学习中的重要知识点,需要的朋友可以参考下
收藏 0 赞 0 分享

dns-prefetch是什么 前端优化:DNS预解析提升页面速度

在网页体验中我们常会遇到这种情况,即在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时会遇到请求延时非常严重的情况。那么有没有方法去解决这种请求严重延时的现象呢
收藏 0 赞 0 分享

HTML初学者适用的十五条最佳实践

这篇文章主要为HTML初学者推荐了适用的三十条最佳实践,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入解析HTML的table表格标签与相关的换行问题

这篇文章主要介绍了HTML的table表格标签与相关的换行问题,文中给出了强制换行和强制不换行的解决方案,需要的朋友可以参考下
收藏 0 赞 0 分享

HTML代码书写规范指南

这篇文章主要介绍了HTML代码书写规范指南,包括对格式和字符编码以及注释等方面的一些普遍约定俗成的约束,需要的朋友可以参考下
收藏 0 赞 0 分享

利用iframe在网页中显示天气附效果截图

这篇文章主要介绍了利用iframe在网页中显示天气,这个功能还是比较实用的,实现起来也比较容易,需要的朋友可以看看
收藏 0 赞 0 分享

HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法

这篇文章主要介绍了HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多