关于框架标签frameset、frame、iframe

最新推荐文章于 2022-03-13 17:50:38 发布

BossNoNo

最新推荐文章于 2022-03-13 17:50:38 发布

阅读量1.4k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weicy1510/article/details/83622487

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

框架结构标签`<frameset>`

定义框架结构，rows/columns 的值规定了每行或每列占据屏幕的面积
一般 <body> 与 <frameset> 不同时使用。

框架标签`<frame>`

Frame 标签定义了放置在每个框架中的 HTML 文档。
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
例：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<frameset rows="120,*">
	<frame src="top.html">
	<frameset cols="15%,*" >
		<frame src="left.html">
		<frame name="main-frame" src="right-1.html" >
	</frameset>
</frameset>
</html>

<!-- left.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="right-1.html" target="main-frame">right-1.html</a>
	<a href="right-2.html" target="main-frame">right-2.html</a>
	<a href="right-3.html" target="main-frame">right-3.html</a>
</body>
</html>

效果大致如下：
在这里插入图片描述
更多详情见：http://www.w3school.com.cn/html/html_frames.asp

框架标签 `<iframe>`

HTML5 不再支持 <frameset> 和 <frame> ，以后需要用到框架时尽量使用 <iframe>。
<iframe> 标签定义一个内联框架。
使用 CSS 为 <iframe>（包括滚动条）定义样式。
例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
*{margin:0;}
</style>
<body>
	<iframe name="topFrame" width="100%" height="400px" src="http://www.sina.com.cn" ></iframe>
	<p><a  href="http://www.sina.com.cn" target="topFrame">新浪</a> 
	<a target="topFrame" href="http://baidu.com">百度</a></p>
</body>
</html>