框架---学习笔记04

最新推荐文章于 2022-03-26 22:57:02 发布

C小浩

最新推荐文章于 2022-03-26 22:57:02 发布

阅读量591

点赞数

分类专栏： HTML 文章标签：框架 frameset frame 框架与超链接 target

本文链接：https://blog.csdn.net/chen_haoqiang/article/details/54348192

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第9章框架

9.1 框架概述

框架的作用，就是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容，不同窗口的内容相互独立。框架的主要用途是导航，通常会在一个窗口中显示导航条，另外一个窗口则作为内容窗口，用于显示导航栏目的目标页面内容，窗口的内容会根据导航栏目的不同而动态变化。

html框架集与body同级,因此不能同时出现。框架的基本结构主要分为框架集<frameset>和框架<frame>两个部分，基本语法如下：

...

</frameset>

9.2 框架集标记<frameset>

定义浏览器窗口的分割方式、各分割窗口（框架）的大小以及设置框架边框的颜色和粗细等属性。主要属性有：

属性说明

border 边框宽度，框架粗细

bordercolor 边框颜色

frameborder 是否显示边框（取值1, 0或yes，no）

framespacing 边框间距

rows 上下分割窗口 cols 左右分割窗口

<frameset>标记对浏览器窗口的分割存在不同的方式，主要分为以下几种类型：

● cols左右（水平）分割 <frameset cols="80,*">

● rows上下（垂直）分割 <frameset rows="80,*">

cols把框架分成左右两半,上下分割使用rows(分成上下两半)。每个框架的大小使用逗号隔开，最后一个使用*会把剩下的都分配给它

● 嵌套分割：左右上下分割都有。<frameset>里面再嵌套一个<frameset>标记

    <frameset rows="100,*">
        <frame/>
        <frameset cols="20%,*">
        <frame/>
        </frameset>
    </frameset>

效果图如下：

9.3 框架标记<frame>

<frameset>分割得到的每个子窗口都需要显示不同的页面内容，这些页面内容由<frame>标记来设置。<frame>是个单标记，它必须放在框架集frameset中，<frameset>分割了几个子窗口就必须对应几个<frame>标记。<frame>标记的常用属性有：

属性属性值说明

src 显示页面的URL地址

scrolling yes、no、auto 是否显示滚动条

noresize 禁止改变框架的尺寸大小

border 边框宽度，框架粗细

bordercolor 边框颜色

marginwidth 设置内容与框架窗口左右边框的距离

marginheight 设置内容与框架窗口上下边框的距离

基本语法：<frame src="01.html" name="test" />

9.4 不支持框架标记<noframes>

当用户浏览器版本太低不支持框架时，浏览器制作人员无法改变这一现象，所能做的只是告诉用户事实，把显示给用户看的文本信息放在<body></body>标记对之间；而<noframes>放在</frameset>标记后面。

demo：

<body>抱歉，您的浏览器版本太低，不支持框架，无法看到页面内容，请使用较新的浏览器来浏览。</body>

</noframes>

当用户浏览器版本太低不支持框架时，浏览器窗口将显示<body></body>标记对之间的文本内容，否则将显示<frameset></frameset>中各个框架的页面内容。

9.5 浮动框架标记<iframe>（也有叫“内嵌框架”的）

浮动框架时一种特殊的框架页面，主要体现在这个框架时嵌套在一个HTML页面中，作为页面的一个组成部分。具有和<frame>一样的属性，也有自己的属性：

9.6 框架与超链接

一般情况下在框架中的a链接使用target属性实现框架内文件跳转时：

href(一直不变，即指向打开的文件路径不需要变)

_self -> 自己框架页面打开

_blank -> 新页面打开

_top -> 顶级框架页面打开

_parent -> 到其父级框架页面打开

_framename -> 将我们想要打开的页面在指定的框架中打开

demo：

首先，新建一个网页“框架集和框架.html”，为右侧框架窗口添加"name"标识，输入下面的内容：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>框架集frameset和框架frame</title>
    </head>
    <frameset cols="10%,*">
    <frame src="menu.html" />
    <frame  src="http://qq.com" name="RightFrame" />
    </frameset>
    </html>

然后，新建一个网页“menu.html”，在左侧窗口中，设置"target"属性显示的窗口名，输入下面的内容：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <a href="http://qq.com/"  target="RightFrame">qq</a>
        <a href="http://baidu.com" target="RightFrame">百度</a>
        <a href="http://taobao.com" target="RightFrame">淘宝</a>
    </body>
    </html>

如下图，刚开始打开这个“框架集和框架.html”这个网页时，显示的效果如下：

左边相当于是一个菜单，右边是显示效果，当你单击“百度”或者“淘宝”时都可以链接到相应网站。

这就是我使用frameset和frame来实现的菜单功能。

下面，讲一下框架与超链接。在"menu.html"中插入下面的代码：

    <span><a href="http://qq.com" target="_parent">在父框架中打开qq</a></span>

这个时候，在浏览器中打开”框架集和框架.html“，单击”在父框架中打开qq“，这个时候，你会发现，整个网页直接转向了qq首页。”框架集和框架.html“就相当于”menu.html“的父框架，当”menu.html“中的a指定了target="_parent"时，就会直接在”框架集和框架.html“中打开这个网页。对于target="_self"或者其它效果就交给你们自己去修改玩玩。

C小浩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
框架---学习笔记04

第9章框架 9.1 框架概述框架的作用，就是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容，不同窗口的内容相互独立。框架的主要用途是导航，通常会在一个窗口中显示导航条，另外一个窗口则作为内容窗口，用于显示导航栏目的目标页面内容，窗口的内容会根据导航栏目的不同而动态变化。 html框架集与bod
复制链接

扫一扫