HTML框架

来源：互联网发布：王励勤多娜知乎编辑：程序博客网时间：2024/06/06 00:29

1、框架结构标签（frameset）

frameset定义将窗口设置为框架，每个frameset定义一系列的行或者列，rows/columns定义每行每列所占据屏幕的面积

2、<frame>框架标签

定义放置在每个框架中的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代码

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、内联框架

语法

可以用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可以作为连接对象

连接的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>

阅读全文

0 0