HTML中的frame标签常见的6大属性，新手一定要悉知！

TML框架和HTML页内框架的区别？

在进行网站网页设计中，会经常碰到在一个窗口中需要显示多个独立的网页页面的问题，这时候需要用到HTML frame系列标签，而frame系列标签是HTML框架中不可缺少的。要正确理解HTML框架和HTML页内框架是两个概念。HTML框架没有特殊说明一般指的是HTML中的frame系列标签，它在网页中的主要作用是把浏览器窗划分成若干独立的小窗口，每个窗口显示相互不同的内容。了解了HTML框架和HTML页内框架是不同概念后，下面为大家说一下HTML中的frame标签的使用。

在网页设计中如果使用框架frame一般是框架集的形式出现的，框架集是指包含多个框架frame的信息，可以通过frameset来定义框架集。框架是按照行和列构成的，可以使用frameset标记对框架frame结构进行设置。所有浏览器都支持 frame标签，所以可以放心使用frame不会出现兼容问题。

frame常见的属性

1、左右分割窗口属性“cols”

在水平方向上将浏览器分割成若干个窗口，可以通过左右分割窗口属性cols实现。语法格式如下：

cols的值用来指定各个框架的列宽，取值有3种形式：像素、百分比（%）、相对尺寸（*）。如果我们想通过框架把浏览器窗口划分为3列，其中第一列占浏览器宽度30%，第二列占像素为320，第三列为相对剩下部分的框架，如果要实现这种效果可以把cols的值设定为cols=“30%，320px，*”，就可以实现上面说的效果。如果想通过框架把浏览器划分为3个宽度相等的框架可以把cols的值设定为cols=“*，*，*”。

2、上下分割窗口属性rows。

在垂直向上将浏览器分割成多个窗口，可以通过rows属性实现，语法格式如下：

rows属性值用来指定各个框架的行高，也有三种形式:像素、百分比（%）、相对尺寸（*），它的设置方法和cols属性相似。

3、框架边框显示属性frameborder。

用于指定框架周围是否显示边框，取值为1或0，1是显示边框默认值，0是不显示边框。

4、framespacing

用于指定框架建的距离，一像素为单位。如果不设置该属性，框架直接没有距离。

5、边框宽度属性border。

用于指定边框的宽度，它有一个前提就是frameborder属性必须是1时才有效。

6、noresize属性

可选属性，如果不写这个属性，框架的边框是可以被拖动的改变宽高，可以通过拖动边框来改变窗口大小。

关于“HTML中的frame标签的使用”先聊到这。每天学习一个知识点，每日寄语-“只有飞得更高，才有俯瞰一切的资格。”如转载清标明出处。

于提升 web 品质，<DOCTYPE>、<title> 以及 <h1> 都是重要的标签。

<!DOCTYPE> 元素

所有的 HTML 和 XHTML 页面都应当使用 <Doctype> 元素来定义遵照何种 HTML 版本。

doctype 定义了您正在使用的 HTML 版本，并为浏览器提供重要的信息以便其更快速一致地呈现您的页面。

文档类型声明同时也使验证软件可以对页面的语法进行检查：

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title> 元素

<title> 元素是最重要的 HTML 元素之一。它的主要功能是描述网页的内容。

即使标题不是网页的一个可见的部分，它对于提升网站的品质依然是重要的，这是因为它在以下位置都是可见的：

搜索引擎列表
窗口的标题栏
用户的书签中

标题应当尽可能地短，并具有可描述性。

当某个用户在 internet 上搜索网站时，大部分搜索引擎都会在搜索结果中显示出网站的标题。请确保标题与网页的内容是吻合的。这样的话用户有更多的可能通过点击这些链接来访问到你的网站。

当用户访问您的网站时，在窗口的标题栏中标题是可见的。请确保即使窗口被最小化，标题同样能起到描述网站内容的作用。

在用户访问你的网站之后，网页的标题会存储于历史文件夹（用户甚至会把网页收藏到他的收藏夹中）。为了后续的成功访问，同样请确保标题可以清楚地描述您的网站。

优秀的标题：

<title>HTML Tutorial</title>

<title>XML Introduction</title>

差距的标题的例子：:

<title>Introduction</title>

<title>Chapter 1</title>

W3Cschool拥有一整套组织良好、易于理解的 HTML、CSS、JavaScript、 DHTML、XML、XHTML、WAP、ASP、SQL 教程，并包含非常多实例和源代码。

<h1> 元素

<h1> 元素用来描述网页中最上层的标题。

由于一些浏览器会默认地把 <h1> 元素显示为很大的字体，因此会有一些 web 开发者使用 <h2> 元素代替 <h1> 元素来显示最上层的标题。这样做不会对读者产生影响，但会使那些试图"理解网页结构"的搜索引擎和其他软件感到迷惑。

请确保把 <h1> 用于最顶层的标题，<h2> 和 <h3> 用于较低的层级。

可以试着根据此模版来构造您的网页：

This is the main heading

Some initial text

This is a level 2 heading

This is some text. This is some text. This is some text.

This is a level 3 heading

This is some text. This is some text. This is some text.

This is a level 3 heading

This is some text. This is some text. This is some text.

如果您不喜欢默认的标题字体尺寸，可以使用样式或样式表来改变。

rame 的最主要功能是用来把一个页面划分成好几个小窗口页面，每个小窗口可以显示不同html文件，这样页面也可以称为框架结构页面，每个月小窗口称作框架窗口，下来将详细介绍框架窗口。

frame 在现在已经很少使用，虽然不是必须学习的，但还是建议了解学习下frame 、iframe的知识，在某些时候非常有用。

什么是 frame 框架

如果想将页面分成上下两部分，各自互相独立又互相关联，用户在其中一个部分操作页面不影响其它部分的页面，这样的页面也叫多窗口页面。

1、框架窗口基本结构：

框架窗口主要包含2部分，一个是框架集，一个是具体的框架文件。

框架集就是存放框架结构的文件，也是访问框架文件的入口，如果网页由上下2个框架窗口组成，那么除了这2个窗口的html文件，还有一个总的框架集文件。

框架文件是每个显示区域对应的html文件，如下示例：

index.html

<html>
<head>
  <title>框架页面</title>
</head>
<body>
  <frameset>
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>
  </body>
</html>

如上index.html 就是框架集文件，在这个框架集文件中定义了页面划分成上下2部分，分别对应top.html 和 bottom.html 2个框架窗口文件。

2、框架窗口分割

框架页面分割方式是在框架集frameset通过rows 或 cols 属性定义的，一般按分割类型分为以下几种：

水平分割窗口
垂直分割窗口
嵌套分割窗口

2.1 水平分割窗口

将页面按水平方向分割，也就是上下结构，语法：

<frameset rows="窗口1高度，窗口2高度，">
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>

在该语法中，rows 可以设置多个值，每个值对应一个框架窗口垂直高度，它的值可以使用像素单位或百分比单位。

如下示例：

<html>
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

显示效果：

比如上面这个，被从上到下分割成3个窗口，高度依次是25%,50%,25%。

2.2 垂直分割窗口

沿着页面垂直方向分割，也就是左右结构的多窗口页面。语法如下：

<frameset cols="窗口1宽度，窗口2宽度，">
  <frame src="left.html"></frame>
   <frame src="right.html"></frame>
  </frameset>

在该语法中，cols 可以设置多个值，每个值对应一个框架窗口水平宽度，它的值可以使用像素单位或百分比单位。

示例：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

显示效果：

比如上面这个，被从左到右分割成3个窗口，宽度依次是25%,50%,25%。

2.3、嵌套分割窗口

嵌套窗口就是在一个页面既有水平分割又有垂直分割的窗口，如下示例：

先水平分割再垂直分割

<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

显示效果：

先垂直分割再水平分割

<frameset cols="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset rows="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

显示效果：

理论上可以无限嵌套，是不是很好玩。

2.4、noframes

当浏览器布置frame 时会显示noframes 中的内容。如下代码：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果显示：

框架集的属性

1、设置边框 —— frameborder

frameborder 等于0时不显示边框，默认显示。

2、边框宽度 —— framespacing

在html5中无效。

3、边框颜色 —— bordercolor

如下代码：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果：

具体可以参考这里 https://www.cnblogs.com/lavenderzh/archive/2012/04/09/2438803.html 查看这几个属性的关系。

框架页面属性

1、页面源文件 —— src

就是每个框架窗口对应的html文件，这里可以是图片或其它文件。

<frame src="文件地址">

2、页面名称 —— name

给每个框架窗口设置名称，有助于链接或查找窗口。

<frame src="文件地址" name="页面名称">

3、禁止调整窗口尺寸 —— noresize

党员鼠标拖到框架边框时，会发现鼠标形状变成可拖动的，可以改不框架窗口宽度或高度。如果不希望改变窗口宽度或高度，可以使用noresize 属性。

如下示例：

<html>
<frameset cols="25%,50%,25%">
  <frame noresize="noresize"  src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

窗口a是不可改变宽度的。

浮动框架 —— iframe

浮动框架是一种特殊的框架，它是在主窗口中嵌套一个子窗口，也就是整个页面不是框架页面，但却包含了一个框架窗口。

示例：

<iframe name="名称" src="https://www.w3school.com.cn/" width="800px" height="600px"></iframe>

效果如下：

1、浮动框架边框 —— frameborder

frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

显示效果：

2、链接到框架页面

通过 a 标签的 target 属性可以跳转到框架页面，示例如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>
<iframe src="http://www.runoob.com/" name="iframe_a"></iframe>
<p><a href="https://mp.toutiao.com/" target="iframe_a">头条号</a></p>
<p><a href="http://www.runoob.com/" target="iframe_a">菜鸟教程</a></p>
</body>
</html>

显示效果如下，点击下面2个链接，切换窗口。

总结

frame 和 iframe 浮动框架用途很广，比如可以实现页面局部刷新，在之前被广泛使用，但是现在基本不建议使用，它有很多问题，比如安全性，性能方面等。

当然有时也会使用iframe，比如打印pdf，下载文件等等。

上篇：前端入门——html 表单控件使用

在线咨询

上一篇：HTML5门槛低，尚学堂小编解读零基础如何学好它
下一篇：使用JS开发简单的音乐播放器

您的项目需求

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

整合营销服务商

HTML中的frame标签常见的6大属性，新手一定要悉知！

This is the main heading

什么是 frame 框架

框架集的属性

框架页面属性

浮动框架 —— iframe

总结

您的项目需求