html中frameset、frame、iframe框架用法小结

本文总结html中与框架相关的三个标签frameset、frame、iframe的用法,下面是一些简单的代码示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
		<title>测试</title> 
	</head>
		<frameset cols="25%,50%,25%">
			<frame src="http://www.baidu.com/" noresize="noresize" />
			<frameset rows="25%,50%,*">
				<frame src="http://www.admin5.com/" />
				<frame src="http://www.hand-china.com/" />
				<frame src="http://yedward.net/" />
			</frameset>
			<frame src="http://yedward.net/" />
			<noframes>
				<body>您的浏览器无法处理框架</body>
			</noframes>
		</frameset>
</html>

注意,frameset不能和body在一起用。另外,如果浏览器不支持frameset、frame、iframe等标签,建议加上noframes标签,显示提示用户的内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
		<title>测试</title> 
	    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
	    <script type="text/javascript" src="ext4/ext-all.js"></script>
	</head>
		 <frameset cols="10%,*" rows="100%">
		 	<frame src="navi.html" noresize="noresize" />
		 	<frame src="content.html" name="content"/>
		 	<noframes>
		 		<body>您的浏览器无法处理框架!</body>
		 	</noframes>
		 </frameset>
</html>

下面是各个页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>navi.html</title>
</head>
<body>
	<ul>
		<li><a href="http://www.baidu.com/" target="content">百度</a></li>
		<li><a href="http://www.qq.com/" target="content">腾讯</a></li>
	</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>content.html</title>
<style type="text/css">
html, body {
	margin : 0;
	width : 100%;
	height : 100%;
}
</style>
</head>
<body>
	<iframe src="http://yedward.net/" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</body>
</html>

注意使用iframe的时候,想要height="100%"生效,需要设置它的父容器的height="100%",否则会有问题!

本文标题:html中frameset、frame、iframe框架用法小结

本文链接:http://yedward.net/?id=245

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章