HTML框架怎么用

一个浏览器文档窗口只能显示一个网页文件,但是可以通过使用框架,在同一个浏览器窗口中显示不止一个页面,本文就来介绍一下html框架

一、框架

一个浏览器文档窗口只能显示一个网页文件,但是可以通过使用框架,在同一个浏览器窗口中显示不止一个页面。使用框架的页面主要包含两个部分,一个是框架集,另一个就是具体的框架文件。

框架多用于网站后台或者内网系统的布局。

1.框架集():就是用来定义这一HTML文件为框架模式,并设定视窗如何分割的文件。通俗一点地说,框架集就是存放框架结构的文件,也是访问框架文件的入口文件。如果网页由左右二个框架组成,那么除了左右二个网页文件之外,还有一个总的框架集文件。在使用框架的页面中,

主体标记被框架标记所代替。而对于框架页面中包含的每一个框架,都是通过标记来定义的。

立即学习“前端免费学习笔记(深入)”;

rows属性:水平分割窗口。水平分割窗口是将页面沿水平方向切割,也就是将页面分成上下排列的多个窗口。rows中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。但是要注意的是,一般设定了几个rows的值,就需要有几个框架,也就是需要有相应数量的参数。

          水平分割窗口的效果                       

cols属性:垂直分割窗口。垂直分割窗口就是将页面沿垂直方向分割成多个窗口,也就是将页面分成左右排列的多个窗口。cols中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。与水平分割窗口向同,一般设定了几个cols的值,就需要有几个框架,也就是有几个参数。

          垂直分割窗口的效果                            

frameborder属性:设置边框。在默认情况下,框架窗口的四周有一条边框线,通过frameborder参数可以调整边框线的显示情况。语法为:

或者。 frameborder的取值只能为0或1。如果取值为0,那么边框线将会被隐藏;如果取值为1,边框线将会显示。在frameset中设置将会对整个框架有效,在frame中设置则只对当前这个框架有效。

          设置框架窗口的边框显示效果                        

framespacing属性:框架的边框宽度。框架的边框宽度在默认情况下是1像素,通过参数framespacing可以调整其大小。

语法:

说明:边框宽度就是在页面中各个边框之间的线条宽度,以像素为单位。而这一参数只能对框架集使用,对单个框架无效。

          设置框架的边框宽度                                                              

bordercolor属性:框架的边框颜色。使用参数bordercolor可以设置框架集的边框颜色。

语法:

说明:该参数同样只对整个框架集有效,对于单个框架无效。

          设置框架的边框颜色                                                              

2.框架()和src属性。

框架结构中的各个页面都是一个单独的文字,而这些文件是通过src参数进行设置的。

语法:

说明:页面文件是框架页面的具体内容的所在,对于没有设置源文件的框架,只是空白页面,是没有任何作用的。页面的源文件可以是正常的HTML文件,也可以是一个图片或者其他的文件。

          设置页面源文件                      

3.标签

标签用于浏览器不支持框架时显示页面内容。

                   您的浏览器无法处理框架!     

 二、浮动框架(

浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,也就是整个页面并不是框架页面,但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。浮动框架又叫内联框架(inline frame),并且因此而得名。

语法:  

说明:与普通框架结构类似,浮动框架也可以设置很多参数,如 name、scrolling、frameborder等。 但是与普通框架相比,浮动框架中不包含framespacing和bordercolor参数。

src属性:浮动框架中最基本的参数就是src,它用来设置浮动框架页面的源文件地址,也是浮动框架页面必需的参数。因为只有设置了源文件的内容,浮动框架才有意义。语法:

width和height属性:在普通框架结构中,由于框架就是整个浏览器窗口,因此不需要设置其大小。但是在浮动框架中,是插入到普通HTML页面中的,可以调整整个框架的大小。语法:

   

一些老的浏览器不支持 iframe。

如果得不到支持,iframe 是不可见的。

三、一个框架布局的示例

          框架主页面                                                                                                 该页面不支持frameset标签!                 

 四、链接如何跳出框架

在网站后台布局中,框架用得比较多。在很多时候,我们需要跳出框架,重新加载页面。那么链接如何才能跳出框架呢?其实,只需要指定标签的target属性为”_top”即可实现。下面是一个简单的例子。

          

被锁在框架中了吗?

请点击这里!

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

相关推荐:

对HTML框架标签的作用总结

HTML框架标签的实例应用

HTML框架标签frameset、frame、iframe、noframes

 介绍HTML框架(Frames)到底有什么用?

以上就是HTML框架怎么用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1546220.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:59:43
下一篇 2025年12月21日 17:59:59

相关推荐

  • HTML中鼠标停留时整行变色

    这篇文章主要介绍了html中实现鼠标滑过时整行变色的相关资料,需要的朋友可以参考下 使用纯CSS实现在鼠标经过一个表格的某一行的时候,要整行的背景颜色发生变化,以表明该行正中焦点: change tr.change:hover { background-color:#00FF00 }鼠标经停变色 总…

    好文分享 2025年12月21日
    000
  • HTML中浮动与清除浮动

    本篇文章主要介绍html中浮动与清除浮动,感兴趣的朋友参考下,希望对大家有所帮助。 一、float:主要目的是为了实现文本绕排图片的效果。            也成了创建多栏布局最简单的方式。 @@##@@文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容 【1】文本…

    好文分享 2025年12月21日
    000
  • HTML基础知识

    本篇文章主要介绍html基础知识,感兴趣的朋友参考下,希望对大家有所帮助。 打开DREAMWEAVER,新建HTML。。 body的属性: bgcolor                页面背景色 background            背景壁纸、图片 立即学习“前端免费学习笔记(深入)”; t…

    好文分享 2025年12月21日
    000
  • HTML中的标签的使用详解

    这篇文章主要介绍了html中的标签的使用,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧   在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTML中的标签就是这个功能,将这个页面的关键信息写…

    好文分享 2025年12月21日
    000
  • HTML中如何引入CSS

    在html中引入css的方法主要有四种,它们分别是行内式、内嵌式、链接式和导入式。 1.行内式          行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。2.嵌入式          嵌入式是将CSS样式集中写在网页的 标签对的标签对中。格式如下:…

    好文分享 2025年12月21日
    000
  • 如何在微信小程序中显示html格式内容(图文教程)

    下面这篇文章就主要给大家介绍了微信小程序实现显示html格式内容的方法,需要的朋友可以参考借鉴,下面来一起看看吧。 前言 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内…

    2025年12月21日
    000
  • html查找框功能

    html页面的查找功能主要是实现在查找框内输入字符,下面通过本文给大家分享html页面的查找功能,需要的朋友参考下吧 最近在搞一个被很多人改了的框架,天天看代码看的头的晕了,不过感觉进步还挺大的,自己做了一个后台可配置前台查看两个库不同数据范围的东西,还挺满意,那天拿出来分享一下,今天先说一个这几天…

    2025年12月21日
    000
  • HTML中表单组件

    本文通过实例代码给大家介绍了html 表单组件的知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧 HTML 表单用于搜集不同类型的用户输入。 具体代码如下所示: Insert title here 输入名称: 输入密码: 选择性别: 男 女 选择技术: Java html CSS 选择文件: 一…

    好文分享 2025年12月21日
    000
  • 如何在HTML中使用JavaScript

    本篇文章主要介绍如何在html中使用javascript,感兴趣的朋友参考下,希望对大家有所帮助。 标签   在HTML5中script主要有以下几个属性:async,defer,charset,src,type, async(可选):     关键词:异步脚本,外部文件,立即下载; 立即学习“Ja…

    2025年12月21日
    000
  • HTML中表格动态添加的方法

    总结:以上就是本篇文的全部内容html中表格动态添加的方法,希望能对大家的学习有所帮助。 相关推荐: 具体代码如下所示: Table First Name Last Name 张 三 function add() { var trObj = document.createElement(“tr”);…

    2025年12月21日
    000
  • HTML使用表格写首页

    本篇文章主要介绍如何利用表格写网站首页,简单的使用table标签与其子标签实现图片汉字的插入,在此也可以使用嵌套的方式完成。感兴趣的小伙伴参考下。 代码展示 HTML表格练习之大学首页信息 @@##@@ 网站首页 学校概况 教学单位 机构设置 人才培养 学术研究 招生就业 合作交流 校园生活 @@#…

    好文分享 2025年12月21日
    000
  • HTML如何关闭当前网页

    本片文章主要介绍html如何关闭当前网页以及鼠标特效,希望可以帮到大家。 代码: Document function shut(){ window.opener=null; window.open(”,’_self’); window.close(); } 相关推荐: js实现关闭网页的代码 立即…

    好文分享 2025年12月21日
    000
  • HTML入门基础

    本篇文章主要介绍HTML入门基础,感兴趣的朋友参考下,希望对大家有所帮助。 标记、标签、元素 标签和元素通常是描述同样的意思,但是严格来说,一个html元素包含了开始标签和结束标签。 一个标准的HTML页面 <!–可以插入脚本,样式文件(css)以及各种meta信息页面标题 <!–可…

    2025年12月21日 好文分享
    000
  • 用html创建canvas画布生成图片

    本篇文章主要介绍如何用html创建canvas画布生成图片,感兴趣的朋友参考下,希望对大家有所帮助。 1,在html里新建canvas画布 /**要生成图片的html*/ 思路惊奇 思路惊奇 @@##@@ @@##@@/*生成的canvas和最终生成的图片*/ @@##@@ //设置canva画布大…

    好文分享 2025年12月21日
    000
  • html如何布局

    本篇文章主要介绍html如何布局 ,感兴趣的朋友参考下,希望对大家有所帮助。 p布局 body{margin: 0; padding: 0;}#header{width:100%; height: 90px; background: #b19f9d; }#nav{margin: 0 auto; wi…

    好文分享 2025年12月21日
    000
  • HTML进阶知识

    <p class="markdown_views"&gt;</p&gt;<p&gt;本篇文章主要介绍 </div&gt;<h2&gt;<code&gt;</code&gt;元素&lt…

    好文分享 2025年12月21日
    000
  • html怎样自定义标签

    本篇文章主要介绍html怎样自定义标签,感兴趣的朋友参考下,希望对大家有所帮助。 代码如下: 自定义标签 /* 第三步: 自定义标签在设置样式的时候使用 ” 命名空间名\:标签名 ” */ mine\:tag { font-size: .36rem; font-weight: bold; color…

    好文分享 2025年12月21日
    000
  • html标签中lang的作用

    本篇文章主要介绍html标签中lang的作用,感兴趣的朋友参考下,希望对大家有所帮助。 写在html标签中的lang属性作用:声明当前页面的语言类型。 如: //英文 //中文 //日文 //美式英文 注意:lang属性中的语言代码不区分大小写 //英文 //英文 上面的两行代码一样的效果。 另外,…

    好文分享 2025年12月21日
    000
  • 用html中标签制作表单实例

    本篇文章主要介绍用如何用html标签制作表单实例,属于HTML中必须要掌握的知识点之一。感兴趣的朋友参考下,希望对大家有所帮助。表单标签:form表单标签的主要作用是:在HTML页面中创建一个表单,在用户填写完表单信息后,将数据提交给服务器。需要填写数据的标签必须要放在表单标签体里面。常用的属性: …

    2025年12月21日
    000
  • HTML中的超级链接标签

    无标题文档   超链接标签 a标签常用的属性: href  : 用于指定链接的资源    target: 设置打开新资源的目标。    _Blank 在独立的窗口上打开新资源   _self 在当前窗口打开新资源  file: file协议(文件协议)这种协议主要是用于搜索本地机器的资源文件的。 格…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信