HTML框架案例

最新推荐文章于 2025-07-02 13:44:01 发布

原创最新推荐文章于 2025-07-02 13:44:01 发布 · 7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#html #框架

HTML，CSS，JS的学习专栏收录该内容

14 篇文章

订阅专栏

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

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

项目目录

PAGE_A,B,C就是在网页上显示一句话这里就不做展示了

案例源码及效果展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>框架左中右布局案例</title>
	</head>
	<frameset cols="25%,50%,25%">
		<!--noresize属性框架是不可调整尺寸的-->
		<frame src="PAGE_A.html" noresize="noresize"/>
		<frame src="PAGE_B.html" />
		<frame src="PAGE_C.html" />
	</frameset>
</html>

效果展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>框架左中右布局案例</title>
	</head>
	<frameset cols="25%,50%,25%">
		<!--noresize属性框架是不可调整尺寸的-->
		<frame src="PAGE_A.html" noresize="noresize"/>
		<frame src="PAGE_B.html" />
		<frame src="PAGE_C.html" />
	</frameset>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航框架</title>
	</head>
	<frameset cols="25%,75%">
		<frame src="forward.html" />
		<frame src="PAGE_A.html" name="showFrame"/>
	</frameset>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航跳转页面</title>
	</head>
	<body>
		<a href="PAGE_A.html" target="showFrame">第一个页面</a><br />
		<a href="PAGE_B.html" target="showFrame">第二个页面</a><br />
		<a href="PAGE_C.html" target="showFrame">第三个页面</a><br />
	</body>
</html>