Html中框架的使用

1.框架页面

几个重要的概念:框架集和框架。

我们先了解一下上面的概念。

框架集是若干框架的集合,利用框架集可以定义框架结构,实现分割浏览器窗口的功能。

框架集用<frameset></frameset>来表示


框架:每个框架就是一个区域,所有的框架组合成了框架集

框架用<frame></frame>来表示


了解了基本概念之后,有几点是我们需要知道和注意的

a.标记<frameset>可以嵌套使用。

b.frameset的cols和rows属性:

cols用于设定分割左右窗口的高度,各数值之间用“,”隔开,也可设为浏览器窗口尺寸的百分比%,“*”表示剩余部分。

rows用于设定分割上下窗口的高度。其设置方法和cols类似。

c.框架集文件是一个特殊的HTML文件,它的body部分可以是空的。


接下来就看个例子。

主界面:

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>框架的使用</title>
	</head>
	<frameset rows='200px,200px,*'>	/*将整个页面分为上下三个部分,第一部分高200px,第二部分高200px,

第三部分为剩下的高度*/ <frame src='sj03-1.html' name='frame1'> <frame src='sj03-3.html' name='frame2'> <frame src='sj03-5.html' name='frame3'> </frameset> </html>

第一个框架载入“sj03-1.html”的网页。

第二个框架载入“sj03-3.html”的网页

等等,依此类推。

’注意:这里的src引用的是相对地址

我们可以通过实现"sj03-1.html"来展现更多的功能。

sj03-1.html实现:

<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<title>
		超链接
	</title>
</head>
<body>
	<p>
	<a href="https://www.baidu.com" target='frame3'>点击弹出百度</a>
	</p>
	<p>
	<a href="https://www.zhihu/explore" target='frame3'>点击弹出知乎</a>
	</p>
</body>
</html>
通过target属性,可以让我们点击“点击弹出百度”和“点击弹出知乎”时,让百度和知乎的页面在第三个框架内显示。

2.页内框架的使用

页内框架和页面框架的区别就是,页内框架爱是普通页面中的一个特殊区域,即普通页面中混杂着若干个框架,通常为表格的单元格;

而页面框架则是整个页面就是一个框架。


将表格的某个单元格定义为页内框架的方法如下:

<td> <iFrame src=? name=? width=? height=?/> </td>

src指定预载页面内容,name给页内框架命名,方便自定义的链接指向该框架。


我们还是来看个例子。

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>
			实验四——页内框架制作
		</title>
	</head>
	<body>
		<table border='1' bordercolor='red'>
			<tr>
				<td colspan='2' align='center'>白居易</td>
			</tr>
			<tr> <td align='center' valign='center'>
				<a href="01.html" target='123'> 弹出1</a><p>
				<a href="02.html" target='123'>弹出2</a>				
			</td>
			<td><iframe src="03.html" name='123'></iframe> </td>
			</tr>
		</table>
	</body>
</html>

相信看了上面的例子后,这个例子也就很好理解。

首先name为‘123’的框架会先载入‘03.html’这个页面;

当我们点击‘弹出1’后,会在name为‘123’的框架内显示‘01.html’这个页面

当我们点击‘弹出2’后,会在name为‘123’的框架内显示‘02.html’这个页面




  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值