 |
位置：电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：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 中的新属性。
全局属性<iframe> 标签支持 HTML 的全局属性。 事件属性<iframe> 标签支持 HTML 的事件属性。 简要示例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> 示例：Iframe基础用法下面我们来看下在网页中的效果，示例代码如下： <!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。
示例：HTML框架 iframe的高度、宽度、边框下面我们来看下在网页中的效果，示例代码如下： <!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。
示例：HTML框架 使用iframe显示目标链接页面下面我们来看下在网页中的效果，示例代码如下： <!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。
|
|||||||||||||||||||||||||||||||||||||||||||
| 上一篇： 3.7 HTML 自定义列表 dl 标签 | 下一篇： 3.9 HTML 框架集 frameset标签 | ||||||||||||||||||||||||||||||||||||||||||
