HTML框架
Posted muzidaitou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML框架相关的知识，希望对你有一定的参考价值。
1.什么是框架？
框架将浏览器划分为不同的部分，每一部分加载不同的网页，实现再同意浏览器窗口中加载多个页面的效果。
2.<frameset>划分框架标记
（1）语法格式：
<frameset>... ...</frameset>
（2）属性
cols：使用“像素数”和%分割左右窗口，“*表示剩余部分”
如果使用“*”，“*”表示框架平均分成2个
如果使用“*，*，*”表示框架平均分成3个
rows：使用“像素数”和%分割上下窗口，“*”表示剩余部分
frameborder：指定是否显示边框，0不显示，1显示
border：设置边框的大小，默认值5像素
（3）<frame>子窗口标记
注意：<frame>是一个单标记，该标记必须放在<frameset>中使用，再<frameset>中设置了几个窗口，就必须对应使用几个<frame>框架，而且还必须使用src属性指定一个网页。
属性：
src：加载网页文件的URL地址
name：框架名称，是链接标记的target所要参数
noresize：表示不能调整框架大小，格式：noresize="noresize"，没有设置是就可以调整
scrolling：是否需要滚动条，值有auto、yes、no
frameborder：是否需要边框，值有1（显示边框）、0（不显示边框）
3.举例说明
demo.html代码：
1 <html> 2 <head> 3 <title>框架</title> 4 <meta charset="UTF-8"> 5 </head> 6 <frameset rows="120,*,120" frameborder="1" border="2"> 7 <frame name="top" src="top.html"/> 8 <frameset cols="20%,80%" > 9 <frame name="left" src="left.html" noresize="noresize"/> 10 <!--<frame name="right" src="right.html"/>--> 11 <frame name="right" src="right.html" scrolling="no"/> 12 </frameset> 13 <frame name="bottom" src="bottom.html"/> 14 </frameset> 15 </html>
top.html代码：
1 <html> 2 <head> 3 <title>框架</title> 4 <meta charset="UTF-8"> 5 </head> 6 <body bgcolor="green" topmargin="10"> 7 <img src="car.jpg" height="90" width="160" align="left"> 8 <h1> <a href="demo.html" target="_blank"><font color="white">汽车之家</font></a> </h1> 9 <p><font color="white" size="4"> 请记住我们的网站：www.carhome.com</font></p> 10 </body> 11 </html>
left.html代码：
1 <html> 2 <head> 3 <title>框架</title> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <ul> 8 <li> 9 <a href="demo.html" target="_blank"><font size="6">首页</font></a> 10 </li> 11 <li> 12 <a href="demo.html" target="_blank"><font size="6">新闻</font></a> 13 </li> 14 <li> 15 <a href="demo.html" target="_blank"><font size="6">资讯</font></a> 16 </li> 17 <li> 18 <a href="demo.html" target="_blank"><font size="6">图片</font></a> 19 </li> 20 <li> 21 <a href="demo.html" target="_blank"><font size="6">联系我们</font></a> 22 </li> 23 </ul> 24 </body> 25 </html>
right.html代码：
1 <html> 2 <head> 3 <title>框架</title> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <table> 8 <tr> 9 <td> 10 <img src="demo.jpg" width="120" height="80"> 11 </td> 12 <td> 13 <p> 14 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 15 </p> 16 </td> 17 </tr> 18 <tr> 19 <td> 20 <img src="demo.jpg" width="120" height="80"> 21 </td> 22 <td> 23 <p> 24 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 25 </p> 26 </td> 27 </tr> 28 <tr> 29 <td> 30 <img src="demo.jpg" width="120" height="80"> 31 </td> 32 <td> 33 <p> 34 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 35 </p> 36 </td> 37 </tr> 38 <tr> 39 <td> 40 <img src="demo.jpg" width="120" height="80"> 41 </td> 42 <td> 43 <p> 44 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 45 </p> 46 </td> 47 </tr> 48 <tr> 49 <td> 50 <img src="demo.jpg" width="120" height="80"> 51 </td> 52 <td> 53 <p> 54 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 55 </p> 56 </td> 57 </tr> 58 <tr> 59 <td> 60 <img src="demo.jpg" width="120" height="80"> 61 </td> 62 <td> 63 <p> 64 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 65 </p> 66 </td> 67 </tr> 68 <tr> 69 <td> 70 <img src="demo.jpg" width="120" height="80"> 71 </td> 72 <td> 73 <p> 74 改编自东野圭吾原著同名小说《解忧杂货店》，讲述了在一家僻静街道旁的杂货店，只要写下烦恼投进店前门卷帘门的投信口，第二天就会在店后的牛奶箱里得到回答。某个夜晚，三个身在迷途的年轻人阿杰、小波、彤彤无意闯入，没想到开启了时光隧道，从收到来自过去的第一封咨询信开始，在不断的回信和收信过程中，过去链接了未来，犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择，找到了心灵的方向，不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。 75 </p> 76 </td> 77 </tr> 78 </table> 79 </body> 80 </html>
bottom.html代码：
1 <html> 2 <head> 3 <title>框架</title> 4 <meta charset="UTF-8"> 5 </head> 6 <body bgcolor="green" topmargin="50"> 7 <center><font size="4" color="white">©2019/8/6 木子版权所有</font></center> 8 </body> 9 </html>
效果展示：
以上是关于HTML框架的主要内容，如果未能解决你的问题，请参考以下文章