HTML学习 -- (二)html框架的使用

普通框架

  • 概念
    框架技术:将一个浏览器窗口划分成若干个小窗口,每个小窗口显示一个独立的网页。

  • 框架集和框架页
    框架集<frameset>:主要用来划分窗口的。
    框架页<frame>:主要用来指定窗口默认显示的网页地址。

框架与窗户很像。
一个窗户由窗格(框架集)和玻璃(框架页)构成。
先规划窗格,然后再确定每个窗格中放的玻璃。(先有结构,后有内容)

框架网页的DTD必须是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Snip20160410_2.png
  • <frameset>属性
cols:划分左右型框架。
cols = “200,*”  //左框架的宽度为200px,剩下的都是右框架的
cols = “180,*,180”  //左框架和右框架的宽分别为180px,剩下都是中间框架
cols = “20%,*”  //划分框架时,可以用百分比来表示
rows:划分上下型框架
rows = “200,*”  //上框架的高度为200px,剩下都是下框架的
rows = “180,*,180”  //上框架和下框架高分别为180px,剩下都是中间框架
注意:cols属性和rows属性,每个框架只能用其中一个,不能两个同时用。
frameborder:是否显示框架的边框线,取值:1或0,yes或no。
border:边框线的粗细。
bordercolor:边框颜色。
  • <frame>框架页的属性
src:该小窗口中,默认显示的网页地址。
noresize:不能调整小窗口的大小。如:noresize = “noresize”
scrolling:是否显示滚动条,取值:auto、yes、no
name:给当前小窗口起个名字。这个name就是给<a>标记target属性来用的。
Paste_Image.png
  • <noframes>含义
    描述:当你的浏览器不支持框架时,显示的提示信息。一般情况下,IE6不支持框架,高版本都支持。
    语法:<noframes>对不起,你的电脑太老了,该换新的了!</noframes>

  • 框架嵌套


    Snip20160410_4.png
  • 注意事项
    <frameset>框架,可以称为“普通框架”。
    在“普通框架”中,框架的制作分两个部分:(1)框架结构的规划 (2)制作具体的页面
    在“普通框架”的结构划分中,不能出现<body>标记,因为没有实际的内容。

内嵌框架(行内框架,浮动框架)

  • 描述:内嵌框架,是在现有的网页中显示里面内容,与普通框架的区别:<iframe>是<body>的子标记,因此,它应该放在<body>里面。
  • 语法格式:<iframe 属性 = “值”>对不起,你的浏览器版本太低!</iframe>
  • 常用属性
src:引入的文件地址。
width:框架的宽度
height:框架的高度
frameborder:是否显示框架的边框线,取值:yes或no。
scrolling:是否显示滚动条,取值:auto、yes、no
name:指定当前小窗口的名称,该名称也是给<a>标记的target属性来用。
align:框架在网页中的对齐方式,取值:left、center、right
  • 其中取值left或right可以实现图文混排的效果,与<img>的对齐方式一样。
  • 注意src引入的文件只能是html文件或php文件,不能是其它文件。
Snip20160410_6.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,089评论 0 1
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,131评论 0 16
  • 1、开发网站的流程 与客户沟通,包括:风格的、功能(论坛、留言板、支付、用户登入等) 与美工沟通,制作网页效果图(...
    钩不了沉阅读 757评论 0 0
  • 阿树放不下手机。 可是其实她特别特别地想立刻马上当机立断地把其实并不是那么好玩的手机游戏关掉,然后弹起来撸撸袖子去...
    乐睡momo阅读 272评论 0 0
  • 故格物者,格其身之物,格其意之物,格其心之物。正心者,正其物之心也,诚意者,诚其物之意也,致知者,致其物之知也,无...
    虚谷1阅读 1,076评论 0 0