当前位置： 移动技术网 > IT编程>网页制作>HTML > 【HTML】Frameset 的使用 来看看我是怎么划分网页的吧！

【HTML】Frameset 的使用 来看看我是怎么划分网页的吧！

2020年07月24日  | 移动技术网IT编程  | 我要评论
1.一个简单的 HTML 文件

一个普通 HTML 文件的结构可以非常简单，你看：

<html>
<head>
    <title>标题</title>
</head>
<body>
	网页内容
</body>
</html>

我们可以把以上所示代码保存在一个后缀为.html的文件里（比如demo.html），然后双击在浏览器打开就可以看到效果了。
body内容
大家可以看到，网页内容是写在<body></body>标签之间的，body就好像是一个盛放网页内容的容器，也就是我们浏览网页时所能看到的部分。

某人说了，兄弟你这body不好使啊，我要是想同时看三部片 三篇文章还得打开三个网页来回切换不方便啊，能不能给我整到一个页面里，方便我“学习”！

2.body 的替身 frameset

你body干不了的事，我frameset可以，滚开，我上！

<html>
<head>
    <title>标题</title>
</head>
<frameset>

</frameset>
</html>

如此，body被干下去了，frameset说了，一山不容二虎，你我必走一个。

不能将<body></body>标签与 <frameset></frameset> 标签同时使用！

但是这frameset虽然强大，但它需要的条件也多，要想一个页面改成同时显示三个页面，就得划分一下地盘，既然是划地盘，你得告诉我按什么比例去划分吧。

所以再给它加个属性，给我竖着分，各占50%：

<frameset cols="50%,50%">	
</frameset>

给我横着分，上边40%，剩下的（*）是下边：

<frameset rows="40%,*">
</frameset>

地盘划分完成了，里面该显示片 学习内容了，frameset又说了，显示可以，不要在我这里乱涂乱画，你有两个区域，给你分配两个秘书（frame），把你要展示的那个什么片的地址，不是，学习内容，告诉我的秘书（frame的src），他们会帮你显示的，其它的就不用你操心了。

那就左边显示百度，右边显示hao123吧：

<frameset cols="50%,50%">
	<!-- 秘书1 -->
	<frame src="https://www.baidu.com"></frame>
	<!-- 秘书2 -->
	<frame src="https://www.hao123.com"></frame>
</frameset>

左右划分
还真可以，把第二种情况给我看看：
上下划分
嗯，现在好像挺好的了，但是这中间的分界线好像可以随便移动啊（鼠标放到分界线上可以左右或者上下拖动改变区域大小），那不行，你不能随便改变我的地盘大小，这时候秘书（frame）说了，给我点好处，我说了算：

<frameset rows="40%,*">
	<frame src="https://www.baidu.com" noresize="noresize"></frame>
	<frame src="https://www.hao123.com"></frame>
</frameset>

给第一个秘书送上了noresize="noresize"，现在第一个区域大小就定住了，第二个区域也就根据第一个的区域大小决定了，就一道墙，你动不了了，我还动啥。

某人：”别忘了我们的约定，我要同时显示三个页面。“
frameset：“显示三个是可以，但总共就这么点地方，还被你分成了两个部分，那你说接下来怎么分。”
某人：”把上面的部分再给我分成两部分。“
frameset：“没问题，那我得再叫个兄弟“。

<frameset rows="40%,*">
	<!-- frameset 的兄弟 -->
	<frameset cols="50%,*">
		<!-- frameset 的兄弟的秘书1 -->
		<frame src="https://www.baidu.com"></frame>
		<!-- frameset 的兄弟的秘书2 -->
		<frame src="https://www.hao123.com"></frame>
	</frameset>
	<!-- frameset 的秘书2 -->
	<frame src="https://www.hao123.com"></frame>
</frameset>

可以看到，frameset为了完成任务，把它的第一个秘书给开除了，让它的兄弟顶上，相当于又扮演它的角色，而且还有两个秘书。

因为第一个收礼的秘书（frame）被开除了，这上下区域的分界线又可以随便被更改了，没办法，给掌管上下地盘的第二个秘书再送一次吧，又想了想，还是一次性办利索吧，给掌管左右区域大小的秘书也送上点礼吧。

<frameset rows="40%,*">
	<!-- frameset 的兄弟 -->
	<frameset cols="50%,*">
		<!-- frameset 的兄弟的秘书1 -->
		<frame src="https://www.baidu.com" noresize="noresize"></frame>
		<!-- frameset 的兄弟的秘书2 -->
		<frame src="https://www.hao123.com" noresize="noresize"></frame>
	</frameset>
	<!-- frameset 的秘书2 -->
	<frame src="https://www.hao123.com" noresize="noresize"></frame>
</frameset>

三国鼎立
被弄下岗的body看了之后很生气，凭什么，你frameset虽然牛B，但是不一定所有浏览器都认可，而我body才是公认的男神！

如果浏览器不支持框架，给不支持框架的浏览器添加 <noframes> 标签。

那就给body点面子，当浏览器不支持frameset的时候，再找个助理把body请出来给大家说明一下。

<frameset rows="40%,*">
	<!-- frameset 的兄弟 -->
	<frameset cols="50%,*">
		<!-- frameset 的兄弟的秘书1 -->
		<frame src="https://www.baidu.com" noresize="noresize"></frame>
		<!-- frameset 的兄弟的秘书2 -->
		<frame src="https://www.hao123.com" noresize="noresize"></frame>
	</frameset>
	<!-- frameset 的秘书2 -->
	<frame src="https://www.hao123.com" noresize="noresize"></frame>
	<!-- frameset 的助理 -->
	<noframes>
		<body>
			您的浏览器不支持框架
		</body>
	</noframes>
</frameset>

不过，假如你添加包含一段文本的<noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

完。

本文地址：https://blog.csdn.net/ZhangJiWei_2019/article/details/107541378

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网