内嵌框架:内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示.
添加内嵌框架:<iframe src=" URL "></iframe> (scr属性是默认显示的内容)
展示图书案例:左侧显示书名,在右侧显示书的照片
书籍展示首页:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="书籍导航页面.html" height="700px" width="30%"></iframe>
<!--内嵌框架-->
<iframe name="iframe_my" width="67%" height="700px" src="img/think in java.jpg"></iframe>
</body>
</html>
左侧导航页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我喜欢的图书展示</h1>
<ul>
<li>
<a href="img/java核心技术.jpg" target="iframe_my">java核心技术</a>
</li>
<li>
<a href="img/think in java.jpg" target="iframe_my">think in java</a>
</li>
<li>
<a href="img/大话设计模式.jpg" target="iframe_my">大话设计模式</a>
</li>
<li>
<a href="img/深入理解java虚拟机.jpg" target="iframe_my">深入理解java虚拟机</a>
</li>
<li>
<a href="img/算法图解.jpg" target="iframe_my">算法图解</a>
</li>
</ul>
</body>
</html>
我们做一个小实验,邮箱的登录,我们不填写账号密码,直接登录,点击写信收信和草稿箱分别显示三张图片:
登录首页.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名:<input type='text'/><br />
密 码:<input type='password'/><br />
<a href='邮箱首页.html'>登录</a>
</body>
</html>
点击登录我们就进入了邮箱首页.html网页
邮箱首页.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe width="100%" height="100px" src="邮箱上侧页面.html"></iframe>
<iframe width="20%" height="600px" src="邮箱左侧导航.html"></iframe>
<iframe width="79%" height="600px" name="rightiframe"></iframe>
</body>
</html>
我们把邮箱首页分为三部分,点击邮箱左侧导航就在rightname显示图片
邮箱左侧导航:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>
<a href="img/QQ图片20230422135654.jpg" target="rightiframe">写信</a>
</li>
<li>
<a href="img/QQ图片20230422141256.jpg" target="rightiframe">收信</a>
</li>
<li>
<a href="img/QQ图片20230423164113.jpg" target="rightiframe">草稿箱</a>
</li>
</ul>
</body>
</html>
邮箱上册页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>欢迎<font color='coral'>xiaosen</font>来到邮箱!</h1>
</body>
</html>
执行效果(谷歌):
框架集合:
我们可以用框架集合把网页切割成任意部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 框架集合:和body是并列的 -->
<frameset rows='20%,*,30%'>
<frame/> <!--frame必须放在frameset中使用-->
<frameset cols='30%,40%,*'>
<frame />
<frame src='index.html'/>
<frame />
</frameset>
<frameset cols='50%,*'>
<frame />
<frame />
</frameset>
</frameset>
</html>
每一个frameset都是一个大框架,可以按照行和列切割,里面有很多小框架
结果展示: