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

最新推荐文章于 2021-04-01 20:55:00 发布

原创最新推荐文章于 2021-04-01 20:55:00 发布 · 999 阅读

0 ·

CC 4.0 BY-SA版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章

订阅专栏

---- ----①HTML

11 篇文章

订阅专栏

本文详细介绍了HTML中的框架标签frameset及其使用方法，包括如何设置框架的行列比例和名称，以及如何通过frameset实现多页面布局。此外，还讲解了画中画标签iframe的应用，展示了如何在页面中嵌入独立的小窗口。

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

☆框架标签：`<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>

运行结果：

这里写图片描述

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

☆框架标签：<frameset>

框架标签的格式：

framset注意事项：

frameset代码演示（第一行）：

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

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

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

运行结果：

运行结果效果：

☆画中画标签：<iframe>

格式：

代码演示：

运行结果：

☆框架标签：`<frameset>`

☆画中画标签：`<iframe>`