（前端）HTML之框架标记_html左右框架-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65479202/article/details/124334576

本文介绍了HTML中的框架标记，包括<frameset>和<iframe/>的使用。通过框架，可以实现网页的多窗口显示和页面复用。文章详细解析了如何创建框架网页，设置框架属性，以及<iframe/>的优势，如灵活性和模板复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是框架标记？？？

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

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

框架的两类用途：

1、显示多窗口页面---使用<frameset>框架集

2、页面复用—使用<iframe/>内嵌框架

创建框架网页的步骤：

创建各子窗口对应的HTML文件

创建整个框架页面文件，引用子窗口文件

框架页面的基本语法

【例子】<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
       表示框架宽度部份边缘所保留的空间。

为什么用<iframe />？？？

<frameset>需要使用多个文件，目录结构复杂

内嵌较为灵活，可以在网页的任何位置使用

可以作为模板，在本网站的多个页面复用

案例：


<html> 
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册＆认证</title>
<style type="text/css">
<!--
/*设置项目列表的图片*/
li {
	list-style-image: url(images/list_icon.gif);
	font-size:15px;
	 
	}

/*设置无下划线的超连接样式*/
A {
	color: blue;
	text-decoration: none;
   }       
  a:hover{ /*鼠标在超链接上悬停时变为颜色*/
   color: red;
   }
-->
</style>
 
 </head>

<BODY   >
 
<h3>知识堂首页 &gt;&gt; 注册＆认证 </h3>
<p><img src="images/reg_line.jpg" width="580" height="12" alt="alt" /></p>
<p>享受贵美网免费网上交易乐趣，并且在超人气的社区尽情交流您的网上购物经验，您需要先注册成为贵美的会员，具体的步骤如下：</p>
<p><img src="images/reg_step.jpg" width="495" height="47" alt="alt" /></p>
<ul type="square">
  <li><a href="#">如何激活会员名？</a></li>
  <li><a href="#">如何注册贵美会员？</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 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>创建多框架页面</title>
</head>
<frameset rows="22%,*" frameborder="0">
    <frame src="subframe/top.html" name="topframe" scrolling="no"  />
	<frameset cols="20%,*">
	<frame src="subframe/left.html"  name="leftframe"scrolling="no"  />
	<frame src="subframe/right.html" name="rightframe" />
	</frameset>
</frameset>
</html>