027_html框架

最新推荐文章于 2022-07-03 01:35:53 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-07-03 01:35:53 发布

阅读量205

点赞数

分类专栏： html学习文章标签： html web前端

本文链接：https://blog.csdn.net/aihiao/article/details/108982651

版权

html学习专栏收录该内容

89 篇文章 2 订阅

订阅专栏

1. 通过使用框架, 你可以在同一个浏览器窗口中显示不止一个页面。每份html文档称为一个框架, 并且每个框架都独立于其他的框架。

2. <frameset>框架结构标签

2.1. <frameset>框架结构标签定义如何将窗口分割为框架。

2.2. 每个frameset定义了一系列行或列。您必须使用cols或rows属性。

2.3. rows/cols的值规定了每行或每列占据屏幕的面积。

2.4. 如果您希望验证某个包含框架的页面, 请确保DTD被设置为"Frameset DTD"。

2.5. 不能将<body></body>标签与<frameset></frameset>标签同时使用! 不过, 假如你添加包含一段文本的<noframes>标签, 就必须将这段文字嵌套于<body></body>标签内。

2.6. 可选属性

3. <frame>标签

3.1. <frame>标签定义frameset中的一个特定的窗口(框架)。

3.2. 可选属性

3.3. 在下面的这个例子中, 我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的25%。第二列被设置为占据浏览器窗口的75%。html文档"frame_a.htm"被置于第一个列中, 而html文档"frame_b.htm"被置于第二个列中:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

3.4. 假如一个框架有可见边框, 用户可以拖动边框来改变它的大小。为了避免这种情况发生, 可以在<frame>标签中加入: noresize="noresize"。

4. <noframes>标签

4.1. noframes元素可为那些不支持框架的浏览器显示文本。noframes元素位于frameset元素内部。

4.2. 如果浏览器有能力处理框架, 就不会显示出noframes元素中的文本。

4.3. 如果您希望frameset添加<noframes>标签, 就必须把其中的文本包装在<body></body>标签中!

5. 垂直框架例子

5.1. frame_cols.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>垂直框架</title>
	</head>
	<frameset cols="25%,50%,25%">
		<frame src="../frame_a.html">
		<frame src="../frame_b.html">
		<frame src="../frame_c.html">
	</frameset>
</html>

5.2. frame_a.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>框架 A</title>

		<style type="text/css">
			body{background-color: yellow;}
		</style>
	</head>

	<body>
		Frame A
	</body>
</html>

5.3. frame_b.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>框架 B</title>

		<style type="text/css">
			body{background-color: gray;}
		</style>
	</head>

	<body>
		Frame B
	</body>
</html>

5.4. frame_c.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>框架 C</title>

		<style type="text/css">
			body{background-color: green;}
		</style>
	</head>

	<body>
		Frame C
	</body>
</html>

5.5. 效果图

6. 水平框架例子

6.1. frame_rows.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>水平框架</title>
	</head>
	<frameset rows="25%,50%,25%">
		<frame src="../frame_a.html">
		<frame src="../frame_b.html">
		<frame src="../frame_c.html">
	</frameset>
</html>

6.2. 效果图

7. noframes例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>noframes标签</title>
	</head>
	<frameset cols="25%,50%,25%">
		<frame src="../frame_a.html">
		<frame src="../frame_b.html">
		<frame src="../frame_c.html">
		<noframes>
			<body>您的浏览器无法处理框架!</body>
		</noframes>
	</frameset>
</html>

8. noresize属性例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>noresize属性</title>
	</head>
	<frameset cols="50%,*,25%">
		<frame src="../frame_a.html" noresize="noresize">
		<frame src="../frame_b.html">
		<frame src="../frame_c.html">
	</frameset>
</html>

9. 混合框架结构

9.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>混合框架结构</title>
	</head>
	<frameset rows="50%,50%">
		<frame src="../frame_a.html">
		<frameset cols="25%,75%">
			<frame src="../frame_b.html">
			<frame src="../frame_c.html">
		</frameset>
	</frameset>
</html>

9.2. 效果图

10. 导航框架

10.1. nav.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航框架</title>
	</head>
	<frameset cols="120,*">
		<frame src="contents.html">
		<frame src="../frame_a.html" name="showFrame">
	</frameset>
</html>

10.2. contents.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>框架 contents</title>
	</head>

	<body>
		<a href="../frame_a.html" target="showFrame">Frame A</a>
		<a href="../frame_b.html" target="showFrame">Frame B</a>
		<a href="../frame_c.html" target="showFrame">Frame C</a>
	</body>
</html>

10.3. 效果图

11. target属性值是_parent和_top

11.1. nav.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>导航框架</title>
	</head>
	<frameset cols="120,*">
		<frame src="contents.html">
		<frame src="../frame_a.html" name="showFrame">
	</frameset>
</html>

11.2. contents.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>框架 contents</title>
	</head>
	<body>
		<a href="../frame_a.html" target="showFrame">Frame A</a>
		<a href="../frame_b.html" target="_parent">Frame B</a>
		<a href="../frame_c.html" target="_top">Frame C</a>
	</body>
</html>

11.3. multiple.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>target属性值是_parent和_top</title>
	</head>
	<frameset rows="50%,50%">
		<frame src="../frame_a.html">
		<frame src="nav.html">
	</frameset>
</html>

11.4. 效果图