
- HTML 教程
- HTML - 首页
- HTML - 路线图
- HTML - 简介
- HTML - 历史与演变
- HTML - 编辑器
- HTML - 基本标签
- HTML - 元素
- HTML - 属性
- HTML - 标题
- HTML - 段落
- HTML - 字体
- HTML - 块
- HTML - 样式表
- HTML - 格式化
- HTML - 引用
- HTML - 注释
- HTML - 颜色
- HTML - 图片
- HTML - 图片地图
- HTML - 内嵌框架
- HTML - 短语元素
- HTML - 元标签
- HTML - 类
- HTML - ID
- HTML - 背景
- HTML 表格
- HTML - 表格
- HTML - 表头与标题
- HTML - 表格样式
- HTML - 表格 Colgroup
- HTML - 嵌套表格
- HTML 列表
- HTML - 列表
- HTML - 无序列表
- HTML - 有序列表
- HTML - 定义列表
- HTML 链接
- HTML - 文本链接
- HTML - 图片链接
- HTML - 邮箱链接
- HTML 颜色名称与值
- HTML - 颜色名称
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML 表单
- HTML - 表单
- HTML - 表单属性
- HTML - 表单控件
- HTML - 输入属性
- HTML 多媒体
- HTML - 视频元素
- HTML - 音频元素
- HTML - 嵌入多媒体
- HTML 页眉
- HTML - 头元素
- HTML - 添加 Favicon
- HTML - Javascript
- HTML 布局
- HTML - 布局
- HTML - 布局元素
- HTML - 使用 CSS 进行布局
- HTML - 响应式设计
- HTML - 符号
- HTML - 表情符号
- HTML - 样式指南
- HTML 图形
- HTML - SVG
- HTML - Canvas
- HTML API
- HTML - Geolocation API
- HTML - 拖放 API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web 存储
- HTML - 服务器发送事件
- HTML 其他
- HTML - 文档对象模型 (DOM)
- HTML - MathML
- HTML - 微数据
- HTML - IndexedDB
- HTML - Web 消息传递
- HTML - Web CORS
- HTML - Web RTC
- HTML 演示
- HTML - 音频播放器
- HTML - 视频播放器
- HTML - 网页幻灯片
- HTML 工具
- HTML - Velocity Draw
- HTML - 二维码
- HTML - Modernizer
- HTML - 验证
- HTML - 颜色拾取器
- HTML 参考
- HTML - 速查表
- HTML - 标签参考
- HTML - 属性参考
- HTML - 事件参考
- HTML - 字体参考
- HTML - ASCII 码
- ASCII 码表查询
- HTML - 颜色名称
- HTML - 实体
- MIME 媒体类型
- HTML - URL 编码
- 语言 ISO 代码
- HTML - 字符编码
- HTML - 已弃用的标签
- HTML 资源
- HTML - 快速指南
- HTML - 有用资源
- HTML - 颜色代码生成器
- HTML - 在线编辑器
HTML - 框架
HTML 框架用于将浏览器窗口分成多个部分,每个部分可以独立加载单独的 HTML 文档。浏览器窗口中的一组框架称为框架集。窗口被划分为框架的方式类似于表格的组织方式:分成行和列。
<frame> 标签不再推荐使用,因为它不受 HTML5 支持。与其使用此标签,不如使用 <iframe> 或结合 CSS 使用 <div> 来实现类似的效果。
语法
<frameset rows="50%,50%"> <frame name="top" src="link/to/frame1" /> <frame name="bottom" src="link/to/frame2" /> </frameset>
其中 frameset 的 rows 属性定义了窗口划分成水平部分的方式。在本例中,窗口被分成两行,每行占据可用高度的 50%。
HTML 框架示例
以下是一些示例代码,说明如何在 HTML 中操作框架。
在 HTML 中创建框架
要在页面上创建框架,我们使用 <frameset> 标签 代替 <body> 标签。 <frameset> 标签定义如何将窗口分成框架。<frameset> 标签的 rows 属性定义水平框架,cols 属性定义垂直框架。每个框架都由 <frame> 标签指示,它定义哪个 HTML 文档应在框架中打开。
以下是创建三个水平框架的示例。如果您的浏览器不支持框架,则会显示 body 元素。
<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows="10%,80%,10%"> <frame name="top" src="/html/top_frame.htm" /> <frame name="main" src="/html/main_frame.htm" /> <frame name="bottom" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
创建垂直框架
这里我们将 rows 属性替换为 cols 并更改了它们的宽度。这将垂直创建所有三个框架。
<!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset cols="25%,50%,25%"> <frame name="left" src="/html/top_frame.htm" /> <frame name="center" src="/html/main_frame.htm" /> <frame name="right" src="/html/bottom_frame.htm" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
框架的 name 和 target 属性
框架最常用的用途之一是在一个框架中放置导航栏,然后在单独的框架中加载主页面。
让我们看下面的例子,其中 **test.htm** 文件包含以下代码
<!DOCTYPE html> <html> <head> <title>HTML Target Frames</title> </head> <frameset cols="200, *"> <frame src="/html/menu.htm" name="menu_page" /> <frame src="/html/main.htm" name="main_page" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
我们创建了两列,用两个框架填充。第一个框架宽 200 像素,将包含由 **menu.htm** 文件实现的导航菜单栏。第二列填充剩余空间,将包含页面的主要部分,它由 **main.htm** 文件实现。对于菜单栏中可用的所有三个链接,我们都将目标框架指定为 **main_page**,因此,每当您单击菜单栏中的任何链接时,可用的链接都将在 main_page 中打开。
以下是 **menu.htm** 文件的内容
<!DOCTYPE html> <html> <body bgcolor="#4a7d49"> <a href="https://www.google.com" target="main_page"> Google </a> <br /><br /> <a href="https://www.microsoft.com" target="main_page"> Microsoft </a> <br /><br /> <a href="https://news.bbc.co.uk" target="main_page"> BBC News </a> </body> </html>
以下是 **main.htm** 文件的内容
<!DOCTYPE html> <html> <body bgcolor="#b5dcb3"> <h3> This is main page and content from any link will be displayed here. </h3> <p> So now click any link and see the result. </p> </body> </html>
frameset 标签的属性
以下列出的属性被 frameset 标签接受。
属性 | 描述 |
---|---|
cols | 指定 frameset 中包含多少列以及每列的大小。您可以通过四种方式之一指定每列的宽度。
|
rows | 此属性的工作方式与 cols 属性相同,并采用相同的值,但它用于指定 frameset 中的行。例如,要创建两个水平框架,请使用 *rows="10%, 90%"*。您可以像上面对列解释的那样指定每行的高度。 |
border | 此属性以像素为单位指定每个框架边框的宽度。例如 border="5"。值为零表示没有边框。 |
frameborder | 此属性指定是否应在框架之间显示三维边框。此属性的值为 1(是)或 0(否)。例如 frameborder="0" 指定没有边框。 |
framespacing | 此属性指定 frameset 中框架之间的空间量。这可以采用任何整数值。例如 framespacing="10" 表示每个框架之间应有 10 像素的间距。 |
HTML <frame> 标签属性
以下列出的属性被 frame 标签接受。
属性 | 描述 |
---|---|
src | 此属性用于提供应在框架中加载的文件名。其值可以是任何 URL。例如,src="/html/top_frame.htm" 将加载 html 目录中可用的 HTML 文件。 |
name | 此属性允许您为框架命名。它用于指示应将文档加载到哪个框架中。当您想要在一个框架中创建链接并将页面加载到另一个框架中时,这尤其重要,在这种情况下,第二个框架需要一个名称来标识自身作为链接的目标。 |
frameborder | 此属性指定是否显示该框架的边框;如果给定,它将覆盖 <frameset> 标签上 frameborder 属性中给定的值,并且这可以取值为 1(是)或 0(否)。 |
marginwidth | 此属性允许您指定框架边框和框架内容的左侧和右侧之间的空间宽度。该值以像素为单位给出。例如 marginwidth="10"。 |
marginheight | 此属性允许您指定框架边框及其内容的顶部和底部之间的空间高度。该值以像素为单位给出。例如 marginheight="10"。 |
noresize | 默认情况下,您可以通过单击并拖动框架的边框来调整任何框架的大小。noresize 属性可防止用户调整框架的大小。例如 noresize="noresize"。 |
scrolling | 此属性控制出现在框架上的滚动条的外观。这采用“yes”、“no”或“auto”值。例如 scrolling="no" 表示它不应具有滚动条。 |
longdesc | 此属性允许您提供指向另一个页面的链接,该页面包含对框架内容的详细描述。例如 longdesc="framedescription.htm" |
框架的缺点
使用框架有一些缺点,因此从不建议在网页中使用框架。
- 一些较小的设备通常无法处理框架,因为它们的屏幕不够大,无法分割。
- 有时由于不同的屏幕分辨率,您的页面在不同的计算机上显示方式会有所不同。
- 浏览器的 *后退按钮* 可能无法按用户希望的那样工作。
- 仍然有一些浏览器不支持框架技术。
视频 - HTML 框架

