HTML学习4:常用标签之框架标签

转载 2015年11月18日 15:16:57

  HTML标记语言中通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。

       一,框架概述

       通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架

独立于其他的框架。

       使用框架的坏处:

       (1)开发人员必须同时跟踪更多的HTML文档

       (2)很难打印整张页面

       二,框架结构标签(<frameset>)

       (1)框架结构标签<frameset>定义如何将窗口分割为框架

       (2)每个<frameset>定义了一系列行或列

       (3)rows/cols属性的值规定了每行或每列占据屏幕的面积

  1. <span style="font-size:18px;"><!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=gb2312" />  
  5. <title>HTML框架标签演示</title>  
  6. </head>  
  7.        <!-- 
  8.        定义框架,使用标签frameset 
  9.        -->  
  10.        <!--frameset标签的rows属性将网页分为上下两部分-->  
  11.        <frameset rows="30%,*">  
  12.             <frame src="top.html" name="top" noresize="noresize"/>  
  13.        <!--frameset标签的cols属性将网页分为左右两部分-->  
  14.             <frameset cols="30%,*">  
  15.                 <frame src="left.html" name="left" noresize="noresize"/>  
  16.                 <frame src="right.html" name="right" noresize="noresize" />  
  17.             </frameset>  
  18.        </frameset><noframes></noframes>  
  19.   
  20. <body>  
  21. </body>  
  22. </html></span>  

        浏览器显示的结果为:


       三,框架标签(Frame)
       <Frame>标签定义了放置在每个框架中的 HTML 文档。在上面的代码中有出现过!

       五,内联框架<iframe>

        (1)<iframe>标签用于在网页内显示网页。添加<iframe>标签的语法:

        <iframe src="URL"></iframe>

        URL 指向隔离页面的位置。

        (2)<Iframe>标签设置高度和宽度

        height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素,但也可以用百分比来设定(比如

 "80%")。
        (3)<Iframe>标签删除边框

        frameborder 属性规定是否显示 iframe 周围的边框,设置属性值为 "0" 就可以移除边框。

        (4)某些老式的浏览器不支持内联框架。如果不支持,则<iframe>标签内的内容是不可见的

        (5)使用<iframe>作为链接的目标

        <iframe>可用作链接的目标(target)。链接的target属性必须引用<iframe>的name属性。

  1. <span style="font-size:18px;"><!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=gb2312" />  
  5. <title>内联框架标签演示</title>  
  6. </head>  
  7.   
  8. <body>  
  9.        <div align="center">  
  10.        <iframe src="14-130R1115208.jpg" height="300" width="280" name="iframe_a">  
  11.        这是画中画标签,你如果看到了该文字,很遗憾,你的浏览器不支持该标签  
  12.        </iframe><p><a href="http://www.sina.com" target="iframe_a">新浪网站</a></p>  
  13.        </div>  
  14. </body>  
  15. </html></span>  

        浏览器显示的结果为:


        点击新浪网站后的结果为:


        六,基本的注意事项

        (1)假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在<frame>标签

中加入:noresize="noresize"。

        (2)为不支持框架的浏览器添加 <noframes> 标签。

        (3)不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的

 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。

        演示框架的例子:

        七示例

        1在上面的网页框架中已经有了第一个网页的代码。

        2框架的顶层显示的Logo网页页面的代码:

  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=gb2312" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9.       <h1>这是我的网站Logo。这里可以放置图片,也可以自己规划</h1>  
  10. </body>  
  11. </html>  

        3下半部分左半部分显示的网页代码:

  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=gb2312" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9.       <h3>左边栏链接</h3>  
  10.       <a href="表格标签.html" target="right">链接一</a>  
  11.       <a href="超链接标签.html" target="right">链接二</a>  
  12.       <a href="画中画标签.html" target="right">链接三</a>  
  13. </body>  
  14. </html>  
         4下半部分左半部分显示的网页代码:

  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=gb2312" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9.        <h2>内容显示区域</h2>  
  10. </body>  
  11. </html>  
         5表格标签网页,超链接标签网页以及内联框架标签网页的代码都在前面已经写过,就不再一一赘述了。

         6网页显示结果:

         点击链接一:


         点击链接二:


         点击链接二:




WEB前端-HTML-常用标签

各种符号要想在页面上显示各种符号,需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落,默认段落上下会有行间距; br 是换行,自闭和标签; h...
  • qq_34409701
  • qq_34409701
  • 2016年08月12日 01:05
  • 4750

HTML学习8:常用标签之框架标签

HTML标记语言中通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。        一,框架概述        通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一...
  • erlian1992
  • erlian1992
  • 2015年10月26日 21:14
  • 1131

HTML学习4:常用标签之列表标签

HTML 列表标签支持有序、无序和定义列表。        列表标签表格:         一无序列表         无序列表是一个项目的列表。无序列表项开始于 标签,结束于标签...
  • erlian1992
  • erlian1992
  • 2015年10月19日 20:04
  • 1912

对HTML5中一些不常见的标签整理

标签表示一个缩写形式。比如 “Inc.”、”etc.”。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 HTML 5 不支持 。请使用 代替...
  • u014291497
  • u014291497
  • 2016年08月06日 16:23
  • 689

HTML常用标签属性(一)

HTML 常用头标签属性 :定义选用的解释语言 :整个页面的内容,只能有一个 :头部标签,在标签内,只能有一个 :显示在浏览器上部信息,不显示在浏览器正文中 name="keywor...
  • liucsl
  • liucsl
  • 2016年12月14日 22:43
  • 42

html5常用标签汇集

文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。所谓超级链...
  • wuliowen
  • wuliowen
  • 2016年07月18日 09:50
  • 2143

HTML常用标签大全(前篇)

1. 2.
  • William0318
  • William0318
  • 2016年12月15日 10:02
  • 542

最常用的HTML标签 总结整理

body:在网页上要展示出来的页面内容一定要放在body标签中 p:如果想在网页上显示文章,这时就需要p标签了,把文章的段落放到p标签中。标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用...
  • fang323619
  • fang323619
  • 2016年07月14日 08:41
  • 2381

HTML常用标签(4)————锚点标签

练习时可使用如下代码: 建立锚点标签 第一篇 第二篇 第三篇 aaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa...
  • u012745215
  • u012745215
  • 2014年07月06日 06:22
  • 986

02. mybatis 常用标签

mybatis 常用标签有 insert, delete, update, select, sql, include ,resultMap 等标签。...
  • zgf19930504
  • zgf19930504
  • 2016年02月08日 11:59
  • 579
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML学习4:常用标签之框架标签
举报原因:
原因补充:

(最多只允许输入30个字)