欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-28 13:20:27
1.一个简单的 HTML 文件一个普通 HTML 文件的结构可以非常简单,你看: 标题网页内容我们可以把以上所示代码保存在一个后缀为.html的文件里(比如demo.html),然后双击在浏览器打开就可以看到效果了。大家可以看到,网页内容是写在<...
1.一个简单的 HTML 文件

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

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

我们可以把以上所示代码保存在一个后缀为.html的文件里(比如demo.html),然后双击在浏览器打开就可以看到效果了。
【HTML】Frameset 的使用 来看看我是怎么划分网页的吧!
大家可以看到,网页内容是写在<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),把你要展示的那个什么片的地址,不是,学习内容,告诉我的秘书(framesrc),他们会帮你显示的,其它的就不用你操心了。

那就左边显示百度,右边显示hao123吧:

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

【HTML】Frameset 的使用 来看看我是怎么划分网页的吧!
还真可以,把第二种情况给我看看:
【HTML】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>

【HTML】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