10-12（HTML内嵌标签学习、框架标签学习、frameset登陆页面）

10.HTML内嵌标签学习

<html>
	<head>
		<title>内嵌标签学习</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h3>内嵌标签学习</h3>
		<hr />
		<!--
			内嵌标签:
				iframe
					src:要显示的网页资源路径
						可以是本地(相对路径)也可以是网络资源(URL)
						注意:
							默认当前页面打开及加载src指向的资源
					width:设置显示区域的宽度
					height:设置显示区域的高度
					name:设置内嵌区域的名字,结合超链接标签的target属性使用.
			作用:
				在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.
		-->
		<a href="http://www.baidu.com" target="_if">百度一下</a>
		<a href="http://www.so.com" target="_tt">360搜索</a><br />
		<iframe src="" width="48%" height="400px" name="_if"></iframe>
		<iframe src="" width="48%" height="400px" name="_tt"></iframe>
	</body>
</html>

运行结果如下所示

如结果所示，内嵌的结果是页面镶嵌在由frameset定位分割的两个方框中。

11.HTML框架标签学习

 <html>
	<head>
		<title>框架标签学习：</title>
		<meta charset="UTF-8"/>
	</head>
	<!--
		注意:
			第一步一定要删除body标签
		框架标签学习:
			frameset
				rows:按照行进行切分页面
				cols:按照列进行切分页面
				子标签:
					frame:进行切分区域的占位,一个frame可以单独加载网页资源.
						src:资源路径(本地或者网络)
						name:区域名,结合超链接使用
	-->
	<frameset rows="10%,*,10%">
		<frame src="frameset/top.html" />
		<frameset cols="10%,*">
			<frame src="frameset/left.html" />
			<frame src="frameset/right.html" name="_right"/>
		</frameset>
		<frame src="frameset/bottom.html" />
	</frameset>
</html>

然后在HTML学习文件下，建立4个HTML文件，包括bottom.html、top.html、right.html、left.html。具体操作过程如下

frameset中的程序具体如下

（1）top.html

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		我是 top
		<a href="../12-HTML-frameset登录页面.html" target="_top">退出</a>
	</body>
</html>

(2)bottom.html

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		我是 bottom
	</body>
</html>

(3)left.html

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<ul>
			<li><a href="http://www.baidu.com" target="_right">百度一下</a></li>
			<li><a href="http://www.taobao.com" target="_right">淘宝网</a></li>
			<li><a href="http://www.jd.com" target="_right">京东网</a></li>
		</ul>
	</body>
</html>

(4)right.html

<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		我是 right
	</body>
</html>

12.frameset登陆页面

html>
	<head>
		<title>登录页面</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<h3>欢迎访问506主页</h3>
		<hr />
		<a href="11-HTML-框架标签学习.html">点我登录主页</a>
	</body>
</html>

下边为具体的运行结果图

（1）登陆界面

（2）百度界面

（3）退出

上边内容参考自尚学堂java教程

奔跑的小脑斧

发布了48 篇原创文章 · 获赞 1 · 访问量 1126

私信关注

10-12（HTML内嵌标签学习、框架标签学习、frameset登陆页面）

猜你喜欢