HTML框架

最新推荐文章于 2025-07-07 19:00:03 发布

原创最新推荐文章于 2025-07-07 19:00:03 发布 · 1.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #浏览器 #框架 #标签 #内嵌框架

一、框架

这里说的框架不是SSH等那些高级框架，而是HTML中的frameset，框架的作用是把浏览器窗口分割成几个独立的小窗口，每个小窗口可以显示不同页面的内容，这样就可以同时浏览若干个网页。框架主要分两种，一种为普通框架；另一种为内嵌框架。

二、普通框架

可以把整个浏览器窗口分割成若干个小窗口，每个小窗口显示不同的页面内容，一般实际项目中我们可以使用普通框架来对整个网站进行布局。

基本语法：

</frameset>

表示把整个窗口分为上中下三个小窗口，上中下窗口的高度分别是 200像素、（整个页面的高度-400）像素、200像素。上中下三个窗口分别显示网页1、网页2、网页3的内容，并且把每个小窗口分别命名成top、main、bottom。

注意：rows是按纵向分割整个窗口，rows也可以替换呈cols,这样可以把整个窗口按水平方向分为做种有三个窗口。另外窗口所占的高度不仅可以用像素，也可以用百分比代替，比如设置rows="20%，*，20%"，表示上中下窗口高度分别为整个网页高度的20%、60%、20%。

frame的常用属性：

src:表示该窗口显示哪一个页面。

name:窗口的名称.

noresize:可选属性，如果不写这个属性，框架的边框是可以被拖动的，可以通过拖动边框来改变窗口大小，如果不想改变窗口的大小可以设置noresize属性值为noresize即可。

示例代码：其中subframe/the_first.html、subframe/the_second.html、subframe/the_third.html页面中的内容分别是：第一个窗口、第二个窗口、第三个窗口。

<html>
<head>
<title>rows纵向分割为3个窗口</title>
</head>

<frameset bordercolor="#bad0ef" cols="30%,*,30%" border="5">
<frame src="subframe/the_first.html" name="top" />
<frame src="subframe/the_second.html" name="main" />
<frame src="subframe/the_third.html" name="bottom" />
</frameset>

<noframes>
<body>
浏览器不支持框架，才显示body内的内容
</body>
</noframes>

</html>

示例代码2：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>后台</title>
</head>
<frameset rows="50,*,50" noresize="noresize" bordercolor="#bad0ef" border="3">
<frame src="subframe/logo.html" name="logo">
<frameset cols="150,*">
<frame src="subframe/nav.html" name="nav">
<frame src="subframe/main2.html" name="main2">
</frameset>
<frame src="subframe/copyright.html" name="copyright">
<frameset>
<body>

</body>
</html>

其中logo.html内容是文字logo加图片，copyright.html内容是版权，main2.html内容是文字初始界面

①nav.html

②main.html

<center><h1>部门管理</h1></center>
<table width="100%">
<tr width="100%" style="vertical-align:center;background-color:#000;color:#fff;">
<th>部门名称</th>
<th>部门职责</th>
<th>部门位置</th>
</tr>

<tr align="center">
<td>技术部</td>
<td>后台开发</td>
<td>北京</td>
</tr>

<tr align="center" style="background-color:#bad0ef;">
<td>人事部</td>
<td>招揽社会人才</td>
<td>上海</td>
</tr>
</table>

三、内嵌框架

内嵌框架比普通框架更加灵活，它可以使用到html代码中body的任何位置，用来引用另一个页面。这样就能够达到只修改内嵌框架中的网页的效果，从而重用出内嵌框架以外的页面内容。

基本语法：

iframe是一个双标记，如果不写</iframe>，写在iframe后面的内容将无法显示到页面上。

示例代码：

<html>
<head>
<title>内嵌框架</title>
</head>
<body>
<a href="http://www.baidu.com" target="myIframe">访问百度</a><br/>

<a href="实际开发框架分布.html" target="_balnk">这里</a>
<iframe src="http://www.sohu.com" width="800" height="400" name="myIframe" scrolling="no" frameborder="1">
</iframe>
<br/>
我是框架后面的内容
</body>
</html>