html 框架标签

2017-09-26 本文已影响69人艳晓

一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(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>