【JavaWeb】HTML语言_框架标签

最新推荐文章于 2023-06-19 22:13:48 发布

Enjoy96

最新推荐文章于 2023-06-19 22:13:48 发布

阅读量856

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79018339

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

框架标签

1.标签名称：<frame/>

框架标签含有属性src和name：

（1）src：链接到的网页

（2）name：name属性值和超链接中的target属性值一致（相当于一个打开的标记）

注：一个页面包含多个frame标签

2.如果存在多个html页面的话，使用框架集标签<frameset></frameset>

框架集标签frameset有两个属性：

（1）rows：按照行划分（从上至下划分的几个部分占整体部分的比例）

例：<frameset rows="10%,*">

</frameset>

（2）clos：按照列划分（从左至右的划分占整体的比例）

例：<frameset clos="30%,*">

</fameset>

注：（1）*表示其他部分占用百分比所剩余的部分

（2）frameset标签不能和body 标签共存！

3.另一种框架标签（画中画的效果）：

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>&reg;</sup>版权所有<sup>&copy;</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>

效果：

Enjoy96

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】HTML语言_框架标签

框架标签1.标签名称：框架标签含有属性src和name：（1）src：链接到的网页（2）name：name属性值和超链接中的target属性值一致（相当于一个打开的标记）注：一个页面包含多个frame标签2.如果存在多个html页面的话，使用框架集标签框架集标签frameset有两个属性：（1）rows：按照行划分（从上至下划分的几个部分占整体部分的比例）例：f
复制链接

扫一扫