您的位置：首页 > 编程语言 > Java开发

【JavaWeb】HTML语言_框架标签

2018-01-09 22:32 489 查看


框架标签

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>


效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航