html框架
不知道为什么，html的框架是我的一个盲点。
框架将浏览器分为多个不同的区域，每个区域都可以显示独立，课滚动的页面。
我现在将框架理解成一般的表格。
框架的基本结构：
框架集frameset和框架frame
框架集<frameset>取代页面的<body>标签，也就是<frameset>和<body>不能共存。当然这样可能引发一些浏览器器的支持问题。
简单的demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>body</title> </head> <frameset cols="20%,*"> <frame src="body_left.html" /> <frame src="body_right.html" /> </frameset> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <frameset rows="200,60%,*"> <frame src="head.html" /> <frame src="body.html" /> <frame src="foot.html" /> </frameset><noframes></noframes> </html>
test.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> </head> <frameset rows="200,60%,*"> <frame src="head.html" /> <frame src="body.html" /> <frame src="foot.html" /> </frameset><noframes></noframes> </html> body.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>body</title> </head> <frameset cols="20%,*"> <frame src="body_left.html" /> <frame src="body_right.html" /> </frameset> <!-- <body> body.html </body> --> </html>
使用frameset做到下面的效果最好是使用frameset的嵌套。其实frameset你也可以把它想象成一个基础的frame。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<frameset rows="200,60%,*">
<frame src="head.html" />
<frameset cols="20%,*">
<frame src="body_left.html" />
<frame src="body_right.html" />
</frameset>
<frame src="foot.html" />
</frameset><noframes></noframes>
</html>
达到上面的效果，使用标签的嵌套
frameset的属性：
rows：当你的页面使用框架集分为几行的格子的时候，在frameset标签中加上rows属性rows中每一行的大小用逗号隔开，里面的值可以用像素、百分比、*,
*一般放在末尾，表示页面剩下的空间
<frameset rows="300,20%,*" border="" bordercolor="" > </frameset>
border和bordercolor属性就不多说了。
cols属性设置框架集中的列，用法与rows类似，cols和rows一般不同时使用，达到效果要使用框架的镶嵌。同时使用得到的分块成了表格格式一样
<noframes>标签
由于frameset标签取代了body标签，所以可能引发浏览器的支持问题，无法显示框架内容。noframes是一个双标签，是framset的子标签。当浏览器不支持框架网页的时候，会自动寻找并显示<noframes>里面的内容
<frameset cols="100,*"> <frame/> <frame/> <noframes> 很抱歉，您的浏览器不支持框架显示内容。 </noframes> </frameset>
frame的属性：
src：框架的内容对应的页面的地址
name：（框架间的跳转）frame的名称，自定义，作为一种标志，可以被其他框架间页面中的<a>标签的target引用给其他框架（不过引用的a标签和target的链接地址应该在同一框架集内吧，要不然无法达到同步，尝试了一下，不是同一框架集没做到）
引用demo:
<frameset rows="200,60%,*"> <frame src="head.html" name="head" /> <frame src="body.html" name="body" /> <frame src="foot.html" name="foot" /> <noframes>对不起，您的浏览器不支持框架</noframes> </frameset> <body> foot.html <a href="http://www.baidu.com" target="body">给body里面百度的内容</a> </body> <frameset cols="20%,*"> <frame src="body_left.html" /> <frame src="body_right.html" /> </frameset>
效果：
noresize属性：
有些时候虽然在框架集中分配空间的给定了像素值，但是有时候框架的大小还是可以改变，为了固定框架的大小，我们使用frame的noresize属性
<frame src="http://www.163.com" noresize="noresize" />
marginwidth和marginheight和frameborder属性
这个不多说了
内联框架iframe：
内联框架的特点：可以和body共存。
页面中嵌入一个框架窗口，也称为浮动框架
属性和普通框架一致，用法也一致。
demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> 给body里面百度的内容<br/> <iframe src="foot.html" name="ifram" /> </body> </html>
效果：
iframe比frameset的优势：
1、在body里面使用
2、在body中的任何位置都可以使用
