html框架iframe与frameset的介绍

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了html框架iframe与frameset的介绍前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<iframe>标签规定一个内联框架,一个内联框架被用来在当前 HTML 文档中嵌入另一个文档,通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

1 <iframe src="URL"></iframe><!--iframe语法-->

 该URL指向不同的网页,将窗口内容显示为URL地址指向页面。

Iframe - 设置高度与宽度:height和width属性用来定义iframe标签的高度与宽度;属性默认以像素为单位,但是你可以指定其按比例显示 (如:"80%").需要注意的是 一些旧的浏览器不支持 iframe,如果浏览器不支持 iframes 则不会显示。

=https://www.cnblogs.com/dhnblog/p/12301706.html" width="320" height="240">

Iframe - 移除边框:frameborder属性用于定义iframe表示是否显示边框,设置属性值为 "0" 移除iframe的边框

="demo_iframe.htm" frameborder="0">

使用iframe来显示目录链接页面,iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性额e.g:点击链接显示是在iframe里面

 name="iframe_a">
2 p><a href="http://www.w3cschool.cn" target>W3CSCHOOL.CN</a>
 1 <!DOCTYPE html 2 html 3 head> 
 4 meta charset="utf-8" 5 title>W3Cschool在线教程(w3cschool.cn) 6  7 body 8 ="/statics/demosource/demo_iframe.htm" 9 ="https://www.w3cschool.cn"10 b>注意:> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。11 12 >

HTML iframe 标签/<iframe>定义一个内联的iframe/iframe 标准属性

  • class规定元素的类名(classname)
  • id规定元素的唯一 id
  • style规定元素的行内样式(inline style)
  • title规定元素的额外信息(可在工具提示中显示)

HTML <frameset>标签 - HTML5 不支持/<frameset>标签在一个页面中设置一个或多个框架,用<frameset></frameset>代替了<body></body>,不能出现在body标签里。

frameset>语法:frameset- 建立框架的标记,将在其中定义各个框架。/frame src- 指示框架显示内容URL地址。
 2   3 
 4   5    frame ="menu.html" 6    ="content.html" 7   9 
 - 设置行列比例
标签中我们使用rows设置行的占页面的百分比;cols设置列的所占百分比。
13   14     
15   frameset rows="20%,*"16       ="title.html"17       cols="30%,1)">18           19           20       21   22 >

frameset cols- 确定每个框架列所占百分比。在前面的示例中,我们已经确定第一框架将占据所示区域的30%,并且我们使用“*”符号来指示剩余百分比。
frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中,我们选择第一框架为20%,剩下的剩余空间将在menu.html和content.html之间划分。


<frameset> - 设置边框/框架有一些边框线,大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。/注意:frameset和frameborder是相同的属性。

 2    4   border="0" framespacing rows 5        6        cols 7            8            9       10   >

frameborder-设置边框, 0值表示没有边框/border- 修改边框的粗细(由Netscape浏览器使用)/framespacing- 修改边框的粗细(由Internet Explorer浏览器使用)


<frameset> - 设置名字/<frameset>标签中我们使用name属性命名每个框架,而不是内容页面。

name="title" src 7       ="menu" 8       ="content">    
>

<frameset> - 设置滚动/<frameset>标签中我们使用noresize设置禁止用户拖拉框架大小;scrolling用于设置滚动条是否显示。noresize- 不允许用户更改其尺寸/scrolling- 设置滚动条是否显示

 3     
="2"="1"="title.html" noresize scrolling="no"="4"="menu.html" scrolling="auto" noresize="content.html"="yes">

拓展:网页DIV+CSS布局与ifame传统布局对比

概括:关于iframe与frame的区别在我看来:iframe翻译过来是嵌套,其实就是把别的页面嵌套到自己的页面进来<iframe src="嵌套目标文件" frameborder="0"></iframe>;而这个frame是frameset实现局部刷新的基石,没有frame,frameset就无法实现局部刷新,同时要注意的是frameset与body不能同时出现!

参考:https://www.w3cschool.cn/html/html-iframes.html

总结


以上是前端之家为你收集整理的html框架iframe与frameset的介绍全部内容,希望文章能够帮你解决html框架iframe与frameset的介绍所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。