Web 前端学习 之iframe详解
程序员文章站
2024-02-29 21:34:04
...
Web 前端学习 之iframe详解
介绍
iframe相当于一个页内的页面,可以结合超链接实现页内跳转等等操作, 看个图就知道了
使用流程如下
- 在iframe标签中使用name属性定义一个名称
- 在a标签的target属性上设置iframe的
name的属性值
之前我们说过a标签的target可以选择是否在当前页面打开新窗口,这里只要把target改成iframe的name就可以实现业内的页面变换了
实现
直接放代码吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.iframe标签.html</title>
</head>
<body>
我是一个单独的完整的页面<br/><br/>
<!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme和a标签组合使用的步骤:
1 在iframe标签中使用name属性定义一个名称
2 在a标签的target属性上设置iframe的name的属性值
-->
<iframe src="3.标题标签.html" width="500" height="400" name="abc"></iframe>
<br/>
<ul>
<li><a href="0-标签语法.html" target="abc">0-标签语法.html</a></li>
<li><a href="1.font标签.html" target="abc">1.font标签.html</a></li>
<li><a href="2.特殊字符.html" target="abc">2.特殊字符.html</a></li>
</ul>
</body>
</html>
效果如下
这是原本的页面
当我们点击下面的a标签时,页面发生了改变
iframe的功能就是这么简单