目录
1.iframe
标签规定一个内联框架
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。将窗口内容显示为URL地址指向页面。
Iframe - 设置高度与宽度
height
和width
属性用来定义iframe
标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%").
Iframe - 移除边框
frameborder
属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe
的边框:
使用iframe来显示目录链接页面
iframe
可以显示一个目标链接的页面
目标链接的属性必须使用iframe
的属性,如下实例:
HTML iframe 标签
标签 | 说明 |
---|---|
<iframe> | 定义一个内联的iframe |
iframe 标准属性
属性 | 说明 |
---|---|
class | 规定元素的类名(classname) |
id | 规定元素的唯一 id |
style | 规定元素的行内样式(inline style) |
title | 规定元素的额外信息(可在工具提示中显示) |
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com" target="ifm">百度</a></li>
<li><a href="http://www.taobao.com" target="ifm">淘宝</a></li>
<li><a href="http://www.jd.com" target="ifm">京东</a></li>
</ul>
<!--框架学习 width:宽度 height:高度 src:默认路径 -->
<iframe width="1000px" height="550px" name="ifm" src="http://www.baidu.com"></iframe>
</body>
</html>
效果:
2.HTML <frameset>标签 - HTML5 不支持
<frameset>
标签在一个页面中设置一个或多个框架,用<frameset>
</frameset>
代替了<body>
</body>
,不能出现在body
标签里。
<frameset>语法:
<html>
<head></head>
<frameset>
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
frameset
- 建立框架的标记,将在其中定义各个框架。
frame src
- 指示框架显示内容URL地址。
<frameset> - 设置行列比例
<frameset>
标签中我们使用rows
设置行的占页面的百分比;cols
设置列的所占百分比。
<html>
<head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>
frameset cols
- 确定每个框架列所占百分比。在前面的示例中,我们已经确定第一框架将占据所示区域的30%,并且我们使用“*”符号来指示剩余百分比。
frameset rows
- 确定将显示的每个框架行所占百分比。在前面的示例中,我们选择第一框架为20%,剩下的剩余空间将在menu.html和content.html之间划分。
<frameset> - 设置边框
框架有一些边框线,大多数时候都不需要。<frameset>
标签中我们使用frameborder
和framespacing
属性可以擦除它们。
注意:
frameset
和frameborder
是相同的属性。
<html>
<head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</html>
frameborder
-设置边框, 0值表示没有边框
border
- 修改边框的粗细(由Netscape浏览器使用)
framespacing
- 修改边框的粗细(由Internet Explorer浏览器使用)
<frameset> - 设置名字
<frameset>
标签中我们使用name
属性命名每个框架,而不是内容页面。
<html>
<head></head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</frameset>
</html>
<frameset> - 设置滚动
<frameset>
标签中我们使用noresize
设置禁止用户拖拉框架大小;scrolling
用于设置滚动条是否显示。
<html>
<head></head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</frameset>
</html>
noresize
- 不允许用户更改其尺寸。
scrolling
- 设置滚动条是否显示。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="150px,*,100px">
<!--顶部部分-->
<frame src="admin/top.html" noresize="noresize"/>
<!--中间的部分-->
<frameset cols="10%,*">
<!--左侧部分-->
<frame src="admin/left.html"/>
<!--右侧部分-->
<frame src="admin/right.html" name="rig"/>
</frameset>
<!--底部部分-->
<frame src="admin/bottom.html"/>
</frameset>
<!--<body>
</body>-->
</html>
效果: