1.标签名称：<frame/>
框架标签含有属性src和name：
（1）src：链接到的网页
（2）name：name属性值和超链接中的target属性值一致（相当于一个打开的标记）
注：一个页面包含多个frame标签
2.如果存在多个html页面的话，使用框架集标签<frameset></frameset>
框架集标签frameset有两个属性：
（1）rows：按照行划分（从上至下划分的几个部分占整体部分的比例）
例：<frameset rows="10%,*">
<frame src="顶部页面.html"/>
</frameset>
（2）clos：按照列划分（从左至右的划分占整体的比例）
例：<frameset clos="30%,*">
<frame src=" "/>
</fameset>
注：（1）*表示其他部分占用百分比所剩余的部分
（2）frameset标签不能和body 标签共存！
3.另一种框架标签（画中画的效果）：
<iframe></iframe> 属性src：链接到的页面
4.框架标签图解：
例：用框架标签实现一个学生信息管理系统
<!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> <!--frameset 标签不能和body标签共存！--> <frameset rows="10%,*"> <frame src="头部页面.html" /> <frameset cols="30%,*"> <frame src="菜单页面.html" /> <!--指定name后就可以在“主体页面中打开菜单中的选项”--> <frame src="主体页面.html" name="touch"> </frameset> </frameset> <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> 菜单选项： <ul type="disc"> <!--超链接标签：target属性是打开资源的一种方式 在框架标签中使用，可以指定链接之后打开资源的目标地址 --> <li><a href="../表格标签.html" target="touch">学生管理</a></li> <li><a href="http://www.baidu.com" target="touch">选课管理</a></li> <li><a href="http://www.sina.com" target="touch">课程管理</a></li> </ul> </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> <center>欢迎进入管理界面</center> </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> <div align="center">学生信息管理系统</div> </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> <frameset rows="10%,*,10%"> <frame src="header.html" /> <frameset cols="30%,*"> <frame src="menu.html" /> <frame src="main.html" name="main"/> </frameset> <frame src="foot.html" /> </frameset> <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> <center><h3>学生选课管理系统</h3></center> </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> <center>西部开源<sup>®</sup>版权所有<sup>©</sup>2015-2017</center> </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> 欢迎登录学生选课管理系统 </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> 菜单选项: <ul type="square"> <!--target属性可以指定frame的name属性的值,就可以在frame包含的页面中打开href连接到的页面--> <li><a href="student.html" target="main">学生管理</a></li> <li><a href="">课程管理</a></li> <li><a href="">教师管理</a></li> <li><a href="">选课管理</a></li> </ul> </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> <center><h3>学生信息列表</h3></center> <table border="1" align="center" width="500px" height="300px"> <tr> <th>姓名</th> <th>年龄</th> <th>班级</th> </tr> <tr> <td>张三</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>李四</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>王五</td> <td>20</td> <td>计算机1班</td> </tr> <tr> <td>陈六</td> <td>20</td> <td>计算机1班</td> </tr> </table> </body> </html> 最终效果：
练习3：最后看一看另一种框架格式（画中画）： <!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> <!-- iframe:框架标签(画中画) src属性:连接到页面 --> <body> <iframe src="04.格式优雅的表单.html" height="400px"> </iframe> </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> <div align="center"> <font color="red" size="7">用户注册</font> </div> <form action="#" method="post"> <table border="1px" align="center"> <tr> <td>用户名</td> <td> <input type="text" name="username" /> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name="password"/> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女 </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobit" value="唱歌"/>唱歌 <input type="checkbox" name="hobit" value="玩游戏"/>玩游戏 <input type="checkbox" name="hobit" value="听音乐"/>听音乐 </td> </tr> <tr> <td>学历</td> <td> <select name="edu"> <option value="请选择学历">请选择学历</option> <option value="ss">研究生</option> <option value="bk">本科</option> <option value="dz">大专</option> </select> </td> </tr> <tr> <td>上传照片</td> <td> <input type="file" name="desc"/> </td> </tr> <tr> <td>自我描述</td> <td> <textarea rows="5" cols="20" name="input">刻苦学习....</textarea> </td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </body> </html> 效果：
