frame作为html语言中的一部分，在网页制作中占据着重要的地位。大家看到很多网页上都好像windows下的资源管理器一样，在左边点击相应的链接，右边就会有相应的网页显示。就如我们进入邮箱的时候一样。这些都是使用frame的结果。
下面我来给大家介绍frame的具体使用方法。
使用frame必须首先用frameset来定义，可以说frameset就是frame的一个“统治者”。在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。
frameset元素的使用：
(1) <html>
(2) <head><title>frameset元素的使用</title></head>
(3) <frameset>
(4) <frame>
(5) <frame>
(6) </frameset>
(7) </html>
当然了，这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。
frameset是确定网页分框的定义，其属性rols及rows、border将在下面给大家介绍。
frame是frameset定义的每个“网页分框”的定义，其属性name、scrolling及noresize、marginHeight及marginWidth、frameborder也将在下面给大家介绍。
frameset元素的cols及rows属性
属性说明：cols及rows的作用是设置frame的宽度及高度
(1) <html>
(2) <head><title>frameset元素中cols及rows属性的使用</title></head>
(3) <frameset cols="20%,200,*">
(4) <frame>
(5) <frameset rows="30%,*">
(6) <frame>
(7) <frame>
(8) </frameset>
(9) <frame>
(10) <frame>
(11) </frameset>
(12) </html>
示例说明： 第三行中的语句cols="20%,400,*" 定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比，400说明中间的frame占据整个浏览器的宽度是400个像素，*则说明除去左边和中间的frame以外的地方，其余全部留给最右边的frame。第4、9、10行的frame是<frameset cols="20%,400,*">语句定义后的每个“框架”的各自定义。同样，第6、7行的frame是<frameset rows="30%,*">语句所定义的“框架”的各自定义。
第二个frameset定义在一个frame之内，大家也从浏览器的结果看来了，横向的“框架”只出现在最中间的列向“框架”之中。可以试图改变浏览器窗口的大小，就可以看出中间的frame的宽度是始终不变的，大小总是400像素。最左边的frame所占的比例总是总宽度的20%，剩下的宽度就留给了最右边的frame。横向frame同理。
frameset元素的border属性
属性说明：设置frame之间的距离，包括3-D边框
(1) <html>
(2) <head><title> frameset元素中border属性的使用</title></head>
(3) <frameset cols="20%,60%,*" border=10>
(4) <frame>
(5) <frame>
(6) <frame>
(7) </frameset>
(8) </html>
示例说明：frame之间的宽度现在为10个像素。 如果定义border属性的值为0，则在浏览器中将不会看到边界。同样，framespacing也可以设定frame之间的宽度，只不过framespacing设定的是附加的空间。
另外：bordercolor属性作用是设定边框的颜色，颜色值为标准RGB颜色值。
frame元素的name属性
属性说明：设置frame的名字
(1) <html>
(2) <head><title> frame元素中name属性的使用</title></head>
(3) <frameset cols="50%,*">
(4) <frame name="left" src="html语言教程1.htm">
(5) <frame name="right" src="html语言教程2.htm">
(6) </frameset>
(7) </html>
说明：框架的名称并不会影响到框架内显示的内容，名称的作用是指定相应框架链接的显示内容。
frameset元素的scrolling属性及noresize属性
属性说明：
scrolling:决定frame是否可以使用滚动条
noresize:决定frame是否可以改变大小
(1) <html>
(2) <head><title> frame元素中scrolling属性及noresize属性的使用</title></head>
(3) <frameset cols="30%,40%,*">
(4) <frame name="left" src="html语言教程1.htm" scrolling=no>
(5) <frame name="center" src="html语言教程2.htm" noresize=true>
(6) <frame name="right" src="html语言教程3.htm" scrolling=yes>
(7) </frameset>
(8) </html>
示例说明：左边的frame使用了scrolling=no的属性，则无论需要显示的页面有多大，都不会有滚动条出现。中间的frame使用了noresize=true属性，这用户不能调整frame的大小（大家可以看到以前例子中的frame是可以调整大小的）。最右边的frame使用了scrolling=yes的属性，在这里大家看得不是很清楚，如果需要显示的页面过小，就是说不需要滚动条也能够显示出全部，则此时最右边的frame也是拥有滚动条的。默认情况下，scrolling的值是auto。而noresize是一个布尔型的变量，当为true时，不能改变frame的大小；为false时(默认情况)，可以改变frame的大小。
frameset元素的marginHeight属性及marginWidth属性
属性说明：
marginHeight:设定在显示frame中的文字之前文字距离顶部及底部的空白距离
marginWidth:设定在显示frame中的文字之前文字距离左右两边的空白距离
(1) <html>
(2) <head><title> frame元素中marginHeight属性及marginWidth属性的使用</title></head>
(3) <frameset cols="50%,*">
(4) <frame name="left" src="html语言教程1.htm" marginHeight=60 marginWidth=30>
(5) <frame name="right" src="html语言教程2.htm">
(6) </frameset>
(7) </html>
示例说明：左边的框架中文字与上下底边都有60像素的空间空白，与左右两边都有30像素的空间空白。右边的框架没有使用这一属性，所以就没有空间空白。
frameset元素的frameborder属性
属性说明：决定是否在frame中显示边界。可以使用的值有四个，分别是1、0、no、yes。frameborder值为1或者yes，则会显示框线；frameborder值为0或者no，则不会显示框线。frameborder的默认值为1。
浮动框架的制作
浮动框架，就好像一个文档之中又嵌入了一个文档，或者可以说成是一个浮动的frame。制作这样的文档需要用到iframe元素。iframe基本的语法格式如下
<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>
需要注意的是iframe与frameset不同，其可以与body元素共同出现在同一篇文档之中。
(1) <html>
(2) <head><title> 浮动框架的使用</title></head>
(3) <body>
(4) <h1>浮动框架的使用</h1><hr>
(5) <iframe name="inside" src="html语言教程1.htm" height=300 width=200 align=right>
(6) </iframe>
(7) <p>右边显示的是《html语言教程1》中的内容。现在就好像是在这个网页中又嵌入了另外的一个网页。使用的就是iframe元素。这样可以使网页的可视性加强，对于讲解、说明等特定网页十分适合。</p>
(8) </body>
(9) </html>
示例说明：iframe的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。
超链接与框架的制作
经过前面艰苦的学习，下面开始让我们一步一步地制作类似于访问邮箱的网页。
首先：我需要说明个部分的html文件，详见下表：
HTML文件
说明
main.htm 主页面，分为左右两个框架
host.htm 左边框架所显示的内容。用于索引文件之用，点击其中不同的链接，右边框架会显示不同的内容。
html语言教程1.htm 在右边框架中准备需要显示的内容
html语言教程2.htm
html语言教程3.htm
在这个例子中，在左边的框架中设定了三个超链接。在右边框架中需要显示的就有三个网页。就是说左边框架中的内容是不会变的，右边框架是真正的“显示区域”，其内容根据左边框架中点击超链接的不同而不同。这样，左边的框架就好像一个目录一样，点击不同的链接，右边框架会显示不同的内容。
下面我来告诉大家各个网页的制作方法。
main.htm
(1) <html>
(2) <head><title>超链接与框架的制作</title></head>
(3) <frameset cols="20%,*">
(4) <frame name="index" src="host.htm">
(5) <frame name="content" src="html语言教程1.htm">
(6) </frameset>
(7) </html>
host.htm
(1) <html>
(2) <head><title>超链接与框架的制作</title></head>
(3) <body>
(4) <a href="html语言教程1.htm" target="content">html语言教程1</a><br />
(5) <a href="html语言教程2.htm" target="content">html语言教程2</a><br />
(6) <a href="html语言教程3.htm" target="content">html语言教程3</a>
(7) </body>
(8) </html>
在左边框架中点击不同的链接，可以看到右边框架会显示不同的内容。同时，可以在“html语言教程1.htm”的最后加入下面的语句：
<a href="html语言教程1.htm" target="_top">全屏显示</a>
这样在右边框架中显示的《HTML语言教程1》这篇文档中会出现“全屏显示”字样的文字，点击后即会全屏显示此篇文档。大家不妨自己试一试。同理，在网页中也可以设定一个浮动框架，点击不同的链接，会在浮动框架中显示不同的内容。原理与这个差不多，请读者自己完成。
分享到：
相关推荐
### Frameset 详解 #### 一、Frameset 概述 `Frameset`是一种早期网页设计技术，允许在一个HTML文档中展示多个独立的HTML文档。这种技术通过将浏览器窗口分割成多个区域（称为“框架”或`frame`），每个区域都可以...
本文将深入探讨`frameset`及其子元素`frame`、`noframes`、`iframe`的使用方法，并通过实例来解析如何设置这些元素的属性来实现复杂页面布局。 #### Frameset标签详解 `<frameset>`标签用于定义一个由多个框架组成...
### Frame及Frameset标签的属性详解 在网页设计与开发中，`frame`与`frameset`标签曾经是非常重要的组成部分，它们允许在一个HTML文档中显示多个独立的文档。虽然随着现代Web技术的发展（如HTML5），`frame`与`...
frameset元素是HTML中定义框架集的标签，它通常包含`<frameset>`和`<frame>`两个主要部分。`<frameset>`定义了框架的行或列布局，而`<frame>`则指定每个框架要显示的网页内容。 ```html <!DOCTYPE html> <title>...
**frameset详解** frameset是HTML4中的一个元素，但在HTML5中已被废弃，取而代之的是更灵活的`<iframe>`标签。然而，在某些场合，frameset仍然被广泛使用，特别是在维护旧系统或者特定需求的后台管理系统中。 ...
就如我们进入邮箱的时候一样。这些都是使用frame的结果。 下面我来给大家介绍frame的具体使用方法。 使用frame必须首先用...在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。
### HTML中的`frameset`布局详解 在早期的网页设计中，`frameset`是一种用于创建多窗口布局的HTML元素，允许网页设计师在一个浏览器窗口中显示多个独立的文档。通过`frameset`及其子元素`frame`和`iframe`，可以...
一些在HTML4中使用的元素在HTML5中被废除，如`<frameset>`、`<frame>`、`<center>`等，因为它们不利于语义化和可访问性。 HTML5的这些变化提升了网页开发的效率，增强了网页的可访问性和搜索引擎优化，使得网页...
#### FrameSet属性详解 - **cols/rows**：用于定义框架的列宽或行高。例如，`cols="50%,*"`表示第一列宽度为50%，第二列占用剩余空间。 - **frameborder**：控制是否显示框架之间的边框，默认值为1（显示边框）。...
每个`<frame>`元素可以通过`src`属性指定要加载的网页，`name`属性用于识别和引用特定的框架。在不同框架间跳转链接，我们可以使用`target`属性指定目标框架，如`链接</a>`，这样点击链接后，新的页面将在名为...
XHTML1.0的Transitional类型包含了可以逐渐过渡到CSS的呈现属性和元素，适用于需要兼容旧浏览器的场景。XHTML1.0的Frameset类型则用于包含框架的页面，与HTML4.01的Frameset文档类型相同，主要用于框架集页面。 在...
### HTML超级链接标记A的TARGET属性详解 #### 一、超级链接标记A的基本概念 超级链接标记`<a>`在HTML中是最基本也是最常用的元素之一。它代表了一个链接点，即通过它可以把当前位置的文本或图片连接到其他的位置，...
4. 链接标签：`<a>`定义超链接，通过`href`属性指定目标URL，`target`属性可控制新窗口或标签页打开。 5. 图像标签：`<img>`插入图像，`src`指定图片源，`alt`提供替代文本，用于图像无法显示时。 6. 列表标签：`...
- **frameborder**: 与`<frameset>`中的`frameborder`属性类似，设置框架边框是否可见。 - **scrolling**: 控制框架内部是否显示滚动条，可选值有`auto`、`yes`、`no`。 - **noresize**: 如果存在此属性，则用户无法...
由于不是所有浏览器都支持框架技术，为了兼容这些浏览器，可以在 <frameset> 元素内部使用 <noframes> 标签来提供备选内容。当浏览器不支持框架时，会显示 <noframes> 标签中的内容。 例如： ```html <frameset ...
在XHTML中，所有的元素必须正确关闭，属性值必须用引号括起来，这使得XHTML代码更规范，更易于解析和处理。本篇文章将深入探讨XHTML中常用的各种标签，帮助读者理解和掌握其用法。 1. **基本结构标签** - `<html>`...
- **尺寸控制**：在给定的示例中，`rows="79,*"`意味着第一个`<frame>`占据79像素的高度，剩下的空间由后续的`<frameset>`及其内部的`<frame>`元素共享。类似地，`cols="180,*"`表示第一个`<frame>`宽度为180像素，...
二、`<frame>`属性详解 1. `src`：定义了在该框架中加载的网页地址。 2. `name`：为框架分配一个名称，方便通过`<a>`标签的`target`属性进行跳转。 3. `noresize`：如果设置，用户无法手动调整框架的大小。 4. `...
### HTML标签属性详解 #### 一、HTML基础知识简介 HTML（Hyper Text Markup Language）是一种标记语言，用于构建网页结构。HTML文档由多个标签组成，这些标签定义了文档的结构和内容。HTML标签可以包含多种属性，...