HTML框架集与框架设置详解
需积分: 10 9 浏览量
更新于2024-09-19
收藏 192KB DOC 举报
"该文档详细介绍了如何在HTML中使用框架集和框架，包括框架的基本语法、属性设置以及示例代码，旨在帮助用户理解和创建多窗口布局的网页。"
在HTML中，框架是一种将一个网页分割成多个独立显示区域的技术，每个区域都可以加载不同的网页内容。这使得网页设计者可以在一个页面上同时展示多个信息源，提高用户体验和网站的交互性。`<frameset>`和`<frame>`标签是实现这一功能的关键。
一、框架集（Frameset）与框架（Frame）
1. 框架集`<frameset>`：框架集用于定义页面的分割方式，如水平分割（`rows`属性）或垂直分割（`cols`属性）。例如：
```html
<frameset rows="400,*">
```
这个例子将页面分割为两个部分，第一部分高度为400像素，第二部分占据剩余空间。
2. 框架`<frame>`：在框架集中嵌套`<frame>`标签，用于定义每个分割区域的特性及加载的网页内容。如：
```html
<frame name="frame1" src="csmzxy.html" frameborder="1" bordercolor="blue" marginheight="10px" scrolling="no">
```
这里的`name`属性定义了框架的名称，`src`属性指定了要加载的网页，`frameborder`控制边框显示，`bordercolor`设置边框颜色，`marginheight`设定上下内边距，`scrolling`控制滚动条的显示，`noresize`则禁止用户调整框架大小。
二、框架属性详解
- `name`：唯一标识框架，便于通过超链接或其他JavaScript操作引用该框架。
- `src`：指定框架内加载的HTML文件路径，可以是相对路径或绝对路径。
- `frameborder`：0表示无边框，1表示有边框。
- `bordercolor`：设置边框颜色，如`bordercolor="blue"`。
- `marginwidth`和`marginheight`：设置框架的内边距，影响内容与边框的距离。
- `scrolling`：yes显示滚动条，no不显示，auto根据内容自动决定。
- `noresize`：若设置，用户不能手动调整框架大小。
三、示例代码
以下是一个简单的框架集和框架应用实例：
```html
<!DOCTYPE html>
<html>
<head>
<title>世界大学城</title>
</head>
<frameset rows="400,*">
<frame name="frame1" src="csmzxy.html" frameborder="1" bordercolor="blue" marginheight="10px" scrolling="no">
<frame name="frame2" src="pku.html" frameborder="1" noresize>
</frameset>
<noframes>
<bodybgcolor="#f8f5ff">
<h1>很抱歉!由于您的浏览器版本太低，不支持框架显示，请升级浏览器。</h1>
</body>
</noframes>
</html>
```
这个例子创建了一个两部分的页面，顶部的`frame1`加载了`csmzxy.html`，底部的`frame2`加载了`pku.html`，并且`frame2`没有滚动条且不允许用户调整大小。
需要注意的是，虽然框架在早期的网页设计中较为常见，但现代网页设计更多地转向了响应式布局和单页应用程序（SPA），因为它们对移动设备更友好，并且提供了更好的可访问性和SEO优化。然而，了解框架仍然有助于理解早期的网页结构和历史，以及在某些特定场景下的应用。
第一节 使用框架集和框架
一、设置框架
1. 在 HTML 文件中，通常使用标记<frame>标记来建立框架。
2. 基本语法
<frame name="top"
src="a.html"
frameborder="0"
bordercolor="#0000FF"
marginwidth="5"
marginheight="5"
scrolling="auto"
noresize >
3. 语法说明
(1) 设置框架的名称：使用 name 属性可以指定框架的名称。
(2) 设置框架中要显示的网页文件：使用 src 属性可以指定框架中要显示的
网页文件的路径，网页文件的路径可以是相对路径，也可以是绝对路径。
(3) 设置框架边框：使用 frameborder 属性可以指定框架是否显示边框 ，
frameborder 取值为 0 时，不显示边框；frameborder 取值为 1 时，显示边框。
(4) 设置框架的边框颜色：使用 bordercolor 属性可以指定框架的边框颜色。
(5) 设置框架的左右内边距(内补丁)：使用 marginwidth 属性可以指定框架的
左右内边距。
(6) 设置框架的上下内边距(内补丁)：使用 marginheight 属性可以指定框架
的上下内边距。
(7) 设置框架滚动条：使用 scrolling 属性可以指定框架是否显示滚动条。有
三种取值：
yes：显示滚动条
no：不显示滚动条
auto：视情况决定是否显示滚动条
(8) 指定不允许调整框架大小：使用 noresize 属性可以指定不让使用者随意
调整框架的大小，如果没有指定此属性，使用者可以随意调整框架的大小。
4. 示例 (见案例 1-1)
<html>
<head>
<title>世界大学城</title>
</head>
<frameset rows="400,*">
下载后可阅读完整内容，剩余3页未读，立即下载
2011-07-17 上传
2011-07-17 上传
2009-08-09 上传
2012-08-12 上传
2022-07-09 上传
2022-12-23 上传
2012-12-08 上传
2021-10-02 上传
wancanjun
- 粉丝: 1
- 资源: 266
我的内容管理
展开
最新资源
- Fisher Iris Setosa数据的主成分分析及可视化- Matlab实现
- 深入理解JavaScript类与面向对象编程
- Argspect-0.0.1版本Python包发布与使用说明
- OpenNetAdmin v09.07.15 PHP项目源码下载
- 掌握Node.js: 构建高性能Web服务器与应用程序
- Matlab矢量绘图工具：polarG函数使用详解
- 实现Vue.js中PDF文件的签名显示功能
- 开源项目PSPSolver：资源约束调度问题求解器库
- 探索vwru系统：大众的虚拟现实招聘平台
- 深入理解cJSON：案例与源文件解析
- 多边形扩展算法在MATLAB中的应用与实现
- 用React类组件创建迷你待办事项列表指南
- Python库setuptools-58.5.3助力高效开发
- fmfiles工具：在MATLAB中查找丢失文件并列出错误
- 老枪二级域名系统PHP源码简易版发布
- 探索DOSGUI开源库：C/C++图形界面开发新篇章
