HTML框架
1、框架结构标签(frameset)
frameset定义将窗口设置为框架,每个frameset定义一系列的行或者列,rows/columns定义每行每列所占据屏幕的面积
2、<frame>框架标签
定义放置在每个框架中的html文档
例子:
<html>
<frameset cols="25%,50%,25%">
<frame src="bootstrap.html">
<frame src="layout.html">
<frame src="paragraphs.html">
</frameset>
</html>
结果
3、注意:(1)加入有一个框架有可见边框,用户可以拖动边框来改变他的大小。为避免这种情况,可以在<frame>标签中加上norerize="noreize"
(2)为不支持框架的浏览器添加 <noframes> 标签。
(3)不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)
4、混和框架结构
<html>
<frameset rows="10%,40%,50%">
<frame src="form.html" noresize="noresize" /
> #第一行的边框用户无法改变大小
<frame src="photo.html" noresize="noresize" / > #第二行的边框用户无法改变大小
<frameset cols="25%,50%,25%"> #第三行的边框用户可改变大小
<frame src="bootstrap.html" >
<frame src="layout.html" >
<frame src="paragraphs.html">
</frameset>
</frameset>
</html>
结果
5、导航框架
框架可以实现在同一浏览器窗口,浏览不同的页面。一个页面的超链接一般跳转到一个新的浏览器窗口,而导航框架可以通过超链接在同一窗口显示不同的页面。接下来展示一下导航链接的实现。
frame.html主页面,将页面分为两栏,其中Navigation.html包括三个超链接,即导航框架包含一个将第二个框架作为目标的链接列表。
frame.html代码
<html>
<frameset cols="120,*">
<frame src="Navigation.html">
<frame src="paragraphs.html" name="showframe">
</frameset>
</html>
Navigation.html代码
<!DOCTYPE html>
<html>
<body>
<a href="paragraphs.html" target="showframe">paragraph</a>
<a href="layout.html"target="showframe" >layout</a>
<a href="bootstrap.html"target="showframe" >bootstrap</a>
</body>
</html>
结果:
6、内联框架
语法
<iframe src="URL" ></iframe>
可以用width height 属性设置宽高 属性默认值为像素值 也可以用百分比设置
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>
<iframe src="http:www.baidu.com" width="600" height="400"></iframe>
</html>
结果:
iframe删除边框
frameborder属性规定是否显示iframe边框,属性值为“0”则可删除边框
<iframe src="hppt:www.baidu.com" width="600" height="400" frameborder="0">
iframe可以作为连接对象
连接的target属性必须引用iframe的name属性
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
</head>
<iframe src="layout.html" width="600" height="400" frameborder="0" name="baidu"></iframe>
<p><a href="http:www.baidu.com" target="baidu">百度</a></p>
</html>