HTML 框架标记

Naraseny

于 2022-03-04 14:42:01 发布

阅读量905

点赞数

文章标签： html p2p 前端

本文链接：https://blog.youkuaiyun.com/qq_62881798/article/details/123276243

版权

回顾：

<!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
   </head>
   <body>
   
   </body>
   </html>

框架标签

*******框架标签：<frameset>/<frame>/<noframes>/<iframe>

所谓框架便是网页画面分成几个框窗，同时取得多个 URL.【分成左右两相等部分，左便是显示 up2u.html，右边则会显示 me2.html】

   <frameset cols="50%,*">
       <frame name="hello" src="up2u.html">
       <frame name="hi" src="me2.html">
   </frameset>

【例子】<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000">
   COLS="90,*" ====》垂直切割画面(如分左右两个画面)
   ROWS="120,*" ======》就是横向切割，将画面上下分开，数值设定同上
   frameborder="0" =====》设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。
   border="0" ====》设定框架的边框厚度，以 pixels 为单位。
   bordercolor="#008000" ====》设定框架的边框颜色。
   framespacing="5" ====》表示框架与框架间的保留空白的距离。

【例子】：<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">
   SRC="a.html"
       设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。
   NAME="top"
       设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。
   frameborder=0
       设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ）
   framespacing="6"
       表示框架与框架间的保留空白的距离。
   bordercolor="#008000"
       设定框架的边框颜色。颜色值请参考【HTML 剖析】。
   scrolling="Auto"
       设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。
   noresize
       设定不让使用者可以改变这个框框的大小，亦没有设定此参数，使用者可以很随意地拉动框架，改变其大小。
   marginhight=5
       表示框架高度部份边缘所保留的空间。
   marginwidth=5
       表示框架宽度部份边缘所保留的空间。

分割面板的使用：

1.例子一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
    <!--
        框架标记：目前已处于淘汰的边缘
         可以将一个网页按照特点的需求进行切割。
             类似swing中的JSplitPane（分割面板）
        标签：frameset
        特点：与其他标签不一样的地方就是必须在body标签的外面编写
        语法：
            <frameset rows = "" cols = "">
            </frameset>
        rows = "20%,80%"  根据frameset标签将网页分割成2个等分  20%  80%
        内容填充面板：frame标签  引入网页的作用
            状态码：
                404  页面资源不存在
                200  正常响应，默认是看不到。
                500     页面上代码存在问题（写错，语法错误）
     -->
    <!-- <frameset rows="20%,80%">
        <frame src="top.html">
        <frame src = "left.html">
    </frameset> -->
 
    <!-- <frameset cols="20%,40%,40%">
        <frame src="top.html">
        <frame src = "left.html">
        <frame src = "left.html">
    </frameset>  -->
    <!-- frameborder 设置框架的边框 -->
    <!-- border 设置框架的边框厚度 -->
    <!-- borderColor 边框颜色 -->
    <frameset cols="20%,*" border = "10" borderColor = "red">
        <frame src="top.html">
        <frame src = "left.html">
    </frameset>
</html>

2.例子二：

第一个界面
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
	
	<frameset rows = "16%,*">
		<!-- 上 -->
		<frame src = "top.html">
		<frameset cols = "20%,*">
			<frame src ="left.html">
			<frame src = "home.html" name = "myRight">
		</frameset>
	</frameset>
</html>
第二个界面
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>欢迎来到特务后台管理系统</h3>
</body>
</html>
第三个界面
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul style="list-style: none">
		<li><a href="home.html" target="myRight">后台首页</a></li>
		<li><a href="twgl.html" target="myRight">特务管理</a></li>
		<li><a href="">产品管理</a></li>
		<li><a href="">订单管理</a></li>
		<li><a href="">个人设置</a></li>
	</ul>
</body>
</html>
第四个界面n
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table width="100%" border="1">
		<tr>
			<td>编号</td>
			<td>姓名</td>
			<td>爱好</td>
			<td>年龄</td>
		</tr>
		<tr>
			<td>1</td>
			<td>zz</td>
			<td>足球</td>
			<td>18</td>
		</tr>
		<tr>
			<td>2</td>
			<td>cc</td>
			<td>撩妹子</td>
			<td>18</td>
		</tr>
	</table>
</body>
</html>
第五个界面
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h3>欢迎来到特务后台管理系统</h3>
</body>
</html>

内嵌套标记框架

 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- iframe 内嵌框架标记 -->
<iframe width="100%" height = "500"src="http://www.4399.com" frameborder="0"></iframe>
 
</body>
</html>