文章目录

1、框架页面的基本结构
2、水平布局
3、垂直布局
4、混合框架集
5、为框架添加内容
6、改进：使用name属性
7、target
8、给框架布局设置一些属性

相对div布局，框架布局是一个很古老，但是易于学习和掌握的布局技术。当一个网站中包含很多页面，每个页面又包含一些同样的区域的时候，我们可以选择框架布局。在现代前端开发中，框架布局已经被淘汰，取而代之的是DIV结合Ajax页面无刷新的加载技术。因此，这里只对框架布局做简单的介绍。

1、框架页面的基本结构

HTML5 不支持标签。

2、水平布局

3、垂直布局

4、混合框架集

5、为框架添加内容

头部header.html

导航nav.html

主页home.html

美食列表页recipes.html

尾部footer.html

首页index.html

最终效果

6、改进：使用name属性

在导航页中，单击“主页”、“美食列表”超链接，是在导航窗口打开。

希望home.html和recipes.html在框架中间部分的右侧窗口打开。
（1）先给中间部分的右侧窗口取名name="main"
（2）在导航页nav.html中，设置主页链接、美食列表链接的target属性，指定在哪个窗口打开。

7、target

target属性表示链接打开方式

_self 当前窗口（默认）
_blank 新窗口
_parent 父框架集
_top 整个窗口
framename 指定框架

示例：

<frameset cols="20%,*"><frame src="left.html" ><frameset rows="50%,*"><frameset cols="80%,*"><frame src="middle.html" ><frame src="right.html"></frameset><frame src="bottom.html" name="bottom"></frameset>
</frameset>

锚点页

<ul><li><a href="chap1.html" target="_self">chap1(_self)</a></li><li><a href="chap2.html" target="_blank">chap2(_blank)</a></li><li><a href="chap3.html" target="_parent">chap3(_parent)</a></li><li><a href="chap4.html" target="_top">chap4(_top)</a></li>    <li><a href="chap5.html" target="bottom">chap5(framename)</a></li>
</ul>

8、给框架布局设置一些属性

noresize设置框架内部不可调整大小
frameborder="no"设置框架没有边框

设置框架各部分的比例，头部设置为100px，尾部设置为50px，*代表剩余的就是中间部分的高度。

scrolling="no"取消滚动条

HTML学习14：框架布局相关推荐

Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
android-------- 常用且应该学习的框架
转发至http://www.xiufm.com/blog-1-944.html 一.榜单介绍排行榜包括四大类: 单一框架:仅提供路由.网络层.UI层.通信层或其他单一功能的框架混合开发框架:提供开 ...
谷歌论文：使用深度强化学习的芯片布局
来源:半导体行业观察摘要在本项目中,我们提出了一种基于学习的芯片布局方法,这是芯片设计过程中最复杂,最耗时的阶段之一.与以前的方法不同,我们的方法具有从过去的经验中学习并随着时间的推移而不断改进 ...
Karpathy更新深度学习开源框架排名：TensorFlow第一，PyTorch第二
上周,Keras作者.谷歌研究科学家François Chollet晒出一张图,他使用Google Search Index,展示了过去三个月,ArXiv上提到的深度学习框架排行,新智元也做了报道: ...
【通知】有三AI发布150页深度学习开源框架指导手册与GitHub项目，欢迎加入我们的开源团队...
之前我们公众号输出了很多深度学习开源框架相关的内容,今天整理成技术手册给大家分享以方便阅读,下面是详细信息. 开源框架背景现如今开源生态非常完善,深度学习相关的开源框架众多,光是为人熟知的就有caf ...
darknet框架_【通知】有三AI发布150页深度学习开源框架指导手册与GitHub项目，欢迎加入我们的开源团队...
之前我们公众号输出了很多深度学习开源框架相关的内容,今天整理成技术手册给大家分享以方便阅读,下面是详细信息. 开源框架背景现如今开源生态非常完善,深度学习相关的开源框架众多,光是为人熟知的就有caf ...
android 模仿微信布局,【Android初学者】框架布局：仿微信页面制作
学习Android有一段时间了,跟大家分享一下经验吧! 如果有错误的地方,有更好的方法,麻烦大家留言指导! 工具:studio2.2,虚拟机版本:4.3,API 18(感觉比5.1的稳定啊!) 例子是 ...
网页框架布局设计_实用的网页设计-框架和框架用法介绍
网页框架布局设计 Ah, frames. We hated them when Netscape first offered them up around 1995; we deplored them ...
html简介框架模板,html框架布局后台模板.doc
html框架布局后台模板篇一:使用框架布局页面单元4--使用框架布局页面学习目标: ? 理解框架布局的原理 ? 掌握使用框架进行页面布局的方法 ? 学习利用浮动框架嵌入插件 Dreamweave ...

HTML学习14：框架布局