`
hamburg
  • 浏览: 115889 次
  • 来自: 不污染一方土地
社区版块
存档分类
最新评论

HTML 中的框架

    博客分类:
  • Web
阅读更多
HTML 中的框架

来自:www.htmlcn.com 

  框架可以生成独立变化和滚动的窗口,从而能将一个窗口分割为若干个字窗口。在每一个字窗口中显示一个HTML文档。我们这回就来看看多文档的基本结构和子窗口之间的交叉链接。

一,基本结构HTML使用<Frameset>,<Frame>和<noFrames>标签来定义框架。下面我们就来了解一下这三个标签的作用和相应的属性。

(一),<Frameset>标签。

该标签是框架设计标签,成对使用。首尾标签之间的内容就是使用到框架的HTML主体部分。在使用框架的HTML文档中不能出现<body>标签,否则会导致浏览器忽略所有的框定义而只显示<body>和</body>之间的内容。

<Frameset>标签作用是将窗口分割为若干个自窗口,子窗口的数目取决于嵌套在该标签中<Frame>标签的书目。<Frameset>标签有两个属性。rows和cols,分别用来确定个子窗口的高度和宽度,格式为<Frameset rows="值1,值2,……值n">;<Framest cols="值1,值2,……值n">.各参数之间以逗号分割,依次表示各个自窗口的高度(宽度)。这两个属性的参数值可以是数字、百分数或符号“*”。下面我们来分别解释一下:

(1)数字。表示子窗口高度(宽度)所占的像素点数。

(2)百分数。表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比。

(3)符号“*”。当符号*只出现一次。即其他子窗口的大小都有明确的定义时,表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时,表示按比例分割浏览器窗口的剩余空间。例如:

<Frameset cols="40%,2*,*">表示将浏览器窗口分割为3列,第一个子窗口在第一列,窗口宽度为整个浏览器窗口宽度的40%;第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%,第三个子窗口占剩余空间的1/3,宽度为整个浏览浏览器窗口宽度的20%。

(二),<frame>标签。HTML用<frame>标签来标识子窗口。<frame>标签是嵌套在框架设置标签<Frameset>标签中来使用的单独标签。在<Frameset>中定义了多少个子窗口就要有多少个<frame>标签与之匹配,依次定义各个窗口的性质。<frame>标签有7个属性,除SRC属性是不可缺省的外,其他属性都是可选的。

(1)SRC属性。用以定义子窗口的名称。

(2).name属性。用于定义子窗口的名称。

(3)frameboder属性。该属性的参数值为1或0。当参数值为1时,表示该子窗口有边框,为0时没有边框。该属性缺省值为1。

(4)bordercolor属性。用以规定子窗口的边框颜色。如果在一个以上的<frame>标签中定义了子窗口的边框颜色,则以第一次指定的颜色为标准。在指定边框颜色时,可以使用颜色的RBG代码或直接使用与该颜色想对应的英文单词。bordercolor属性的参数值可以是16种颜色中的任意一种。



(5)sclling属性。属性的参数值为yes,no或auto之一。参数值为yes时表示该子窗口始终有滚动条。为no时是始终没有滚动条。为auto时表示当文档的内容超出窗口范围时,浏览器自动为该子窗口添加滚动条。scolling属性的缺省值为auto.

(6)maginwidth和marginwidht属性。这两个属性是用来指定显示内容与窗口边界之间的空白距离大小的。其中maginwidth属性用于确定显示内容与左右边界之间的距离;maginwidht用来确定显示内容与上下边界之间的距离。这两个属性的参数值都是数字。分别表示左右边距所占的像素点数。

(三),<noframes>标签。使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息,以免浏览者对空白窗口画面感觉莫名其妙。<noframes>标签是成对使用的。首尾标签之间的内容就上告之浏览者的信息。如“如您看到空白的画面说明您的浏览不支持框架显示”。虽然常用的两中浏览器IE和NC都是支持框架显示的。但为了加强文档的适用性,我们最好还是养成使用这个标签的习惯。

(四),基本结构。

我们举例说明HTML中框架文档的基本结构:

<html>

<head>

<title>文档标题</title>

</head>

<Frameset Cols="值1,值2,……,值n>将浏览器窗口分割为n个窗口。

<Frame SRC="1.html">

<frame SRC="2.html">

.

.

.

<frame SRC="n.html">

</Frameset>

<noframes>如果您看到空白的画面,说明您的浏览器是不支持框架机构的</noframes>

</html>

其中,<frameset>标签是可以嵌套使用的,也就是说,可以将其中某一个或几个子窗口划分为若干个更小的窗口。例如:

<html>

<Frameset cols="30%,90,*">

<frame SRC="1.html"name=cont>

<frame SRC="caipage.gif">

<frame SRC="2.html">

</frameset>

<frame SRC="f2.html"name=another marginheight=120>

</frameset>

<noframes>您使用的浏览器不支持框架</noframes>

</html>

二,目标窗口的交叉链接。

为了方便用户进行搜索和浏览,我们经常用到一系列锚标组成的索引目录显示在一个子窗口中,而将锚标所指向的内容放在另一个子窗口中。显示锚标的子窗口通常被成为”源窗口“,显示目标文档的窗口则称之为“目标窗口”。

在进行交叉连接时,我们必须先用<frame>标签的name属性定义目标窗口的名称,然后再修改显示在源窗口中的文档。在所有的<A>标签中添加语句target="目标窗口名称"来指定目标文档的显示位置。例如:

<html>

<head>

<title>目标窗口测试页</title>

</head>

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

<frame src='f1.html"marginheight=60>

<frameset rows="120,*">

<frame src="caipage.gif">

<frame src="2.html">

</frameset>

<frame src="f2.html"name=another marginheight=60>

</frameset>

<noframes>您的浏览器不支持框架结构</noframes>

其中,第一个子窗口是源窗口。我们在源窗口的对应文档f1.html中定义了一系列锚标,该文档的内容如下:

<html>

<body>

<<center>(说明:文档主体内容举重显示

<P><A href="田园风光.jpg"target="another">田园风光</A><P>

<A href="qiu.jpg"target="another">金色秋天</A><P>

<A href="tong.html"target="another">渔哥唱晚</A><P>

<A href="pig.gif"target="another">夕阳无限</A><P>

</body>

</html>

当用户点击锚标“田园风光”后,浏览器将在目标文档显示锚标的连接对象

分享到:
评论

相关推荐

    html中框架的运用

    4. **前进/后退导航**:在框架中导航可能不会像在单个页面上那样直观,用户可能会迷失在页面层级中。 对于初学者来说,理解框架的概念是重要的,因为它反映了Web发展史的一部分。同时,学习如何使用更现代的技术如...

    中文html5框架

    HTML5框架是现代网页开发的重要工具,尤其对于构建适应各种屏幕尺寸和设备的中文网站而言。"中文html5框架"通常是指专为中文网站设计,包含丰富元素且支持响应式布局的前端框架。H-ui 1.4.6是这样一个框架的版本,它...

    HTML框架元素.html

    这是关于HTML中框架标签的用法,是一个小例子,希望有需要的朋友们能够学习,陆续继续更新其他方便的用法。

    html 后台框架 html后台框架

    在本文中,我们将深入探讨HTML后台框架的相关知识点。 首先,我们需要明确HTML本身并不具备处理服务器端逻辑的能力,它主要负责页面的结构和内容展示。然而,当与后台框架结合时,HTML可以成为强大应用程序的基础。...

    HTML框架代码全集.pdf

    HTML 框架是 HTML 中的一种重要组成部分,它允许用户在一个浏览器窗口中显示多个 HTML 文档。 HTML 框架可以生成独立变化和滚动的窗口,从而能将一个窗口分割为若干个子窗口。在每一个子窗口中显示一个 HTML 文档。 ...

    HTML框架,表格

    在这个HTML框架与表格的学习资源中,初学者将有机会深入理解如何使用HTML来构建网页,并熟练掌握表格的使用。 一、HTML框架 HTML框架(Frames)是一种在单个浏览器窗口中展示多个独立HTML文档的技术。这允许网页...

    html左右侧框架源码

    在HTML后台框架中,这样的布局模式提供了一种灵活且可扩展的界面,开发者可以根据需要添加更多菜单项或调整内容区域的显示方式。常见的后台框架如Bootstrap、Element UI、Ant Design等都提供了现成的左右侧布局组件...

    html网页设计框架

    一个HTML框架是一组预先设计好的HTML、CSS(层叠样式表)和JavaScript代码,用于快速构建响应式、易维护的网页。这些框架通过提供预定义的样式、组件和布局,简化了网页开发过程,使得开发者可以专注于内容和功能,...

    html后台框架代码

    在描述中提到的“html后台框架 html 后台框架 html后台框架”,可能是在强调HTML后台框架的重要性以及其在网页开发中的重复使用性。HTML后台框架不仅限于HTML,它通常结合了各种前端技术和库,如Bootstrap、Angular...

    漂亮的html后台界面框架

    标题中的“漂亮的html后台界面框架”指的是这类框架注重用户体验和视觉设计,旨在提供吸引人的用户界面。 在描述中,“漂亮的html后台界面框架”进一步强调了框架对于界面美观性的追求。通常,这样的框架会包含各种...

    html 后台框架代码

    HTML 后台框架是构建网页应用的重要工具,它为开发者提供了结构化和模块化的开发方式,使得在HTML页面中整合后端逻辑变得更加高效和便捷。本文将深入探讨HTML后台框架的相关知识点,包括其核心概念、常见框架、优势...

    html框架适合初学者学习和开发

    框架中的JavaScript部分通常用于增加交互性,如表单验证、动画效果或AJAX(异步JavaScript和XML)请求,以实现动态数据加载。初学者需要掌握基本的JavaScript语法和事件处理,以便有效地利用这些功能。 学习HTML...

    html框架详解与框架布局.7z

    HTML框架是网页设计中一种重要的布局工具,它允许开发者在同一个浏览器窗口中分割显示多个独立的HTML文档。这种技术在创建多列布局、导航栏、侧边栏等内容时非常实用,提高了网页的组织和交互性。本文将深入探讨HTML...

    html--4.框架标签

    在HTML(超文本标记语言)中,框架标签是用于创建多窗口或部分页面布局的工具,这使得网页设计师可以将一个HTML文档分为多个独立显示的区域。这些标签主要用于实现更复杂的网页设计,允许同时加载和展示不同的网页...

    html 框架结构.pdf

    ### HTML框架结构详解 #### 10.1 窗口框架简介 ##### 10.1.1 什么是框架 框架(Frames)是一种在HTML网页中常见的布局技术,允许在一个浏览器窗口中显示多个HTML文档。这种技术尤其适用于构建那些需要在页面中...

    html网站后台框架代码

    然而,描述中的"html后台框架"可能指的是那些支持HTML页面与服务器端逻辑交互的框架,如Angular、React或Vue.js,它们在前端构建动态应用时扮演重要角色。这些框架不仅简化了HTML的编写,还引入了数据绑定、组件化等...

    HTML 使用框架集和框架.doc

    其中,name 属性用于指定框架的名称,src 属性用于指定框架中要显示的网页文件的路径,frameborder 属性用于指定框架是否显示边框,bordercolor 属性用于指定框架的边框颜色,marginwidth 属性用于指定框架的左右内...

    HTML 使用浮动框架.doc

    - `src`: 必填,指定要在框架中加载的网页URL。 - `width`: 必填,设置框架的宽度。 - `height`: 必填,设置框架的高度。 - `align`: 可选,定义框架的对齐方式,可选值为`left`、`center`、`right`。 - `...

    Html框架结构.pdf

    框架集标记 `&lt;frameset&gt;` 是用于定义框架集的页面中,页面的 `&lt;body&gt;` 标记被 `&lt;frameset&gt;` 标记取代,然后通过 `&lt;frame&gt;` 标记定义每一个框架。 Html 框架结构的主要分割方式有以下三种: 1. 左右分割:使用属性 ...

Global site tag (gtag.js) - Google Analytics