美文网首页前段开发
HTML学习 -- (二)html框架的使用

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

作者: 小虎哥 | 来源:发表于2016-04-10 18:57 被阅读833次

普通框架

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

  • 框架集和框架页
    框架集<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](http:https://img.haomeiwen.com/i687475/e0fec2f4a5cea9f8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- <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](http:https://img.haomeiwen.com/i687475/33483408e0ddb573.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- <noframes>含义
描述:当你的浏览器不支持框架时,显示的提示信息。一般情况下,IE6不支持框架,高版本都支持。
语法:<noframes>对不起,你的电脑太老了,该换新的了!</noframes>

- 框架嵌套
![Snip20160410_4.png](http:https://img.haomeiwen.com/i687475/a97319a99634ba30.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 注意事项
<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](http:https://img.haomeiwen.com/i687475/2d231e82748152dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

相关文章

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

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

  • H5

    H5学习链接 如何使用HTML5 1>自己编写大量的HTML5代码 2>使用现成的HTML5框架 1 nsench...

  • JAVA 之 HTML知识框架

    HTML简介 一. html是什么 二、html基本标签 三、html表单标签(重点) 四、html框架标签及其他

  • 基本办公文书转HTML工具

    使用 https://html-cleaner.com ,得出HTML代码 二、课程目标 透过混合学习及体验式...

  • 5个不常提及的HTML技巧

    Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言,框架在变,但是HTML始终如一。尽管...

  • Html-day001

    此乃学习笔记 一、Html语法基本框架 已上框架为Html的最基本框架, 写程序的时候建议先把框架写下来, 再添加...

  • 前端 基本操作

    HTML 创建网页的基本框架 标签

  • html+java+struts实践笔记

    首次HTML+java后台实践笔记 工具:eclipse目的:使用java后台,套用struts框架,实现HTML...

  • 链式运动与同时运动的简单Demo

    链式运动 一、Html布局 二、Css样式 三、Js部分 同时运动 使用Json修改运动框架

  • angularjs登录注册表单实践

    使用AngularJS实现登录与注册 html和css布局 我们采用html+css框架bootstrap4,里面...

网友评论

    本文标题:HTML学习 -- (二)html框架的使用

    本文链接:https://www.haomeiwen.com/subject/xzgblttx.html