html框架iframe与frameset的介绍
<iframe>标签规定一个内联框架,一个内联框架被用来在当前 html 文档中嵌入另一个文档,通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
1 <iframe src="url"></iframe><!--iframe语法-->
该url指向不同的网页,将窗口内容显示为url地址指向页面。
iframe - 设置高度与宽度:height和width属性用来定义iframe标签的高度与宽度;属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%").需要注意的是 一些旧的浏览器不支持 iframe,如果浏览器不支持 iframes 则不会显示。
1 <iframe src=https://www.cnblogs.com/dhnblog/p/12301706.html" width="320" height="240"></iframe>
iframe - 移除边框:frameborder属性用于定义iframe表示是否显示边框,设置属性值为 "0" 移除iframe的边框
1 <iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用iframe来显示目录链接页面,iframe可以显示一个目标链接的页面,目标链接的属性必须使用iframe的属性额e.g:点击链接显示是在iframe里面
1 <iframe src="demo_iframe.htm" name="iframe_a"></iframe> 2 <p><a href="http://www.w3cschool.cn" target="iframe_a">w3cschool.cn</a></p>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>w3cschool在线教程(w3cschool.cn)</title> 6 </head> 7 <body> 8 <iframe src="/statics/demosource/demo_iframe.htm" name="iframe_a"></iframe> 9 <p><a href="https://www.w3cschool.cn" target="iframe_a">w3cschool.cn</a></p> 10 <p><b>注意:</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。</p> 11 </body> 12 </html>
html iframe 标签/<iframe>定义一个内联的iframe/iframe 标准属性
- class规定元素的类名(classname)
- id规定元素的唯一 id
- style规定元素的行内样式(inline style)
- title规定元素的额外信息(可在工具提示中显示)
html <frameset>标签 - html5 不支持/<frameset>标签在一个页面中设置一个或多个框架,用<frameset></frameset>代替了<body></body>,不能出现在body标签里。
1 <frameset>语法:frameset- 建立框架的标记,将在其中定义各个框架。/frame src- 指示框架显示内容url地址。
1 <html> 2 <head></head> 3 4 <frameset> 5 <frame src="menu.html"> 6 <frame src="content.html"> 7 </frameset> 8 </html> 9 10 <frameset> - 设置行列比例 11 <frameset>标签中我们使用rows设置行的占页面的百分比;cols设置列的所占百分比。 12 <html> 13 <head></head> 14 15 <frameset rows="20%,*"> 16 <frame src="title.html"> 17 <frameset cols="30%,*"> 18 <frame src="menu.html"> 19 <frame src="content.html"> 20 </frameset> 21 </frameset> 22 </html>
frameset cols- 确定每个框架列所占百分比。在前面的示例中,我们已经确定第一框架将占据所示区域的30%,并且我们使用“*”符号来指示剩余百分比。
frameset rows- 确定将显示的每个框架行所占百分比。在前面的示例中,我们选择第一框架为20%,剩下的剩余空间将在menu.html和content.html之间划分。
<frameset> - 设置边框/框架有一些边框线,大多数时候都不需要。<frameset>标签中我们使用frameborder和framespacing属性可以擦除它们。/注意:frameset和frameborder是相同的属性。
1 <html> 2 <head></head> 3 4 <frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> 5 <frame src="title.html"> 6 <frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> 7 <frame src="menu.html"> 8 <frame src="content.html"> 9 </frameset> 10 </frameset> 11 </html>
frameborder-设置边框, 0值表示没有边框/border- 修改边框的粗细(由netscape浏览器使用)/framespacing- 修改边框的粗细(由internet explorer浏览器使用)
<frameset> - 设置名字/<frameset>标签中我们使用name属性命名每个框架,而不是内容页面。
1 <html> 2 <head></head> 3 4 <frameset rows="20%,*"> 5 <frame name="title" src="title.html"> 6 <frameset cols="30%,*"> 7 <frame name="menu" src="menu.html"> 8 <name="content" src="content.html"> 9 </frameset> 10 </frameset> 11 </html>
<frameset> - 设置滚动/<frameset>标签中我们使用noresize设置禁止用户拖拉框架大小;scrolling用于设置滚动条是否显示。noresize- 不允许用户更改其尺寸/scrolling- 设置滚动条是否显示
1 <html> 2 <head></head> 3 4 <frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> 5 <frame src="title.html" noresize scrolling="no"> 6 <frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> 7 <frame src="menu.html" scrolling="auto" noresize> 8 <frame src="content.html" scrolling="yes" noresize> 9 </frameset> 10 </frameset> 11 </html>
概括:关于iframe与frame的区别在我看来:iframe翻译过来是嵌套,其实就是把别的页面嵌套到自己的页面进来<iframe src="嵌套目标文件" frameborder="0"></iframe>;而这个frame是frameset实现局部刷新的基石,没有frame,frameset就无法实现局部刷新,同时要注意的是frameset与body不能同时出现!
参考:
上一篇: HDU-2955-Robberies(0-1背包)
下一篇: 朱权:朱元璋第十七子,还帮朱棣夺得天下
推荐阅读
-
jquery append()方法教程与html()方法教程的区别及使用介绍
-
最常用的几个chm转html + html转chm方法与软件介绍
-
网页语言xhtml和html的概念与区别的详细介绍
-
innerHTML与jquery里的html()区别介绍
-
jquery中html、val与text三者属性取值的联系与区别介绍
-
php的ajax框架xajax入门与试用介绍
-
html框架之iframe和frame及frameset
-
关于HTML框架(frameset)的一些基本用法
-
请读下面的这句绕口令:ResourceManager中的Resource Estimator框架介绍与算法剖析
-
html中