0

0

HTML框架怎么用

墨辰丷

墨辰丷

发布时间:2018-06-04 15:40:33

|

8429人浏览过

|

来源于php中文网

原创

一个浏览器文档窗口只能显示一个网页文件,但是可以通过使用框架,在同一个浏览器窗口中显示不止一个页面,本文就来介绍一下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.标签

HiShop网店代理分销系统
HiShop网店代理分销系统

Hishop.5.2.BETA2版主要更新: [修改] 进一步优化了首页打开速度 [修改] 美化了默认模板 [修改] 优化系统架构,程序标签及SQL查询效率,访问系统页面的速度大大提高 [修改] 采用了HTML模板机制,实现了前台模板可视化编辑,降低模板制作与修改的难度. [修改] 全新更换前后台AJAX技术框架,提升了用户操作体验. 店铺管理 [新增] 整合TQ在线客服 [修改] 后台广告位增加

下载

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

  
 
    
    
    
  
  <body>您的浏览器无法处理框架!</body>
  
  
 

 二、浮动框架(

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

语法:  

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

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

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

 
 

 

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

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

三、一个框架布局的示例

  
  
      框架主页面 
  
 
      
        
            
      
             
         
        
        <!--noframes标记当中可以包含body标记-->
         <body> 
             该页面不支持frameset标签!
         </body>
     
  
 

 四、链接如何跳出框架

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

  
  
  
  
  

被锁在框架中了吗?

请点击这里!

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

相关推荐:

HTML框架标签的作用总结

HTML框架标签的实例应用

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

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

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.6万人学习

CSS教程
CSS教程

共754课时 | 19万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号