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网页显示结果:

         点击链接一:


         点击链接二:


         点击链接二:




相关文章推荐

html--4.框架标签

  • 2017年04月09日 13:29
  • 4KB
  • 下载

HTML5学习_day02(4)--html常用标签分类

标签的分类: 注意:标签可以利用display属性来转换标签格式         标签类型转换         display:nlock;转换成块级标签         dispaly:in...

【HTML】4.框架标签

框架标签: 框架标签不可以放到之间,一般为了代码的可读性,会到和之间。 当框架大小不想被鼠标拖动而改变时,可以在frame标签中加入noresize属性,这个属性没有属性值,称为标记属性,加上就为固...
  • Cleann
  • Cleann
  • 2017年04月14日 16:55
  • 162

HTML4常用标签元素总结及简介

创建一个HTML文档 设置文档标题和其它在网页中不显示的信息 设置文档的标题 最大的标题 预先格式化文本 下划线 黑体字 斜体字 打字机风格的字体 引用,通常是斜体...

HTML入门学习笔记--表格标签(4)

其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义 其实表格是一种数据的展...

web学习—html标签—框架

在看了前边的内容后 ,写一个网页确实已经可以了。但是这里有出现了一个框架的概念。什么是框架呢?我的印象中,他就和一个panel一样,组成的页面大体模型。其实框架是指的浏览器窗口中多个可独立控制的区域。...
  • ni_meri
  • ni_meri
  • 2012年08月17日 16:48
  • 1627

HTML新人基础学习1.4—添加常用的标签

HTML的标签是必不可少的东西,这里,我们将为大家添加head、body、标题、段落、图片、按钮标签~~~...

HTML 学习手册(常用的标签)

HTML标签 1、 声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 PUBLIC"-//W3C//DTD XHTML 1....
  • Lotes
  • Lotes
  • 2013年05月07日 09:47
  • 476

前端学习之路html基础(02)——常用标签

HTML CSS CSS是在html4以后引用用来渲染html元素的。 CSS分为三类,内联样式、内部样式表、外部引用,其中外部引用最佳。 内联样式,当文本中某个标签需要特别的样式时使用内联样式。 内...

前端学习之路html基础(03)——常用标签

HTML 区块、布局在html中可以通过和将各个元素组合起来;它们分别是区块元素和内联元素。1. 区块元素 标签表示的是块级元素,它可以当做容器来组合其他html元素; 区块元素在显示时,会在新行开...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML学习4:常用标签之框架标签
举报原因:
原因补充:

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