HTML学习笔记-HTML框架 AND 2018-11-20（23:33）

最新推荐文章于 2023-12-18 17:34:21 发布

原创最新推荐文章于 2023-12-18 17:34:21 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

灰烬HTML学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中的Frameset和Frame标签的使用方法，通过实例展示了如何构建一个多页面框架结构，包括如何分配页面区域，以及如何在不同页面间进行跳转。

一、Frameset标签

Frameset标签：框架标签，可以把一个网页分为好几个网页。不能和body一同使用。
常用属性：rows：把框架分为上下的区间。第一块占60的长度，其余的第二块占。

例如：

<frameset rows="60,*"></frameset>

二、frame标签
frame标签：用来在同一页面显示多个HTML的。
例如：

<frameset rows="60,*">
<frameset>
    <frame src="top.html">
</frameset>
<frameset cols="150,*">
    <frame src="left.html">
    <!-- 默认显示会员管理的内容 -->
    <frame src="vip.html" name="contenFrm" >
</frameset>
</frameset>

三、以一个架子为例
在这里插入图片描述

1.首先利用rows属性把它分为上下两部分（index.html）。
代码如下：

<frameset rows="60,*">
<frameset>
       1
</frameset>

<frameset >
       2
</frameset>
</frameset>

2.然后把顶部的区间创建一个HTML.
(top.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页抬头</title>
</head>
<body>
<div>
  管理系统
</div>
</body>
</html>

3.然后利用frameset的cols属性，把左侧菜单栏的区间和右侧主现框创建分隔开。

<frameset rows="60,*">
<frameset>
	<frame src="top.html">
</frameset>
<frameset cols="150,*">
		<frame>
		<frame>
</frameset>
</frameset>

4.把左侧菜单栏的HTML写出来（left.html）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
</head>
<body>
<a >会员管理</a><br/>
<a >订单管理</a><br/>
<a>财务管理</a><br/>
</body>
</html>

5.把菜单栏中的每个功能各写一个HTML页面（vip.htlm 、other.html、finance.html）。

Vip页面：（会员）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会员</title>
</head>
<body>
会员信息<br/>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
</ul>
</body>
</html>
---------------
other页面：（订单）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>订单信息</title>
</head>
<body>
订单信息：<br/>
<ul>
<li>手机一部</li>
<li>电脑一台</li>
<li>房子一套</li>
</ul>
</body>
</html>
----------------
finance页面(财务）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>财务</title>
</head>
<body>
财务结算：<br/>
<ul>
<li>刘备：50000</li>
<li>张飞：30000</li>
<li>关羽：40000</li>
</ul>
</body>
</html>

6.把所有这菜单页面配置到Index.html中并让主现框默认显示vip.html（会员信息）。

<frameset rows="60,*">
 <frameset>
    <frame src="top.html">
  </frameset>
 <frameset cols="150,*">
    <frame src="left.html">
    <!-- 默认显示会员管理的内容 -->
    <frame src="vip.html"  >
 </frameset>
</frameset>
</html>

7.在菜单栏页面中的a标签中全部添加统一的name属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
</head>
<body>
<a href="vip.html" target="contenFrm">会员管理</a><br/>
<a href="other.html" target="contenFrm">订	单管理</a><br/>
<a href="finance.html" target="contenFrm">财务管理</a><br/>
</body>
</html>

8.在index页面的主现框区域添加name属性，与菜单HTML的各个功能的name连接。实现HTML框架功能。

<frameset rows="60,*">
<frameset>
    <frame src="top.html">
</frameset>
<frameset cols="150,*">
    <frame src="left.html">
    <!-- 默认显示会员管理的内容 -->
    <frame src="vip.html" name="contenFrm" >
</frameset>
</frameset>
</html>

0:08了小伙伴们，打卡第六天！HTML完结！下此更新CSS的知识了！