内嵌框架iframe

最新推荐文章于 2024-07-25 11:26:35 发布

yy310585

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量906

点赞数

分类专栏：前端 html 文章标签： html

本文链接：https://blog.csdn.net/yy310585/article/details/113811713

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

内嵌框架iframe

内嵌框架就是在网页中嵌入一个网页，并让它在上一级网页中显示
内嵌框架使用的标签是iframe标签
- <iframe src=" URL "></iframe>
- URL 指定独立网页的路径
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>展示图片</title>
	</head>
	<body>
		<iframe name="photo" src="图片导航.html" width="20%" height="900px"></iframe>
		<iframe name="my_iframe" src="默认展示页面.html" width="78%" height="900px"></iframe>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片导航</title>
	</head>
	<body>
		<h1>我喜欢的图片展示</h1>
		<ul>
			<li><a href="img/CHiCO with HoneyWorks.jpg" target="my_iframe" >CHICO1</a></li>
			<li><a href="img/CHiCO with HoneyWorks2.jpg" target="my_iframe">CHICO2</a></li>
			<li><a href="img/exia.jpg" target="my_iframe">exia</a></li>
			<li><a href="img/睡觉的北极狐.jpg" target="my_iframe">北极狐</a></li>
			<li><a href="img/祈-1.jpg" target="my_iframe">祈妹</a></li>
			<li><a href="img/阳光穿透加拉霍奈国家公园中的森林.jpg" target="my_iframe">森林</a></li>
		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title><默认展示页面/title>
	</head>
	<body>
		默认展示列表,点击图片链接显示
	</body>
</html>

框架集合

frameset 元素可定义一个框架集
它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性。
框架集合：和body是并列的概念，不能将框架集合放入body中
代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>框架集合</title>
	</head>
	<frameset rows="20%,*,30%">
		<frame src="" >
		<frameset cols="20%,*,30%">
			<frame src="" >
			<frame src="" >
			<frame src="" >
		</frameset>
		<frameset cols="50%,*">
			<frame src="" >
			<frame src="" >
		</frameset>
	</frameset>
</html>

yy310585

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内嵌框架iframe

内嵌框架iframe内嵌框架就是在网页中嵌入一个网页，并让它在上一级网页中显示内嵌框架使用的标签是iframe标签<iframe src=" URL "></iframe>URL 指定独立网页的路径代码示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>展示图片</title> </head>
复制链接

扫一扫

专栏目录