HTML框架
一、框架标签：(使用框架标签不能使用body标签)
<frameset>下的属性：
frameborder="边框大小"
cols="按照列分割,单位百分比 像素 用，隔开"
rows="按照行分割，单位百分比 像素" >
border 边框的宽度
framespacing 像素 页面与页面的边距
<frame>下的属性：
src URL 链接的页面
noresize 是否允许浏览器自行改变框架大小默认不写表示可以改变
marginheight 像素 设置垂直方向，窗体内容与边界的距离
marginwidth 像素 设置水平方向，窗体内容与边界的距离
frameborder 0\1 不出现框体边/出现窗体边线
scrolling
yes 不管网页内容的大小，都出现滚动条
no 不管网页内容的大小，都不现滚动条
auto 浏览器自动判断，是否需要滚动条
垂直的框架：（cols可以分任意多个，总和加起来是100%即可）
<frameset cols="20%,*" framespacing="10"> <frame src="HTML中框架的的基本结构1.html" noresize="noresize" marginwidth="90"/> <frame src="HTML中框架的的基本结构2.html" marginheight="90" marginwidth="90"/> </frameset>
水平的框架：
<frameset rows="20%,*" framespacing="10"> <frame src="HTML中框架的的基本结构1.html" noresize="noresize" marginwidth="90"/> <frame src="HTML中框架的的基本结构2.html" marginheight="90" marginwidth="90"/> </frameset>
二、框架的嵌套：
<!-- framespacing="2":改变两个窗口之间的空隙大小 scrolling="yes":设置是否有滚动条，在对应的frame标签中设置 --> <frameset rows="10%,*" frameborder="0" framespacing="10"> <frame src="HTML中框架的嵌套top.html" noresize="noresize" scrolling="yes"/> <frameset cols="20%,*"> <frame src="HTML中框架的嵌套left.html" noresize="noresize"/> <frame src="HTML中框架的嵌套right1.html" name="right1"/> </frameset> </frameset> <noframes> <body>当浏览器不支持框架的时候，使用该标签，但现在主流浏览器都支持框架</body> </noframes>
三、导航框架：
<!-- framespacing="2":改变两个窗口之间的空隙大小 scrolling="yes":设置是否有滚动条，在对应的frame标签中设置 --> <frameset rows="10%,*" frameborder="0" framespacing="10"> <frame src="HTML中框架的嵌套top.html" noresize="noresize" scrolling="yes"/> <frameset cols="20%,*"> <frame src="HTML中框架的嵌套left.html" noresize="noresize"/> <frame src="HTML中框架的嵌套right1.html" name="right1"/> </frameset> </frameset> <noframes> <body>当浏览器不支持框架的时候，使用该标签，但现在主流浏览器都支持框架</body> </noframes>
HTML中框架的嵌套top.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>无标题文档</title> </head> <body> <img src="../../imgs/tingyingyue.png" width="1000" align="bottom"/> </body> </html>
HTML中框架的嵌套left.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>无标题文档</title> </head> <!--实现这个功能关键在于这个页面到超链接中的target属性--> <body bgcolor="#FFFF99"> <a href="HTML中框架的嵌套right1.html" target="right1">青花瓷</a><br /> <a href="HTML中框架的嵌套right2.html" target="right1">当兵的人</a> </body> </html>
HTML中框架的嵌套right1.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>无标题文档</title> </head> <body bgcolor="#99FF99"> 1.内容房金卡砀山龙卷风卡拉德斯基付款了撒旦积分卡束带结发asdfjlkasdjflkads<br /> fasdjklfjklasdjfklasdjfklasdjfklasdjkl假啊抵抗力司法局阿卡丽大煞风景卡拉斯的减肥了的萨克拉积分卡拉斯的积分卡拉斯的姐夫发大水了卡积分拉克丝的 </body> </html>
HTML中框架的嵌套right2.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>无标题文档</title> </head> <body bgcolor="#99FF99"> 2.内容风刀霜剑阿库房尽快拉萨等放假卡拉斯京东方离开家阿达撒疯狂拉萨的积分卡拉丁上进疯狂拉萨极度疯狂拉萨短发绝色赌妃卡拉胶苏打绿咖啡<br/> fdasklfjklasdjfkdlas吉萨考虑到放假啊克里斯多夫金坷垃大煞风景 </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>HTML中框架_悬浮框架的设置</title> </head> <!-- 悬浮框架的设置:不需要将body标签去掉 格式:<iframe>…</iframe> 属性名称 属性值 说明 height 像素/% 绝对/相对 高度 width 像素/% 绝对/相对 宽度 其余属性除了 noresize 外,其他都和 frameset 一样 --> <body> <table align="left" border="1" width="600" height="500" cellspacing="0"> <tr height="100"> <td colspan="2">标题</td> </tr> <tr> <td width="100" valign="top" align="center"> <a href="HTML标记的语法格式.html" target="in">主页</a><br /> <a href="HTML表单框架.html" target="in">第一页</a><br /> <a href="HTML表单详解.html" target="in">第二页</a><br /> <a href="HTML的超链接格式和属性.html" target="in">第三页</a><br /> <a href="HTML最常用的控制标记.html" target="in">第四页</a><br /> </td> <td> <iframe width="100%" src="HTML标记的语法格式.html" name="in" frameborder="0"> </iframe> </td> </tr> </table> </body> </html>
五、跳转至框架内的一个指定的节：
<frameset cols="20%,*" frameborder="0" framespacing="10"> <frame src="f1.html" noresize="noresize"/> <frame src="f2.html#a2" noresize="noresize"/><!--这里src="f2.html#a2"表示跳转到f2这个页面中的第二个节点--> </frameset> <noframes> <body>当前浏览器不支持框架</body> </noframes>
<!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> </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>无标题文档</title> </head> <body> <a name="a1"> <h1>第一节</h1> <p>内容内容内容内容内容内容一</p> <br /><br /><br /> </a> <a name="a2"> <h1>第二节</h1> <p>内容内容内容内容内容内容二</p> <br /><br /><br /> </a> <a name="a3"> <h1>第三节</h1> <p>内容内容内容内容内容内容三</p> <br /><br /><br /> </a> <a name="a4"> <h1>第四节</h1> <p>内容内容内容内容内容内容四</p> <br /><br /><br /> </a> <a name="a5"> <h1>第五节</h1> <p>内容内容内容内容内容内容五</p> <br /><br /><br /> </a> </body> </html>
六、使用框架导航跳转至指定的节：
<frameset cols="20%,*" frameborder="0" framespacing="10"> <frame src="f1.html" noresize="noresize"/> <frame src="f2.html" noresize="noresize" name="content"/><!--这里src="f2.html#a2"表示跳转到f2这个页面中的第二个节点--> </frameset> <noframes> <body>当前浏览器不支持框架</body> </noframes>
<!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> <a href="f2.html" target="content">没有锚点的链接</a><br /> <a href="f2.html#a3" target="content">有锚点的链接</a> </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>无标题文档</title> </head> <body> <a name="a1"> <h1>第一节</h1> <p>内容内容内容内容内容内容一</p> <br /><br /><br /> </a> <a name="a2"> <h1>第二节</h1> <p>内容内容内容内容内容内容二</p> <br /><br /><br /> </a> <a name="a3"> <h1>第三节</h1> <p>内容内容内容内容内容内容三</p> <br /><br /><br /> </a> <a name="a4"> <h1>第四节</h1> <p>内容内容内容内容内容内容四</p> <br /><br /><br /> </a> <a name="a5"> <h1>第五节</h1> <p>内容内容内容内容内容内容五</p> <br /><br /><br /> </a> </body> </html>
