您的位置：首页 > Web前端 > HTML

【HTML】框架---框架标签（frameset）画中画标签（iFrame）

2017-04-22 15:03 597 查看

☆框架标签：
<frameset>

框架标签的格式：

<!-- rows：用于设置整个框架有几行，各占多少百分比-->
<frameset rows="10%,*">
<!--整个框架中的第一行-->
<frame src="1.html" name="top" />
<!--整个框架中的第二行-->
<!--cols：用于设置整个框架有几列，各占多少百分比-->
<frameset cols="30%,*">
<!--指定第一个框架的name,第二个框架的name 在以后可以将其他的页面放入到这个name框架中-->
<frame src="2.html" name="left" />
<frame src="3.html" name="right" />
</frameset>
</frameset>


framset注意事项：

注意：
1、frame及frameset不属于body的属性。
2、frameset是和body并列的。
3、框架标签不可以放到body中。
4、frame位于frameset里面。

5、frameset的属性rows 的使用：利用“数值,*,数值来设置整体框架所占比”
6、frameset表示：有很多个frame，也就是是frame的集合。


frameset代码演示（第一行）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示frame框架</title>
</head>

<frameset rows="27%,*">
<!-- 第一行是抬头页面 为frame -->
<frame src="head.html">
<!-- 第二行是内容页面 为frameset -->
<frameset cols="10%,*">
<frame src="left.html" name="left">
<frame src="href.html" name="right">
</frameset>
</frameset>

<body>
</body>
</html>


left.html代码（第二行第一列）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>内容左边页面</title>
</head>
<body>
<a href="f1.html" target="right"> 学校概况</a><br/><br/>
<a href="f2.html" target="right">校内导航</a><br/><br/>
<a href="f3.html" target="right"> 党务公开</a><br/><br/>
<a href="f4.html"target="right"> 校务公开</a><br/><br/>
<a href="f5.html"target="right">教学管理</a><br/><br/>
<a href="f6.html"target="right">招生就业</a><br/><br/>
<a href="f7.html"target="right">国际交流</a><br/><br/>
</body>
</html>


href.html代码（第二行第二列）：

<html>
<head>
<title>超链接演示</title>
</head>

<body>
<!-- 演示页面链接 -->
<a name="pos1">开头</a><br>
<a href="#pos2">跳到中间</a>
<a href="#pos3">跳到尾部</a></br></br>
<img alt="领导合影1" src="pics/zp1.jpg"></br>

<a name="pos2">中间</a></br>
<a href="#pos1">跳到开头</a>
<a href="#pos3">跳到尾部</a></br></br>
<img alt="领导合影2" src="pics/zp2.jpg"></br>

<a name="pos3">尾部</a><br    >
<a href="#pos1">跳到开头</a>
<a href="#pos2">跳到中间</a><br><br>

</body>
</html>


f1.html~f7.html页面代码：

<html>
<head></head>
<body>
页面f1
</body>
</html>


<html>
<head></head>
<body>
页面f2
</body>
</html>


<html>
<head></head>
<body>
页面f3
</body>
</html>


<html>
<head></head>
<body>
页面f4
</body>
</html>


<html>
<head></head>
<body>
页面f5
</body>
</html>


<html>
<head></head>
<body>
页面f6
</body>
</html>


<html>
<head></head>
<body>
<!--画中画标签 iFrame
格式：
<iframe src=”1.html” >  画中画窗口1  </iframe>

-->
<iframe src="hitMouse.txt" width="60%"></iframe>
</body>
</html>


运行结果：



运行结果效果：



☆画中画标签：
<iframe>

frameset标签是把整个窗口划分成不同的子窗体，而iframe标签可以实现在网页中的任意位置显示一个窗体（注意，它不是把整个窗口进行分割）。

格式：

<iframe src=”1.html” >  画中画窗口1  </iframe>


代码演示：

<html>
<head></head>
<body>
<iframe src="hitMouse.txt" width="60%"></iframe>
</body>
</html>


运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航