内嵌标签-iframe

  • iframe
  • 属性:
    • src:要显示的网页资源路径。可以是本地(相对路径)也可以是网络资源(URL)
    • 注意:默认当前页面打开及加载src指向的资源
    • width:设置显示区域的宽度
    • height:设置显示区域的高度
    • name:设置内嵌区域的名字,结合超链接标签的target属性使用。src属性为空
  • 作用:
    • 在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的. 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <html>
      	<head>
      		<title>内嵌标签学习</title>
      		<meta charset="UTF-8"/>
      	</head>
      	<body>
      		<h3>内嵌标签学习</h3>
      		<hr />
      		<a href="http://www.baidu.com" target="_if">百度一下</a>
      		<a href="http://www.so.com" target="_tt">360搜索</a><br />
      		<iframe src="" width="48%" height="400px" name="_if"></iframe>
      		<iframe src="" width="48%" height="400px" name="_tt"></iframe>
      	</body>
      </html>
  • 效果

框架标签-frameset

  • 注意:第一步一定要删除body标签
  • 属性：
    • rows:按照行进行切分页面
    • cols:按照列进行切分页面
    • 可以按百分比分，可以按px分，“*”代表剩余的全部
  • 子标签-frame:
    • frame:进行切分区域的占位,一个frame可以单独加载网页资源.
    • src:资源路径(本地或者网络)
    • name:区域名,结合超链接使用
  • frameset主框架代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
    	<head>
    		<title>框架标签学习：</title>
    		<meta charset="UTF-8"/>
    	</head>
    	<frameset rows="10%,*,10%">
    		<frame src="frameset/top.html" />
    		<frameset cols="10%,*">
    			<frame src="frameset/left.html" />
    			<frame src="frameset/right.html" name="_right"/>
    		</frameset>
    		<frame src="frameset/bottom.html" />
    	</frameset>
    </html>
  • top.html代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <html>
    	<head>
    		<title></title>
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		我是 top
    		<a href="../12-HTML-frameset登录页面.html" target="_top">退出</a>
    	</body>
    </html>
  • left.html代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <html>
    	<head>
    		<title></title>
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		<ul>
    			<li><a href="http://www.baidu.com" target="_right">百度一下</a></li>
    			<li><a href="http://www.taobao.com" target="_right">淘宝网</a></li>
    			<li><a href="http://www.jd.com" target="_right">京东网</a></li>
    		</ul>
    	</body>
    </html>
  • right.html代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    	<head>
    		<title></title>
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		我是 right
    	</body>
    </html>
  • bottom.html代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    	<head>
    		<title></title>
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		我是 bottom
    	</body>
    </html>
  • frameset登录页面.html代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
    	<head>
    		<title>登录页面</title>
    		<meta charset="UTF-8"/>
    	</head>
    	<body>
    		<h3>欢迎访问506主页</h3>
    		<hr />
    		<a href="11-HTML-框架标签学习.html">点我登录主页</a>
    	</body>
    </html>
  • 效果