HTML框架嵌套详解及示例:frameset应用
4 浏览量
更新于2023-05-10
收藏 42KB PDF 举报
"html页面嵌套使用示例(frameset使用方法)"
HTML页面嵌套是一种常见的网页设计技术,它允许在一个HTML文档中嵌入多个独立的HTML文档,形成一个框架结构。在HTML4中,这种功能主要通过`<frameset>`元素实现,而HTML5则不再推荐使用`frameset`,提倡使用`<iframe>`来达到类似的效果。本示例将详细解释如何使用`frameset`进行页面嵌套。
`<frameset>`是HTML中用于定义框架集的元素,它将浏览器窗口分割成多个区域,每个区域都可以加载不同的网页内容。在示例代码中,我们看到一个外层的`<frameset>`元素,它的`rows`属性定义了框架集的行布局。`rows="10%,*"`表示第一行占据总高度的10%,第二行占据剩余的空间。
```html
<frameset rows="10%,*" frameborder="0" framespacing="10">
```
- `frameborder="0"`:关闭框架之间的边框,使得整个页面看起来更加无缝。
- `framespacing="10"`:设置框架之间的间距,这里是10像素。
接着,外层`<frameset>`的第一个子元素`<frame>`定义了顶部框架,其`src`属性指定了加载的HTML文件(`HTML中框架的嵌套top.html`):
```html
<frames src="HTML中框架的嵌套top.html" noresize="noresize" scrolling="yes"/>
```
- `noresize="noresize"`:禁止用户手动调整这个框架的大小。
- `scrolling="yes"`:开启滚动条,如果内容超出框架,则可以滚动查看。
内层的`<frameset>`定义了左侧和右侧的框架,它的`cols`属性定义了列布局。`cols="20%,*"`表示第一列占据总宽度的20%,第二列占据剩余的空间:
```html
<frameset cols="20%,*">
<frame src="HTML中框架的嵌套left.html" noresize="noresize"/>
<frame src="HTML中框架的嵌套right1.html" name="right1"/>
</frameset>
```
这里没有对左列框架设置滚动条,意味着如果内容超过框架,浏览器可能不会显示滚动条。右列框架的`name`属性设为"right1",可以作为其他页面链接的目标框架,例如`<a href="..." target="right1">`。
`<noframes>`元素是为不支持框架的浏览器准备的备选内容,这部分在现代浏览器中通常很少用到,因为它已经包含了足够的信息来显示框架内容。
需要注意的是,框架结构对于SEO(搜索引擎优化)并不友好,因为搜索引擎爬虫可能无法正确抓取和理解框架中的内容。此外,由于HTML5的推广,`<frameset>`逐渐被`<iframe>`所取代,`<iframe>`更灵活,可以嵌入任何类型的Web内容,并且可以通过JavaScript进行动态控制。
总结来说,HTML页面嵌套的`frameset`使用方法主要是通过定义行或列来分割浏览器窗口,然后为每个部分指定要加载的HTML文件。尽管`frameset`在现代Web开发中已不常用,但了解其工作原理有助于理解Web页面的早期布局方式以及与现代技术(如`<iframe>`)的差异。
2019-08-08 上传
2020-09-22 上传
2020-10-26 上传
2011-05-11 上传
2020-10-26 上传
2012-12-04 上传
2021-04-15 上传
2020-09-28 上传
weixin_38632825
- 粉丝: 3
- 资源: 947
最新资源
- SSM动力电池数据管理系统源码及数据库详解
- R语言桑基图绘制与SCI图输入文件代码分析
- Linux下Sakagari Hurricane翻译工作:cpktools的使用教程
- prettybench: 让 Go 基准测试结果更易读
- Python官方文档查询库,提升开发效率与时间节约
- 基于Django的Python就业系统毕设源码
- 高并发下的SpringBoot与Nginx+Redis会话共享解决方案
- 构建问答游戏:Node.js与Express.js实战教程
- MATLAB在旅行商问题中的应用与优化方法研究
- OMAPL138 DSP平台UPP接口编程实践
- 杰克逊维尔非营利地基工程的VMS项目介绍
- 宠物猫企业网站模板PHP源码下载
- 52简易计算器源码解析与下载指南
- 探索Node.js v6.2.1 - 事件驱动的高性能Web服务器环境
- 找回WinSCP密码的神器:winscppasswd工具介绍
- xctools:解析Xcode命令行工具输出的Ruby库