位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 3.9 HTML 框架集 frameset标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 3.8 HTML框架 iframe标签 下一篇: 3.10 HTML框架集 frame标签

核心代码

简单的三框架页面,代码如下:

<frameset cols="25%,*,25%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

基础语法

所有主流浏览器都支持 <frameset> 标签。

HTML5 不支持 <frameset> 标签。

<frameset> 标签定义一个框架集。

<frameset> 元素被用来组织一个或者多个 <frame> 元素。每个 <frame> 有各自独立的文档小白教程网

<frameset> 元素规定在框架集中存在多少列或多少行,以及每行每列占用的百分比/像素。

注释:如果您希望验证包含框架的页面,请确保 <!DOCTYPE> 被设置为 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" ;如下示例

小白教程网www.2d5.net

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

属性的使用

<frameset cols="pixels|%|*">
可选的属性

属性

描述

cols

pixels
  %
  *

HTML5 不支持。规定框架集中列的数目和尺寸。

rows

pixels
  %
  *

HTML5 不支持。规定框架集中行的数目和尺寸。

属性值含义

描述

pixels

规定列尺寸,以像素计(比如 "100px" 或者只是 "100")。

%

规定列尺寸,以可用空间的百分比计(比如 "50%")。

*

可用空间的剩余部分将会分配给该列。

示例

小白教程网www.2d5.net

: HTML 框架集 frameset标签 三框架页面

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 框架集 frameset标签 三框架页面</title>
</head>
 
<frameset cols="25%,*,25%">
  <frame src="frame_a.html">
  <frame src="frame_b.html">
  <frame src="frame_c.html">
</frameset>
    
<noframes>  
<body>
</body>
</noframes>
    
</html>

效果如图3-19


image.png


示例

小白教程网www.2d5.net

:frameset水平框架以及属性值的使用

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
     <frameset rows="25%,*,15%">
             <frame src="frame_a.html"></frame>
             <frame src="frame_b.html"></frame>
             <frame src="frame_c.html"></frame>
     </frameset><noframes></noframes>
 
</html>

效果如图3-20

image.png

示例

小白教程网www.2d5.net

:frameset混合结构框架和frame的noresize属性.

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

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

效果如图3-21

image.png


上一篇: 3.8 HTML框架 iframe标签 下一篇: 3.10 HTML框架集 frame标签
毕业设计网             广告联系QQ:45157718(微信同号)