框架组合网页

通过前面几章的学习,相信大家已经初略掌握了如何开发一个HTML页面。有时呢,我们可能会需要在一个HTML页面中显示多个页面的内容。要开发这种复杂的页面,我们需要使用框架技术。其可以将多个页面组合在一起,页面的结构可以重用,同时也方便布局。

框架是HTML很早就使用的一种技术。使用框架技术,我们可以达到一下几点优势:

  • 在同一个窗口下显示多个页面,能有效地将多个页面组合在一起,但是各个页面间相互独立
  • 可以实现页面的重用。例如将网站的顶部和底部单独作为一个页面,方便其它页面的使用。
  • 实现典型的**“目录结构”**,即左侧目录、右侧内容,当用户单击左侧窗口的目录时,在右侧窗口中显示具体内容。

常用的框架技术有这么两类:框架集(frameset),这是早期的框架技术,页面各窗口全部用框架(frame)实现,形成一个框架集。这种结构非常清晰,适用于整个页面都用框架是实现的场合;内嵌框架(iframe),页面中的部分内容用框架实现,通常用于在页面中引用站外的页面内容,使用比较灵活、方便。

一、框架集

<frameset>框架下,我们可以将页面分隔为多个区域,每个区域显示不同的网页。修改页面时,也只需修改特定区域的页面即可,无需更新整个框架集中的所有页面。(这就是它的优势)。注意frameset标签会代替body标签

  • <frameset cols="25%,50%,*" rows="50%,*" border="5">

这里的cols属性即页面的纵向分隔( * 表示剩余的页面),rows属性则表示横向分隔。在<frameset>框架的子页面则用<frame>标签表示。

  • <frame scr="" name="" scrolling="" noresize="" border="">

scr属性类似于<img>标签的“src”,表示页面的路径。scrolling属性表示子页面是否显示滚条,noresize属性则表示是否允许调整框架窗口的大小。name属性则可配合target超链接使用。(都是很有用的)

<frameset>标签下不仅可以放置<frame>,也可以嵌套自身。即我们不仅可以按行组合框架、按列组合框架,也可以行列混合组合框架。如:

<frameset rows="25%,*" bordercolor="green"><frame src="top.html" name="top"><frameset cols="20%,*" ><frame src="left.html" name="left"/><frame src="right.html" name="right"/></frameset>
</frameset>

效果如下:

二、内嵌框架

iframe内嵌框架适用于将部分框架内嵌到页面的场合,通常用于引用其他网站的页面。使用它时,无需替代<body>标签。

  • <iframe src="" name="" frameborder="" scrolling="">
<body><h1 align="center">网站检索</h1><p align="center"><a href="http://www.google.com" target="main">Google-1</a><a href="http://www.google.com" target="main">Google-2</a><a href="http://www.google.com" target="main">Google-3</a></p><center><iframe src="http://www.google.com" name="mian" width="1000px" height="300px" ></iframe></center>
</body>

效果如下:

同志们,至此HTML的一点点内容就结束了,感谢大家的支持!

HTML之框架组合网页相关推荐

  1. 【转载】我心目中最好的框架组合是

    我心目中最好的框架组合是: 表示层:spring mvc 3.1 + annotation     控制层:spring 3.1     持久层:hibernate 3.6 +jdbcTemplate ...

  2. java ssm框架做增删改查,使用SSM框架组合实现增删改查的功能

    基于ssm框架组合的增删改查功能 ssm框架组合之前已经搭建完成了,下面基于该框架组合实现增删改查的功能,首先创建一个数据库和一张表: CREATE DATABASE `ssmteam` /*!401 ...

  3. 展示一下基于flask框架的网页播放器的代码

    <p>下面是基于Flask框架的网页播放器的代码:from flask import Flaskapp = Flask(<strong>name</strong>) ...

  4. html网页制作浮动框架,浮动框架在网页制作中使用技巧.doc

    浮动框架在网页制作中使用技巧 浮动框架在网页制作中使用技巧摘要:首先介绍了浮动框架的应用特点,然后结合实际的使用技巧介绍了在浮动框架中:可以制作与其它页面之间的链接,设置浮动框架的滚动条及区域的颜色, ...

  5. frame框架设计网页

    如何用框架设计网页 如图 首先设计一个两列的框架结构的网页 Frame.html 框架的结构 <frameset cols="250, 750" frameborder=&q ...

  6. 如何利用Visual Studio建立具有MVC框架的网页模型

    如何利用Visual Studio建立具有MVC框架的网页模型 1.打开VS2015,新建项目,选择Web模型中的ASP.NET Web应用程序 2.其次选择带有MVC的模板进行创建,并等待项目创建成 ...

  7. 轻量纯css框架,27款经典的CSS框架小结 网页制作必备

    下面给你推荐了27款优秀的CSS框架,你可以选用. 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.提供较为常用的尺寸来简化网页设计过程,使工作简单高效. 芒 ...

  8. 易语言获取html源码,易语言穿透所有框架取网页元素源码

    yuanma 找视频-穿透10纵个框架 无模块,.版本 2 .子程序 网页关键字查找, 整数型 .参数 网页对象, 对象 .参数 关键字, 文本型 .局部变量 oDocument, 对象, , , 网 ...

  9. 用bootstrap框架制作网页

    课程设计要做一个html网页,自己做的css样式实在是不堪入目,所以用了bootstrap框架,现总结如下: (1):下载bootstrap: 点击下载后: 下载解压后得到如下文件: (2):将这个文 ...

最新文章

  1. Go 语言编程 — panic 和 recover
  2. 通过组策略禁止用户安装任何软件
  3. 线段树——区间离散化/压缩
  4. 使用Mapreduce案例编写用于统计文本中单词出现的次数的案例、mapreduce本地运行等,Combiner使用及其相关的知识,流量统计案例和流量总和以及流量排序案例,自定义Partitioner
  5. 排查链接是否失效_如何进行移动站点流量排查?
  6. python selenium api_Selenium2+python自动化-查看selenium API
  7. springmvc视图解析器_SpringMVC视图及REST风格
  8. 三元表达式三个条件判断
  9. 【错误信息】Maximum call stack size exceeded
  10. html5网页制作代码 大学生网页制作作业代码 (旅游网站官网滚动模板)
  11. html caption属性的值,HTML中的caption属性是什么意思?caption标签在HTML中
  12. 参加百度深度学习培训总结
  13. 华为nova8pro鸿蒙系统怎么看,华为nova8的隐藏功能_华为nova8隐藏功能怎么开启
  14. 必须要了解股权设计的四大核心
  15. Windows Server 2016 基本设置
  16. php获取当前周的起止日期,使用PHP实现获取周的起始和结束日期
  17. msys2 安装笔记
  18. (转)58同城上市背后:分类信息网站集体转型艰难
  19. 一个懒惰的人的自省书——请朋友们以我为戒,有更好的未来
  20. SIGIR2021的5篇论文

热门文章

  1. fifaonline3服务器位置,fifaonline3 无法解析服务器发送的参数是怎么回事?
  2. Python turtle库改变海龟速度的几种方法
  3. [学习PCL]统计滤波(离群点剔除)
  4. Android Studio 默认配置路径修改
  5. 回收站有html文件,如何恢复从资源回收站中清理掉的文件
  6. 关于大数据,这10个有趣事实你很可能不知道
  7. 购物车模块实现(类比京东和天猫)
  8. lastpass更改账号注册的邮箱
  9. C# Thread Delegate MethodInvoker Invoke BeginInvoke 关系
  10. itemCF matlab算法,基于物品的协同过滤算法(ItemCF)