【HTML】Frameset 的使用 来看看我是怎么划分网页的吧!
1.一个简单的 HTML 文件
一个普通 HTML 文件的结构可以非常简单,你看:
<html>
<head>
<title>标题</title>
</head>
<body>
网页内容
</body>
</html>
我们可以把以上所示代码保存在一个后缀为.html
的文件里(比如demo.html
),然后双击在浏览器打开就可以看到效果了。
大家可以看到,网页内容是写在<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
上一篇: Vue之时间过滤器,CV即可
下一篇: HTML和CSS学习部分总结1