位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 3.8 HTML框架 iframe标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 3.7 HTML 自定义列表 dl 标签 下一篇: 3.9 HTML 框架集 frameset标签

所有主流浏览器都支持 <iframe> 标签。

标签定义及使用说明

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档小白教程网中嵌入另一个文档小白教程网

语法
<iframe src="URL"></iframe>

URL指向不同的网页。

提示和注释

提示:您可以把需要的文本放置在 <iframe> </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。

提示:使用 CSS <iframe> (包括滚动条)定义样式。

HTML 4.01 与 HTML5之间的差异

HTML5 新增了一些新的属性,同时去掉了 HTML 4.01 中的一些属性。

HTML 与 XHTML 之间的差异

XHTML 中,name 属性已被废弃,并将被去掉。请使用 id 属性代替。

属性

New 表示HTML5 中的新属性。

属性

描述

align

left
  right
  top
  middle
  bottom

HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐   <iframe>。

frameborder

1
  0

HTML5 不支持。规定是否显示 <iframe>   周围的边框。

height

pixels

规定   <iframe> 的高度。

longdesc

URL

HTML5 不支持。规定一个页面,该页面包含了有关   <iframe> 的较长描述。

marginheight

pixels

HTML5 不支持。规定 <iframe> 的顶部和底部的边距。

marginwidth

pixels

HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。

name

name

规定   <iframe> 的名称。

sandboxNew

""
  allow-forms
  allow-same-origin
  allow-scripts
  allow-top-navigation

对   <iframe> 的内容定义一系列额外的限制。

scrolling

yes
  no
  auto

HTML5 不支持。规定是否在 <iframe> 中显示滚动条。

seamlessNew

seamless

规定   <iframe> 看起来像是父文档小白教程网中的一部分。

src

URL

规定在   <iframe> 中显示的文档小白教程网的 URL。

srcdocNew

HTML_code

规定页面中的 HTML 内容显示在 <iframe> 中。

width

pixels

规定   <iframe> 的宽度。

全局属性

<iframe> 标签支持 HTML 的全局属性。

事件属性

<iframe> 标签支持 HTML 的事件属性。

简要示例

小白教程网www.2d5.net

Iframe - 设置高度与宽度

height width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如:"80%")。代码如下:

<iframe src="a.htm" width="200" height="200"></iframe>
Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框,代码如下:

<iframe src="a.htm" frameborder="0"></iframe>
使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性,如下实例:

<iframe src="a.htm" name="iframe_a"></iframe>
<p><a href="b.html" target="iframe_a">显示在iframe中</a></p>

示例

小白教程网www.2d5.net

:Iframe基础用法

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML框架 iframe标签</title>
</head>
<body>
     <p>黄菊华老师</p>
     <iframe src="frame_a.html"></iframe>
     <iframe src="https://www.baidu.com/"></iframe>
</body>
</html>

效果如图3-15

image.png

示例

小白教程网www.2d5.net

:HTML框架 iframe的高度、宽度、边框

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML框架 iframe标签</title>
</head>
<body>
     <p>黄菊华老师</p>
     <iframe src="frame_a.html" width="500" height="50" frameborder="0"></iframe><br>
     <iframe src="https://www.baidu.com/" width="50%" frameborder="1"></iframe>
</body>
</html>

效果如图3-16

image.png

示例

小白教程网www.2d5.net

:HTML框架 使用iframe显示目标链接页面

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>38-HTML框架 使用iframe显示目标链接页面</title>
</head>
<body>
     <a href="frame_b.html" target="f">链接显示在iframe</a><br>
     <a href="https://www.baidu.com" target="f">baidu.com</a><br>
     <iframe src="frame_a.html" name="f" width="100%" scrolling="auto"></iframe>
</body>
</html>

效果如图3-17和图3-18

image.png


上一篇: 3.7 HTML 自定义列表 dl 标签 下一篇: 3.9 HTML 框架集 frameset标签
毕业设计网             广告联系QQ:45157718(微信同号)