七、内嵌框架

最新推荐文章于 2025-05-21 09:58:10 发布

ChengMeng11

最新推荐文章于 2025-05-21 09:58:10 发布

阅读量601

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/ChengMeng11/article/details/104932804

本文介绍了HTML中的内嵌框架（iframe），包括其作用、基本语法，如src、width、height等属性的使用，以及如何在框架中打开超链接。通过iframe，可以实现在一个页面中引用其他页面，提高代码复用性和灵活性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

七、内嵌框架

1、简介

使用iframe可以在一个页面中引用另一个页面，实现页面代码的复用，这样应用是非常的灵活。

2、基本语法

语法：

<iframe src=""></iframe>

常用属性;

src引用的页面
width/height宽度/高度像素或百分比
frameborder是否显示边框，取值：1（yes 显示边框）0（no 不显示边框）
scrolling是否显示滚动条，取值：yes（显示）no（不显示）auto（默认、自动调整）
name为框架定义名称

3、在框架中打开超链接

<iframe name="hello"></iframe>

<a href="链接地址" target="hello">链接的文本或图像</a>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<iframe src="7.2 top.html" width="100%" height="200" frameborder="0" scrolling="auto"></iframe>
	<h3>主体部分</h3>
	<hr>

	<a href="1.表格.html" target="hello">1.html</a>
	<a href="2.合并单元格.html" target="hello">2.html</a>

	<iframe src="./7.1 foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>

foot的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p>底部和版权</p>
</body>
</html>

topd 代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>网页</li>
		<li>咨讯</li>
		<li>视频</li>
		<li>图片</li>
		<li>知道</li>
		<li>文库</li>
		<li>贴吧</li>
	</ul>
</body>
</html>

案例：

在这里插入图片描述