HTML框架集详解-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_37976731/article/details/79616393

本文介绍了HTML框架集（frameset）的使用方法，包括如何划分网页、创建框架页面的基本语法及实例。通过一个具体的学生管理系统案例，展示了如何利用frameset标签进行页面布局。

HTML框架集

frameset框架集

用于替换HTML的<body>标签，即<frameset></frameset>标签不能与<body></body>同时使用，除非你在<frameset>中使用<noframe>标签。划分网页，创建网页框架的步骤：

创建各个子窗口对应的HTML文件
创建整个框架文件，分别引用子窗口文件

创建框架页面的基本语法（cols和rows属性一般不会同时出现）：

<frameset cols="25%, 50%, *" rows="200px, *" border="5">
    <frame src="top.html" name="topFrame" noresize="noresize" />
</frameset>

rows：水平划分页面，这里是第一行行高占整体的25%，第二行行高占整体的50%，而第三行占其余全部，也可以使用像素来为其分配值。
cols：垂直划分页面，这里第一列列宽200px（像素），第二行占其余全部。
框架集标签划分的每一个部分都是一个frame标签（frame标签可以起名字，也可以不起），每个frame可以引用一个页面，语法格式如下：

<frame src="first.html" name="first" noresize="noresize" />，表示引用first页面

frame标签定义的框架，默认框架边缘是可以用鼠标进行移动，如果我们给其加上noresize属性并赋予noresize值，则其无法再移动，而且与其边缘相关的框架也将受影响。

Example

下面我们将通过一个例子来熟悉一下框架集的用法，其最终效果图如下：

框架.PNG

我们将页面分成三个部分，上面是一个标题，左部为一个链接列表，右边是点击链接显示页面的地方，默认显示tableTest.html页面。因此我们需要创建一个头部HTML文件、链接列表HTML文件和一个框架集HTML文件。

头部HTML文件（stu_head.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>
    <div align="center">
        <h1>学生管理系统</h1>
    </div>
</body>
</html>

链接列表HTML文件（stu_menu.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>

<!-- 此为左部的链接列表文件，target属性限定了点击时将在rightFrame框架打开页面，否则会在原框架打开链接，即leftFrame框架-->

<body>
    <a>成绩查询</a><br>
    <a href="http://www.sohu.com" target="rightFrame">搜狐</a><br>
    <a href="http://www.sina.com" target="rightFrame">新浪</a><br>
    <a href="http://jw.zzu.edu.cn" target="rightFrame">郑州大学教务在线</a><br>

    <!-- 链接到本地的文件 -->
    <a href="tableTest.html" target="rightFrame">tableTest</a><br>
</body>
</html>

框架集HTML文件（stuSystem.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>

<frameset rows="100px, *">
    <frame src="stu_head.html" name="topFrame"/>
    <frameset cols="200px, *">
        <frame src="stu_menu.html" name="leftFrame" />
        <frame src="tableTest.html" name="rightFrame" />
    </frameset>
</frameset>

<!-- 如果浏览器不支持框架，则此部分将起作用 -->
<noframe>
    <body>
        此浏览器不支持框架！
    </body>
</noframe>

</html>