Web前端技术开发学习笔记(HTML标记语言篇)——第8章使用框架结构

最新推荐文章于 2022-04-21 23:49:02 发布

陈Nicole

最新推荐文章于 2022-04-21 23:49:02 发布

阅读量1k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/chanciecarney/article/details/115517348

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

第8章使用框架结构

8.1 框架概述
8.2 框架集标记< frameset>
8.3 框架标记< frame>
8.4 不支持框架标记< noframes>
8.5 浮动框架标记< iframe>
8.6 框架与超链接

8.1 框架概述

框架是一种布局网页的方式，主要运用于一些论坛网站上，但目前，网页的布局主要使用的方式是DIV+CSS。
框架的作用就是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容，不同窗口的内容相互独立。框架的主要用途是导航，通常会在一个窗口中显示导航条，另外一个窗口则作为内容窗口，用于显示导航栏目的目标页面内容，窗口的内容会根据导航栏目的不同而动态变化。
框架页面的作用主要是分割窗口，在该页面中不涉及页面的具体内容，所以在该页面中不需要使用< body>标记。框架的基本结构主要分为框架集和框架两个部分，在网页中分别使用< frameset>和< frame>标记来定义。
基本语法：

<frameset>
    <frame/>
    <frame/>
    ...
</frameset>

语法说明
一个框架集中可以包括多个框架，每个框架窗口显示的页面由框架的src属性指定。

8.2 框架集标记< frameset>

框架集标记< frameset>的作用主要是定义浏览器窗口的分割方式、各分割窗口（框架）的大小，以及设置框架边框的颜色和粗细等属性。这些作用都是通过设置< frameset>标记的各个属性来实现的。
框架集标记的主要属性如下表：

属性	描述
border	设置边框粗细
bordercolor	以RGB十六进制颜色值或颜色英文名设置框架边框颜色
frameborder	设置框架边框是否显示边框，可取值0或1，或者no和yes，默认显示边框
framespacing	设置框架之间的间距
rows	使窗口按行，即上下（垂直）的方式分割
cols	使窗口按列，即左右（水平）的方式分割

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

左右（水平）分割
上下（垂直）分割
嵌套分割：浏览器窗口即存在左右分割，又存在上下分割

8.2.1 左右分割窗口

左右分割也叫做水平分割，表示在水平方向将浏览器窗口分割成多个窗口，这种方式的分割需要使用< frameset>标记的cols属性。
基本语法

<frameset cold=“Value1,value2,...”>
    <frame>
    <frame>
    ...
</frameset>

语法说明
cols属性值的个数决定了< frame>标记的个数，即分割的窗口个数。各个值之间使用逗号分隔，各个值定义了相应框架窗口的宽度，可以是数字（单位是像素），也可以是百分比和以“”号表示的剩余值。剩余值表示所有窗口设定之后的浏览器窗口的大小剩余部分，当乘号出现一次时，表示对应框架窗口的大小将根据浏览器窗口的大小自动调整；当乘号出现一次以上时，剩余值将等比分给每个对应的窗口。
例如：
< frameset colts=“100,200, ”>表示第一个和第二个窗口的大小分别为100像素和200像素，第三个窗口的大小等于浏览器窗口减去300后的值；
< frameset colts=“200, * , * ”>则表示第一个窗口的大小为200像素，第二和第三个窗口大小相等，值是浏览器窗口减去200像素后的大小的一半；

eg.左右分割窗口


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Frameset/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>左右分割窗口示例</title>
    </head>
    
    <frameset cols="80,*">
        <frame/>
        <frame/>
    </frameset>
</html>

在这里插入图片描述

8.2.2 上下分割窗口

上下分割也叫垂直分割，表示在垂直方向将浏览器窗口分割成多个窗口，这种方式的分割需要使用< frame>标记的rows属性。

基本语法

<frameset rows=“value1,value2,...”>
  <frame>
  <frame>
  ...
</frameset>

语法说明
rows属性值的个数决定了< frame>标记的个数，即分割窗口的个数。rows属性定义了窗口的高度，取值与cols属性的取值完全一样。

eg.上下分割窗口


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Frameset/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>上下分割窗口示例</title>
    </head>
    
    <frameset rows="80,*">
        <frame/>
        <frame/>
    </frameset>
</html>

在这里插入图片描述

8.2.3 嵌套分割窗口

浏览器窗口既存在左右分割，又存在上下分割，这种分割窗口的方式称为嵌套分割。这种方式的分割需要在< frameset>标记对内部嵌套< frameset>标记，并且子标记< frameset>和其直接父标记< frameset>分割窗口方式不同。

基本语法

<frameset rows=“Value1,value2,...”>
  <frame/>
  <frameset cols=“Value21,value22,...”>
      <frame/>
      <frame/>
      ...
  </frameset>
  ...
</frameset>

语法说明
嵌套的< frameset>标记将会把父标记< frameset>分割的对应窗口再按自己所指定的分割方式进行第二次分割。嵌套的< frameset>标记替换了需二次分割的框架。


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Frameset/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>嵌套分割窗口示例</title>
    </head>
    
    <frameset rows="80,*">
        <frame/>
        <frameset cols="20%,*">
           <frame/>
           <frame/>
        </frameset>
    </frameset>
</html>

在这里插入图片描述

8.2.4 使用< frameset >标记设置框架

使用< frameset>标记可以设置框架边框是否显示，以及对显示的边框设置颜色和宽度。边框的显示与否使用frameborder属性来设置，边框颜色使用bordercolor来设置，边框宽度使用border属性来设置，框架之间的间距使用framespacing设置。

基本语法

<frameset frameborder=“0|1|no|yes” framespacing=“边框间距” border=“边框宽度” bordercolor=“颜色值”>

语法说明
默认情况下，框架边框会显示边框，frameborder属性可取值0和1，或者no和yes。其中0和no表示不显示边框，1和yes表示显示边框，默认值是1；
在IE浏览器中，framespacing和border属性的设置效果是一样的，都是对边框宽度的设置，任意用一个就好了，如果同时使用，framespacing的设置有效；
在Firefox浏览器中，边框宽度的设置使用border属性，framespacing属性无效。

eg.使用< frameset>标记设置框架边框


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Frameset/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>使用<frameset>标记设置框架边框</title>
    </head>
    <frameset frameborder="1" bordercolor="brown" border="6" framespacing="6" rows="80,*">
        <frame/>
        <frame/>
    </frameset>
</html>

在这里插入图片描述

8.3 框架标记< frame>

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

< frame>标记常用属性如下表：

属性	描述
src	设置在框架中显示的页面URL地址
bordercolor	设置边框颜色
frameborder	指示边框是否要显示，取值0和1，或者no和yes，默认值是1
border	设置边框粗细
name	设置框架名称，可作为超链接的target的属性值
noresize	使用时表示不能调整窗口的大小，省略时表示可调整
scrolling	设置窗口是否要显示滚动条，可取值yes，no和auto，默认是auto，表示根据需要自动出现，yes表示显示，no表示不显示
marginwidth	设置内容与框架窗口左右边框的距离
marginheight	设置内容与框架窗口上下边框的距离

8.3.1 设置框架显示内容

使用框架的主要目的是为了在一个浏览器窗口中同时显示不同页面的内容，指定要在框架中显示某个页面的内容需要使用< frame>的src属性。

基本语法

<frame src=“需要显示页面的URL” />

语法说明
src的属性值是需要在框架窗口中显示的页面的URL，该URL可以是绝对地址，也可以是相对地址。

8.3.2 使用< frame>标记设置框架边框

< frameset>可以对所有框架设置是否要显示边框及框架边框的颜色。如果要单独控制某个框架是否要显示边框及其边框颜色时，需要使用< frame>的frameborder属性和bordercolor属性。

基本语法

<frame frameborder=“0|1|no|yes” bordercolor=“颜色值” />

语法说明
< frame>中frameborder和bordercolor两个属性的取值和< frameset>中的这两个属性完全一致

8.3.3 设置框架名称

使用框架后，我们经常会将一个框架作为导航栏目的目标窗口来使用，这就涉及了框架的引用问题。
超链接通过名称来引用框架，因而我们创建框架时需要给框架命名，使用属性name即可命名框架。

基本语法

<frame name=“框架名称”/>

语法说明
框架名称可以是任意合法的名称，需要引用它时才需要设置框架名称。

关于框架的引用在后文中进行介绍。

8.3.4 设置框架窗口固定大小

默认情况下，用户可以自己调节框架窗口的大小，有时为了保障界面的美观，我们通常会让框架的大小固定。通过框架的noresize属性可实现窗口大小固定。

基本语法

<frame noresize=“Noresize”/>

语法说明
在HTML中，noresize的属性值不需要设置，但在XHTML中，所有属性都必须有值，noresize属性的值就是它本身。

8.3.5 设置框架滚动条

默认情况下，框架的滚动条会适应页面内容，即如果页面内容在一个窗口显示不了时，会自动在水平方向或垂直方向显示滚动条；反之则不显示。滚动条的这种默认行为可以通过scrolling属性来修改。

基本语法

<frame scrolling=“auto|no|yes”/>

语法说明
scrolling属性可取auto、no、yes这3个值中的任意一个，其中auto表示会根据页面内容自动显示滚动条，这是一种默认行为，此时可以省略scrolling属性的设置；no表示永远不会显示滚动条，不管内容是否超出了一个窗口；yes和no刚好相反，会一直显示滚动条，不管内容是否超出一个窗口。

8.3.6 设置框架边距

框架是用来显示页面内容的，当页面没有设置边距时，页面内容与框架的上下边距默认是15像素，与框架的左右边距默认是10像素。如果需要修改这些边距默认值，可以通过设置框架的marginheight和marginwidth属性来达到。

基本语法

<frame marginheight=“上下边距” marginwidth=“左右边距”/>

语法说明
marginheight和marginwidth属性分别用于设置页面内容与框架上下边框、左右边框的间距，单位是像素。

8.4 不支持框架标记< noframes>

一些早期版本的浏览器不支持框架，使用框架时将会显示一个空白页面。制作人员无法改变这一现象，所能做的只是告诉用户该浏览器不支持框架技术，有些内容无法看到。
这一任务可由< noframes>标记来完成，当浏览器不能加载框架集文件时，会检索到< noframes>标记，并显示标记中的内容。

基本语法

<noframes>
   <body>
   ...
   </body>
</noframe>

语法说明
< body>< /body>标记对之间的内容就是用于显示给用户看的文本信息< noframes>< /noframes>放在< frameset>< /frameset>标记对后面。

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Frameset/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>不支持框架设置</title>
    </head>
    <frameset cols="40%,*">
        <frame src="http://www.baidu.com"/>
        <frame src="http://www.sina.com"/>
    </frameset>
    <noframes>
         <body>
         抱歉 ，您的浏览器版本太低，不支持框架，无法看到页面内容，请使用较新的浏览器来浏览。
         </body>
     </noframes>
</html>

如果显示不了，就会出现代码中的中文提示语，但是我的浏览器显示不出，所以。。。

8.5 浮动框架标记< iframe>

浮动框架是一种特殊的框架页面，其作为HTML文档的一部分，就像图像一样出现在HTML文档中。浮动框架允许将一个HTML文档插入到另一个HTML文档内部的某个区域。
之所以说浮动框架是一种特殊的框架，一方面浮动框架就是一个框架，在其中能单独显示某个页面内容；另一方面它又跟一般的框架不同，主要体现在这个框架是嵌套在一个HTML页面中，作为页面的一个组成部分。作为一个框架，< iframe>具有和< frame>一样的属性，同时它也有一些属于自己的属性。
< iframe>常用属性表如下：

属性	描述
src	设置浮动框架中显示的页面的URL
width	设置浮动框架的宽度
height	设置浮动框架的高度
bordercolor	设置浮动框架边框颜色
frameborder	指示边框是否要显示，取值0和1，或者no和yes，默认值是1
border	设置边框粗细
name	设置框架名称，可作为超链接的target的属性值
noresize	使用时表示不能调整窗口的大小，省略时表示可调整
scrolling	设置窗口是否要显示滚动条，可取值yes，no和auto，默认是auto，表示根据需要自动出现，yes表示显示，no表示不显示
marginwidth	设置内容与框架窗口左右边框的距离
marginheight	设置内容与框架窗口上下边框的距离

8.5.1 在页面中嵌入浮动框架

浮动框架就像HTML页面中其他对象一样，可以出现到页面中的任何一个位置，但与其他对象不同的是，浮动框架在页面中构建了一个区域，在这个区域中可以显示另一个HTML页面的内容，区域中显示的页面使用属性src来指定。

基本语法

<iframe src=“源文件地址”>

语法说明：源文件地址是指需要在浮动框架中显示的页面的地址，可以是绝对路径，也可以是相对路径。

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>在HTML页面中插入浮动框架</title>
    </head>
    
    <body>
        <p>
        浮动框架是一种特殊的框架页面，其作为HTML文档的一部分，就像图像一样出现在HTML文档中。下面将通过嵌入新浪网站的首页到当前HTML页面的例子，来演示如何使用iframe嵌入其他页面的内容到一个HTML页面。
        </p>
        <iframe src="http://www.baidu.com.cn"/>
    </body>
</html>

在这里插入图片描述

8.5.2浮动框架的大小

浮动框架的默认宽度是200像素，高度是100像素。我们可以使用width和height属性来分别修改浮动框架的宽度和高度。
基本语法

<iframe src=“源文件地址” height=“宽度” width=“宽度”>

语法说明：height和width属性值是一个数值，单位是像素。

8.5.3浮动框架的对齐方式

浮动框架就好比HTML页面中的一个图片，因此它的对齐方式也有垂直和水平方向。在页面中可以使用align属性设置它相对于周围对象的对齐方式。

基本语法

<iframe src=“源文件地址“ align=“对齐方式”>

语法说明：对齐方式在水平方向上可取left、right两个值，其中left是默认值；如果要浮动框架在水平方向居中对齐，需要将浮动框架放到一个div标记对中，然后对div元素设置水平居中对齐

<div align=“center”><iframe src=“”/></div>

在垂直方向上可取top、middle、bottom3个值，其中bottom是默认值。

8.6 框架与超链接

框架应用的一个重要目的是在一个浏览器窗口中同时存在一个导航栏窗口和对应的导航目标窗口，该目的通过超链接目标窗口的设置很容易实现。
实现方法是：将框架名作为超链接的target的属性值即可使用框架作为超链接的目标窗口。

下一章会详细介绍超链接。。。（偷个懒

陈Nicole

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端技术开发学习笔记(HTML标记语言篇)——第8章使用框架结构

第8章使用框架结构8.1 框架概述8.2 框架集标记< frameset>8.2.1 左右分割窗口8.1 框架概述框架是一种布局网页的方式，主要运用于一些论坛网站上，但目前，网页的布局主要使用的方式是DIV+CSS。框架的作用就是把浏览器窗口划分成若干个小窗口，每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容，不同窗口的内容相互独立。框架的主要用途是导航，通常会在一个窗口中显示导航条，另外一个窗口则作为内容窗口，用于显示导航栏目的目标页面内容，窗口的内容会根据导
复制链接

扫一扫