【JavaWeb】HTML语言

xiaoxiao2021-02-28  7

框架标签

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> 效果:
转载请注明原文地址: https://www.6miu.com/read-1400229.html

最新回复(0)