首先我们要明白此框架集的作用:

实现在一个页面中访问多个html页面的目的Frameset的用法:

//定义框架集
<frameset>
<frame src="demo.html" />
</frameset>

frame的属性有:

src:链接的url

id:名称

name:名称

scrolling:是否滚动(yes/no/auto)

noresize:"noresize" 防止鼠标调整框架大小

Frameset的属性有:

rows:"行数"

cols:"列数"

frameborder:"yes/no/0/1"

iframe的用法:

<iframe src="iframe.html"  frameborder="0"></iframe>

其接受所有frame的属性

实例:

下面我们设计一个头部用iframe引入,左侧是一个导航列表,右侧是显示内容的页面

以下是关键实例代码:

框架集页面First.html:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>First</title>

    </head>

　　<!--
            作者：1107530849@qq.com
            时间：2014-06-24
            描述：注意此处body标签是没有的(noframes才显示)
        -->   

        <frameset rows="10%,90%">

            <frame src="Top.html" name="top"/>

            <frameset cols="15%,*">

                    <frame src="Home.html" name="home"/>

                        <frame src="index1.html" name="index1"/>

            </frameset>

            <noframes>

                <body>

                你的浏览器不支持frame

                </body>

            </noframes>

        </frameset>

    </html>

Top.html页面已经iframe页面

//top页面

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Top</title>

    </head>

    <body>

        <iframe src="iframe.html" border="0" frameborder="0"></iframe>

    </body>

</html>

//iframe页面

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Top</title>

    </head>

    <body>

        我是通过iframe引入的top

    </body>

</html>

左侧导航页面home.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>Home</title>

    </head>

    <body>

        <ul>

        <!--

            作者：1107530849@qq.com

            时间：2014-06-24

            描述：关键点是target属性,需要跟显示页面的name属性一致

        -->

            <li><a href="index1.html" target="index1">index1</a> </li>

            <li><a href="index2.html" target="index1">index2</a></li>

            <li><a href="index3.html" target="index1">index3</a></li>

        </ul>

    </body>

</html>

导航链接页面:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="" />

        <title></title>

    </head>

    <body>

        index1

    </body>

</html>

最终效果:

HTML框架集之Frameset与Iframe简单应用的更多相关文章

  1. frameset，iframe框架之间如何互相调用变量、函数

    以往一直在编写的都是前台的UI,很少使用到frameset.iframe,对其了解也是十分有限,只是知道其可以为其当前页面引入html文件成为当前页的一部分,但是这两天在做后台UI界面的时候,发现这样 ...

  2. 框架集 frameset

    框架集和内联框架的作用类似,都用于在一个页面中引入其他的外部的页面 框架集可以同时引入多个页面,而内联框架引入一个, 在h5标准中,推荐使用框架集,而不使用内联框架 使用 frameset 来创建一个 ...

  3. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  4. Frameset框架集的应用

    Frameset框架集常用于写网站后台页面,大多数"T字型"布局后台页面,就是应用Frameset框架集来做的.Franeset框架集的优点是,他可以在同浏览器窗口显示不同页面内容 ...

  5. 【转】frameset 框架集使用语法，常用语后台。

    XHTML 框架概述 框架的使用可以让浏览器“分割”成多个页面显示内容,常用于如网站后台管理这些菜单项目固定,且对美观性和搜索引擎要求不高的地方. 框架的优缺点 框架方便制作栏目导航,操作各栏目时不需 ...

  6. asp.net Frameset框架集的嵌套使用

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Frame.aspx.cs& ...

  7. frameset框架集

    frame使用注意事项: 1.frame不能脱离frameset单独使用 2.frame不能放在body标签中,不然不起效果. 3.frame的高度只能由frameset来决定. frameset:是 ...

  8. Frameset 框架集 导航栏 的使用

    在index.jsp中 使用jsp标签转发到制定页面 <body> <jsp:forward page="/admin/frame.jsp"></js ...

  9. __x__(46)0910第六天__框架集

     框架集frameset 和 内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe ...

随机推荐

  1. Ubuntu 15.10 x64 安装 Android SDK（转）

    操作系统:Ubuntu 15.10 x64 目标:安装 Android SDK 本文最后更新时间:2015-11-3 安装32位库文件 2013年9月的iPhone 5s是第一款64位手机,而Andr ...

  2. Python 新浪微博中提取最常见转载的微博转载了几次，username，内容

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-4 @author: guaguastd @name: fi ...

  3. Java学习之路：ArrayList用法

    1.什么是ArrayList     ArrayList是一个动态数组传奇,使用MSDN声明.那是,Array复杂的版本号,它具有以下优点,例如: 动态的添加和降低元素 实现了ICollection和 ...

  4. 采用xshell链路本地虚拟机Linux

    昨天想安装在自己的机器看Linux.而使用xshell通路.但是这花了很长的时间,于xshell结束所有的提示"Could not connect to '192.168.54.100' ( ...

  5. IC设计前端到后端的流程和eda工具。

    IC前端设计(逻辑设计)和后端设计(物理设计)的区分:以设计是否与工艺有关来区分二者:从设计程度上来讲,前端设计的结果就是得到了芯片的门级网表电路. 前端设计的流程及使用的EDA工具例如以下: 1.架 ...

  6. HDU 4946 Area of Mushroom 凸包 第八次多校

    题目链接:hdu 4946 题意:一大神有N个学生,各个都是小神,大神有个二次元空间,每一个小神都有一个初始坐标,如今大神把这些空间分给徒弟们,规则是假设这个地方有一个人比谁都先到这,那么这个地方就是 ...

  7. CSharp设计模式读书笔记（14）：职责链模式(学习难度：★★★☆☆，使用频率：★★☆☆☆)

    职责链模式(Chain of Responsibility  Pattern):避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象 ...

  8. SOA、REST 和六边形架构

    SOA.REST 和六边形架构 上一篇:<IDDD 实现领域驱动设计-架构之经典分层> 阅读目录: SOA-面向服务架构 REST 与 RESTful 资源(Resources) 状态(S ...

  9. HTML的标签canvas

    定义和使用方法 <canvas> 标签定义图形,比方图表和其它图像. <canvas> 标签仅仅是图形容器,您必须使用脚本来绘制图形. 实例 怎样通过 canvas 元素来显示 ...

  10. Javascript规范

    本文地址: http://www.hicss.net/evolve-your-javascript-code/ 方才在程序里看到一段JS代码,写法极为高明,私心想着若是其按照规范来写,定可培养对这门语 ...