No.005 框架集和内联框架

最新推荐文章于 2024-10-17 09:40:47 发布

TKeyI

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量405

点赞数

文章标签： HTML 前端框架内联框架框架集

本文链接：https://blog.csdn.net/qq_36653473/article/details/88814524

版权

框架集和内联框架

1. 框架集frameset
2. 内联框架iframe

（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）

1. 框架集frameset

frameset标签可以在网页中定义一个框架集，用来组织多个窗口。HTML5标准中推荐使用框架集。

但有你没我，有frameset没body。frameset标签和body标签同级，两者不能同时存在。

除非使用< noframes >：

<frameset></frameset>
<noframes>
　　<body>
　　　　你的浏览器不支持frameset框架集
　　</body>
</noframes>

1.1 基本语法

<frameset cols|rows=" 25%,50%,* ">
	<frame src="https://www.baidu.com/">
	......
</frameset>

1.2 < frame />

frame标签定义frameset中的一个特定HTML文档。

常用属性有：

name：设置框架名称；
src：设置要显示网页的路径，必须设置；
scrolling：设置是否显示滚动条，值为auto|yes|no。

<frameset rows="100%">
　　<frame src="https://www.baidu.com" name="baidu" scrolling="no" />
</frameset>

1.3 cols和rows

cols和rows属性不会同时出现。

cols表示从纵向划分页面，rows表示从横向划分页面。
cols和rows
cols|rows的值规定了每行|每列占据的面积，如“ 25%,50%,* ”表示网页所占面积分别为25%、50%、25%，*表示剩下的面积。

1.4 简单实例

<frameset cols="45%,*" bordercolor="#bfa">
	<frame src="https://www.baidu.com" />
	<frameset rows="50%,*">
		<frame src="https://www.sogou.com/" />
		<frame src="https://www.so.com/" />
	</frameset>
</frameset>

简单实例1

2. 内联框架iframe

iframe元素会创建包含另外一个HTML文档的内联框架，即行内框架。

2.1 基本语法

<body>
	<iframe src="(网址)" name="(名称)" scrolling="(是否滚动)"></iframe>
</body>

2.2 常用属性

基本和< frame />相同：

name：设置框架名称；
src：设置要显示网页的路径，必须设置；
scrolling：设置是否显示滚动条，值为auto|yes|no。

2.3 简单实例

<body>
	<iframe name="web" width="500px" height="200px" src="https://www.baidu.com/"></iframe>
<p> 
	<a href="https://www.baidu.com/" target="web">百度</a>
	<a href="https://www.sogou.com/" target="web">搜狗</a>
</p>
</body>