框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架。

使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中，所以要使用框架集，页面中就不可以使用body标签。

属性：

  1. rows，指定框架集中的所有的框架，一行一行的排列；
  2. cols， 指定框架集中的所有的页面，一列一列的排列。

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小。

frameset中也可以再嵌套frameset。

frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的，使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不使用iframe。

demo:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <frameset cols="30% , * , 30%">

            <frame src="lesson18.html" />

            <frame src="NavigationBar.html" />

            <frameset rows="30%,50%,*">

                <frame src="RelativePosition.html" />

                <frame src="Table.html" />

                <frame src="ZindexAndOpacity.html" />

            </frameset>

        </frameset>

</html>

效果：

github地址：https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/frameset.html

刻运行下看看实际效果

前端学习 -- Html&Css -- 框架集的更多相关文章

  1. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  2. Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576279 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 框架集: index7. ...

  3. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  4. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  5. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  6. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  7. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  8. 前端学习 之 CSS（二）

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

  9. 前端学习 之 CSS（一）

    一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...

随机推荐

  1. .net core实践系列之短信服务-Api的SDK的实现与测试

    前言 上一篇<.net core实践系列之短信服务-Sikiro.SMS.Api服务的实现>讲解了API的设计与实现,本篇主要讲解编写接口的SDK编写还有API的测试. 或许有些人会认为, ...

  2. YY：2018互联网创业公司应看清的事情

    潮流,技术,生活方式,盈利模式,消费人群几乎每年都在改变,2018,你看到的是怎样的一盘棋. 2018年是个很好的数字,很多互联网公司寄予希望在这个幸运数字年头奋起一搏,拿到一份可观的酬金.特别是一些 ...

  3. IDEA启动服务阻塞，断点过程十分慢的问题

    使用debug无法启动项目但是使用run就可以启动程序,而且启动比以前的debug模式快的多 原因: 启动不了的原因是在项目中的方法上打了断点,导致项目无法继续编译 取消方法断点就可以了 在idea官 ...

  4. 《Linux内核设计与实现》第十八章读书笔记

    1.内核中的bug 内核中的bug表现得不像用户级程序中那么清晰——因为内核.用户以及硬件之间的交互会很微妙: 从隐藏在源代码中的错误到展现在目击者面前的bug,往往是经历一系列连锁反应的事件才可能触 ...

  5. 小学四则运算APP 第三阶段冲刺-第一天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第三次冲刺阶段时间:12.12~12.19 本次发布的是音乐播放功能,可以根据用户需求一边播放音乐一边做题,也拥有暂停播放音乐的功能,增强 ...

  6. 使用Java+Kotlin双语言的LeetCode刷题之路（二）

    BasedLeetCode LeetCode learning records based on Java,Kotlin,Python...Github 地址 序号对应 LeetCode 中题目序号 ...

  7. ASP.NET MVC布局

    一.Views文件夹 -> Shared文件夹下的 _Layout.cshtml 母版页 @RenderBody 当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合 ...

  8. Win2012r2 以及win2016 安装.NET3.5

    自从微软的内核 6.2以上的版本之后 win2012 win2016 已经自带了 .net4.0的版本 但是很多应用还需要.net 3.5的版本,虽然微软的安装盘里面有 .net 3.5的安装文件,但 ...

  9. Node http请求信息

    //1:加载http模块 httpconst http = require("http");//2:创建http 服务器var server = http.createServer ...

  10. pandas获取当前时间

    datetime.now()用于获取当前的日期和时间 print pd.datetime.now() #encoding:utf8 import pandas as pd print("(p ...