html 框架标签

一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)
详情可见:http://www.dreamdu.com/xhtml/tag_frame/

主要概念:框架标签

framHTML框架使用frameset标签把浏览器的窗体分为多个行与列的框架页,每个页面又使用了[frame]标签定义,同时应该使用定义浏览器不支持框架时显示的内容。
1、frameset:框架标签
rows 横向分割 ,定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%
cols 纵向分割,定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%
表示自适应尺寸
<frameset rows="10%,
,50px"> 头部占10%、底部占50px、中间高度自适应
2、使用frame标签嵌套其他html页面 。
3、使用nresize属性固定frame的尺寸。
4、在frame中设置name属性==该页面的名称:使用如在left.html中将a标签链接内容在right.html中显示

框架标签的使用.png
一、index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<frameset rows="10%,*,50px">
    <frame src="top.html"  noresize="noresize"/>
    <frameset cols="30%, *">
        <frame src="left.html"  noresize="noresize"/>
        <frame src="right.html"  name="Right"/>
    </frameset>
    <frame src="bottom.html"  noresize="noresize"/>     
</frameset>
<noframes>
        <body>
            梦之都使用了框架技术,但是您的浏览器不支持框架,
            请升级您的浏览器以便正常访问梦之都。
        </body>
 </noframes>
</html>
二、top.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上方页面</title>
</head>
<body bgcolor="palevioletred">
    上方
</body>
</html>
三、bottom.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下方页面</title>
</head>
<body bgcolor="red">
    下方
</body>
</html>
四、left.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左侧页面</title>
</head>
<body bgcolor="orangered">
    <a href="http://www.mop.com" target="Right">猫扑</a>
    <a href="http://www.dapenti.com" target="Right">打喷嚏</a>
    <a href="http://www.cnbeta.com" target="Right">cnbeta</a>
    <a href="http://www.51aspx.com" target="Right">51.aspx</a>      
</body>
</html>
五、right.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>右侧页面</title>
</head>
<body bgcolor="blue">
    right
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • frameset 框架集 属性:cols: 按照列的方向来划分框架rows: 按照行的方向来划分框架注意: 以上两...
    小小机器人阅读 441评论 0 0
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,090评论 0 1
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 类 对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。 为相同的类设置相同的样式,或者为不...
    满满正能量_617a阅读 528评论 0 1
  • HTML 是用来描述网页的一种语言。1、HTML 指的是超文本标记语言 (Hyper Text Markup La...
    青春前行阅读 402评论 0 1