Dev_Nick

导航

html（四） -- 框架标签

框架标签

frameSet ： 一个frameSet可以把一个页面切割成多份,但是只能按照行或者列切割。

frame   不能被切割的。 frame是位于frameSet中。

iframe:  在一个网页中分隔一部分的位置显示另外一个网页的的信息。
    
注意： frameSet标签不能用于body标签体内容。

代码示例：

index.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 
 8     <frameset  rows="20%,70%,*" >
 9         <frame  src="top.html" />
10         <frameset cols="20%,*">
11             <frame src="left.html" />
12             <frame name="center" src="center.html"/>
13         </frameset>
14         <frame src="foot.html"/>
15     </frameset><noframes></noframes>
16 
17 </html>
View Code

top.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8     <div align="center"><font color="#FF0000" size="30px">公司的logo</font></div>
 9 
10 </body>
11 </html>
View Code

left.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8 <dl>
 9     <dt>功能介绍</dt>
10     <dd><a href="../2常用的标签.html" target="center" >公司简介</a></dd>
11     <dd><a href="#">产品介绍</a></dd>
12     <dd><a href="#">公司荣耀</a></dd>
13     <dd><a href="#">招聘英才</a></dd>
14     <dd><a href="#">联系我们</a></dd>
15 </dl>
16 </body>
17 </html>
View Code

center.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8     公司创建于2006年，一直专注于java培训等...公司创建于2006年，一直专注于java培训等...公司创建于2006年，一直专注于java培训等...
 9 
10 </body>
11 </html>
View Code

bottom.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8     <div align="center">
 9         合作伙伴：百度、 腾讯、 微软、甲骨文....<br/>
10         联系方式：020-123456
11     </div>
12 
13 </body>
14 </html>
View Code

 

posted on 2017-01-13 22:11  Dev_Nick  阅读(264)  评论(0)  编辑  收藏  举报