html框架页面

最新推荐文章于 2025-11-06 10:51:46 发布

原创最新推荐文章于 2025-11-06 10:51:46 发布 · 2.8k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端框架

javaWeb 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了HTML中两种框架的使用：frameset和iframe。frameset用于将页面分为固定区域，如上、左、右布局，但在HTML5中已被废弃。iframe则允许在页面局部嵌入其他网页，提供了更灵活的布局选项。通过示例展示了如何创建和链接各个框架页面，同时指出了frameset的局限性。

1.frameset和frame（拆分式框架，HTML5取消了该框架）

frameset:不能写在<body></body>中，所以不写<body></body>

例：将页面分为三部分，上、左、右

<html lang="en">
    <head>
        
    </head>
    <frameset rows="200,*">
        <frame src="top.html" name="topFrame"></frame>
        <frameset cols="200,*">
            <frame src="left.html" name="leftFrame"></frame>
            <frame src="main.html" name="mainFrame"></frame>
        </frameset>
    </frameset>
</html>

top.html （上）

<!doctype html>
<html lang="en">
 <head>

 </head>
 <body>
	欢迎使用XXX系统。。
 </body>
</html>

left.html （左）

<!doctype html>
<html lang="en">
 <head>

 </head>
 <body>
	<a href="user.html" target="mainFrame">用户设置</a><br>
	<a href="dept.html" target="mainFrame">部门管理</a><br>
	<a href="emp.html" target="mainFrame">员工管理</a><br>
 </body>
</html>

main.html （右）

<!doctype html>
<html lang="en">
 <head>
  <title>Document</title>
 </head>
 <body>
	欢迎
 </body>
</html>

user.html （超链接）

<!doctype html>
<html lang="en">
 <head>

 </head>
 <body>
	用户管理界面
 </body>
</html>

dept.html（超链接）

<!doctype html>
<html lang="en">
 <head>

 </head>
 <body>
	部门管理的界面
 </body>
</html>

emp.html（超链接）

<!doctype html>
<html lang="en">
 <head>

 </head>
 <body>
	员工管理界面
 </body>
</html>

缺点：仅能用于铺满整个页面，相当于取代了body部分

2.iframe（浮动框架）

Ò利用iframe标记可以在网页中局部位置嵌入其他网页

<!doctype html>
    <html lang="en">
        <head>
        </head>
    <body>
        Hello World<br>
        <table>
            <tr>
                <td colspan="2"><iframe width="100%" src="top.html" name="topFrame"></iframe></td>
            </tr>
            <tr>
                <td><iframe src="left.html" width="30%" name="leftFrame"></iframe></td>
                <td><iframe src="main.html" width="70%" name="mainFrame"></iframe></td>
            </tr>
        </table>
    </body>
</html>