11.HTML框架标签

.什么是框架

框架将浏览器划分成不同的部分，每一部分加载不同的网页，实现在同一浏览器窗口中加载多个页面的效果

2.frameset 划分框架标签

1）语法格式

<frameset>....</frameset>

2）属性

1.cols：使用“像素数”和%分割左右窗口，“*”表示剩余部分；如果使用“*”,“*”表示框架平均分成2个；如果使用“*”,“*”,“*”表示框架平均分成3个。

2.rows：使用“像素数”和%分割上下窗口，“*”表示剩余部分。

3.frameborder：指定是否显示边框，0不显示，1显示。

4.border：设置边框的大小，默认值5像素。

3）frame 子窗口标签

1.定义

frame 标记是一个单标记，该标记必须放在 frameset 中使用，在 frameset 中设置了几个窗口，就必须对应使用几个 frame 框架，而且还必须使用 src 属性指定一个网页。

2.属性

src：加载网页文件的URL地址
name：框架名称，是链接标记的target所要参数
noresize：表示不能调整框架大小，没有设置时就可以调整
scrolling：是否需要滚动条：auto（根据需要自动出现）、yes（有）、no（无）
frameborder：是否需要边框：1（显示边框）0（不显示边框）

3.举例

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>文档标题</title>  </head>  <frameset cols="*,*" frameborder="0">    <frame src="https://www.taobao.com" noresize>    <frame src="https://www.baidu.com" noresize>  </frameset></html>

果想开发一个网站，除了要精通后端开发语言（如：php）外，还要精通HTML代码。那么，什么是HTML呢？HTML是一种超文本标记语言，它包含有众多的标签，我们可以通过这些标签，把不同的internet资源（如：文字、图片、视频、音频、表单等等）整合在一个统一的文档中，这就形成了我们可以看得见的网页。那么，HTML都有哪些常用的标签呢？

一、文档类型声明。

html5文档类型声明：<!doctype html>

html4文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签，所有其它的HTML标签都要放在这个标签的内部。

<html>

</html>

三、双标签和单标签。

在HTML标签中，有的标签是成双成对的，如：<html></html>（如下图）；而有的标签是单个的，如：<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签：

meta：主要提供有关页面的元信息。

link：用来定义文档与外部资源的关系，最常用的是调用CSS样式文件。

title：页面标题的标签。

script：用来调用JS文件或JS代码。当然，script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是：独自占有一行；标签的高与宽、边距可以修改；没有设置宽与高时，默认继承父标签。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端页面显示的效果如下图：

常用的块级标签有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同，它不能独自占有一行，会与其它内联标签在同一样展示；内联标签的高与宽、上下边距是不能修改的，它里面的文字或图片有多高，它就是多高。例如如下代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS样式代码跟块级标签的例子是一样的，而显示的效果就不一样了，宽与高、上下边距没有效果。如下图：

常用的内联标签有：span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签，既有一些内联标签的特性，也有一些块级标签的特点：它不能独自占有一行，但是可以修改它的宽度和高度。例如下面这段代码：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS样式代码跟块级标签的那个例子仍然是一样的，图片的宽和高、上下边距修改成功，而2个图片不能独自占有一行，而是在同一行。如下图：

常用的内联块级标签有：img、input、textarea。

4、区域标签。

所谓区域标签，就是主要用来划分布局页面区域的。如：头部、主体内容、侧边栏、底部。这样划分的好处是：让页面布局更加清晰明了。

常用的区域标签有：header（头部）、footer（底部）、nav（导航）、aside（侧边栏）、section（主体）、article（独立内容）。

5、表单标签。

这个表单标签我们也是会经常用到的，如：登录网站的时候、提交数据的时候。如下图的评论表单：

表单常用的标签有：form、input、select、option、textarea 。

以上就是我们开发网页时，会常用到的HTML标签。当然，HTML标签远不止这些，尤其是html5出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

架是将一个页面划分为若干个窗口, 每一个窗口都是独立;

要实现框架必须使用框架型的DTD;

框架就像一个窗户是由窗格和玻璃组成;

框架中不能有body及body子标记;

框架是由框架集(frameset)和框架页(frame)组成;

格式：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<frameset>
<frame />
<frame />
</frameset>
</html>

框架标签:

<frameset></frameset> 放在一个框架文档的<body>标签之前, 也可以嵌在其他框架文档中;

框架中不能有body及body子标记, 框架是由框架集(frameset)和框架页(frame)组成;

<frameset rows="value,value"> 定义一个框架内的行数, 可用像素值或高度百分比;

<frameset cols="value,value"> 定义一个框架内的列数, 可用像素值或宽度百分比;

frameborder 框架边框显示属性

该属性用于指定框架周围是否显示边框, 取值有1(显示边框, 默认值)和0(不显示边框)。

framespacing 该属性用于指定框架之间的间隔, 以像素为单位。

如果不设置该属性，则框架之间没有间隔。

border 指定边框宽度属性

该属性用于指定边框的宽度, 只有在frameborder属性为1时有效。

bordercolor 指定边框颜色

<noframes></noframes> 定义在不支持框架的浏览器中显示什么提示;

<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html"/>
<frame src="frame_b.html"/>
<frame src="frame_c.html"/>
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>

<frame> 定义一个框架内的单一窗或窗区域;

<frame src="url"> 规定框架内显示的html文档;

<frame name="name"> 命名框架或区域以便别的框架可以指向它;

<frame marginwidth=""> 定义框架左右边缘的空白大小,必须大于等于1;

<frame marginheight=""> 定义框架上下边缘的空白大小,必须大于等于1;

<frame scrolling=""> 设置框架是否有滚动栏,其值可以是"yes","no",或"auto";

<frame noresize> 禁止用户调整一个框架的大小;其值只有一个"noresize"

<frame src="frame_a.htm" longdesc="w3school.txt" /> longdesc属性指向了带有框架内容长描述的页面：

src 定义在框架中显示的内容的来源;

frameborder 规定是否显示框架周围的边框。(0或1);

align 控制对齐方式(left、right、middle、top、bottom);

height 框架的高度,

width 框架的宽度;

marginheight 定义 iframe 的顶部和底部的边距。

marginwidth 定义 iframe 的左侧和右侧的边距。

scrolling 规定是否在 iframe 中显示滚动条(yes、no、auto)。

name 规定 iframe 的名称。

bordercolor 指定边框颜色

<p>Your browser does not support iframes.</p>

</iframe>

关于框架集<frameset></frameset>中属性cols rows分割方法理解

<frameset cols="40%,2*,*"> 将窗口分为40%，40%，20%

<frameset cols="100,200,*"> 将窗口分为100像素，200像素和剩下的700像素

<frameset cols="100,*,*"> 　　将100像素以外的窗口平均分配

<frameset cols="*,*,*"> 　　　将窗口分为三等份

<frameset rows="*,*,*"> 总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3

<frameset cols="40%,*,*"> 总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧

以上"*"表示剩余部分

总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,

所占空间依据rows和cols属性的值,其中200的单位是像素

属性汇总:

frameset(框架集)

rows 它是将框架集划分为上下型

cols 它是将框架划分为左右型

border 是用于设置框架的边框粗细

frameborder 是用于设置是否显示边框, 取值：yes|no或1|0

bordercolor 用于设置框架边框的颜色

frame(框架页)

noresize 是否可以调整小窗口的大小

name 用于设置小窗口的名称

src 小窗口的url

scroll 是否显示滚动条 yes|no|auto

实例: iframe满屏方案

在线咨询

上一篇：HTML添加背景音乐(embed、audio)
下一篇：9 个实用配色小工具，轻松搞定网页设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商