使用HTML框架结构可以把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的URL网页，每个框架里的网页相互独立。这样不仅可以非常方便地在浏览器中同时浏览不同的页面效果，而且可以非常方便地完成导航工作。如果所有的框架标记要放在一个HTML文档中，这个HTML页面的文档体标签<body>被框架集标签<frameset>取代，然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性，子窗口的排列遵循从左到右、从上到下的次序规则。

1．划分框架

使用<frameset>标签决定如何划分框架，该标签中有cols属性和rows属性。使用cols属性表示按列分布框架，使用rows属性表示按行分布框架。必须使用<frame>标签设定每个小窗口中的网页，该标签里有src属性为每个URL值指定一个HTML文件（这个文件必须事先做好）地址，地址路径可以使用绝对路径或相对路径，这个文件将载入相应的窗口中。如果希望在同一个浏览器窗口中，将其既按照行来分布框架，又按照列来分布框架，可以将<frameset>标签嵌套使用形成嵌套框架。<frameset>标签常用的属性如表6所示。

表6  HTML的<frameset>标签常用的属性

2．子窗口<frame>标签的设定

<frame>是一个单标签，该标签必须放在框架集<frameset>中使用。<frameset>设置了几个子窗口，就必须对应几个<frame>标签，而且每一个<frame>标签内还必须使用src属性设定一个网页文件。其常用属性如表7所示。

表7  HTML的<frame>标签常用的属性

3．窗口的名称和链接

如果要在窗口中做链接，就必须对每一个子窗口命名，以便被用于窗口间的链接。在窗口的链接中使用target属性，就可以将被链接的内容放置到想要放置的窗口内。在下面的例子中，通过框架技术并使用窗口的名称和链接实现后台首页模型，如图6所示：

图3.6  HTML的框架集标签演示结果

在图6提供的网站后台管理平台界面模型中，当单击大类管理选项时改变左边菜单中的页面，当单击左边的菜单链接时改变右边主体页面的内容。在文件index.html中划分框架的代码如下所示：

主窗体文件index.html

在上面的示例代码中，先将窗体分为上下两行，并将顶部窗体命名为top，设置80像素高度。然后将下部的窗体分为左右两个窗体，分别设置为200像素和使用“*”表示剩余部分，并分别命名为menu和main。网页文件index.html的文档体标签<body>被框架集标签<frameset>取代，所以不能在这个框架文件中再有<body>的内容。然后通过<frameset>的子窗口标签<frame>定义每一个子窗口，并通过子窗口的属性src分别加载top.html、menu.html和main.html 3个页面文件。这3个页面文件的源代码如下所示：

顶部设置大类选项窗体文件top.html

左边设置菜单选项窗体文件menu.html

右边设置内容窗体文件main.html

在top.html文件的每个链接中，通过target属性设置左边菜单窗体名称menu，当单击大类管理选项时，链接文件就会在左边窗体中显示。同样，在menu.html文件的每个链接中，通过target属性设置右边窗体的名称main，当操作每个菜单选项时，对应的链接文件就会在名为main的窗体中加载。当然，在本例中还需要为每个大类管理选项定义一个独立的菜单页面，也需要为每个菜单项定义唯一的内容页面。

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML框架结构的更多相关文章

  1. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 HTML基础标签

    指引 网页中的信息主要是以文本为主的,可以通过字体.大小.颜色.底纹.边框等来设置文本的属性.文字版面的编辑包括文本标签和格式标签两种,在浏览器中显示的文字内容和格式都要在<body>标记 ...

  2. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题

    小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...

  3. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格

    表格在网站中应用得非常广泛,使用它可以方便.灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局.表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.在H ...

  4. IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作

    现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...

  5. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  6. IT兄弟连 HTML5教程 HTML5和CSS3的关系

    HTML5是第五版HTML的标准,CSS3则是第三版CSS,新增一些非常实用的选择器和样式属性,并且CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为 ...

  7. IT兄弟连 HTML5教程 HTML5和HTML的关系

    HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...

  8. IT兄弟连 HTML5教程 HTML5表单 小结及习题

    小结 HTML表单提交的方法有get方法和post方法,get方法的作用是从指定的资源请求数据,post方法的作用是向指定的资源提交要被处理的数据.HTML表单一直都是Web的核心技术之一,有了它我们 ...

  9. IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例

    这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...

随机推荐

  1. js中 forEach 和 map 区别

    共同点: 1.都是循环遍历数组中的每一项. 2.forEach()和map()里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. 3.匿名函数中 ...

  2. Laravel 中使用 swoole 项目实战开发案例二 (后端主动分场景给界面推送消息)

    推荐阅读:Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)​ 需求分析 我们假设有一个需求,我在后端点击按钮 1,首页弹出 “后端触发了按钮 1”.后端点了 ...

  3. 【搞定Jvm面试】 JDK监控和故障处理工具揭秘

    本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错 ...

  4. Git详细教程之创建本地仓库和连接Github仓库

    首先要知道不只有代码,任何类型的文件都可以进行版本控制,版本控制很重要的一个特性就是你可以随时修改,比如git会记录你的任何操作,如果你想要回退到任何一个历史操作,你可以通过git轻松达到. 本地仓库 ...

  5. 一键删除数据库所有的外键约束-FOREIGN_KEYS

    DECLARE @ESQL VARCHAR(1000);DECLARE FCursor CURSOR --定义游标FOR (SELECT  'ALTER TABLE '+O.name+' DROP  ...

  6. Aery的UE4 C++游戏开发之旅（2）编码规范

    目录 C++基础类型规范 命名规范 头文件规范 字符串规范 字符集规范 参考 C++基础类型规范 由于PC.XBOX.PS4等各平台的C++基础类型大小可能不同(实际上绝大部分都是整型类型的大小不同) ...

  7. 在kubernetes 集群内访问k8s API服务

    所有的 kubernetes 集群中账户分为两类,Kubernetes 管理的 serviceaccount(服务账户) 和 useraccount(用户账户).基于角色的访问控制(“RBAC”)使用 ...

  8. 【zabbix告警监控】配置zabbix监控nginx服务

    zabbix监控nginx,nginx需要添加--with-http_stub_status模块 使用zabbix监控nginx,首先nginx需要配置开启ngx_status.但是我这边nginx安 ...

  9. 【AGC028D】Chord

    Problem Description 给定一个圆,圆上均等地放着 \(2n\) 个点,已有 \(k\) 对点之间连好了边,从中选择剩下 \(n-k\) 对点随意连边. 求所有连边方案中,联通块的个数 ...

  10. EntityFramework中实体类到表名的批量映射

    在使用EntityFramework做CodeFirst开发时,经常需要将实体类映射到数据库表,但是C#实体类和数据库表中的命名遵循的是不同的规范,这就需要为每个实体类做一个到数据库表名的映射.大多情 ...