HTML学习13－iframe内联框架

最新推荐文章于 2025-06-22 11:38:11 发布

Leemin_ios

最新推荐文章于 2025-06-22 11:38:11 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 基础教程学习笔记

本文链接：https://blog.youkuaiyun.com/Leemin_ios/article/details/52103580

HTML5 基础教程学习笔记专栏收录该内容

15 篇文章

订阅专栏

HTML 内联框架（inner frame）

iframe内联框架用于在网页内显示网页。

添加 iframe 的语法

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

URL指向隔离页面的位置。

Iframe －设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如“80%”）

实例：

<body>
<iframe src="test02.html" width="200" height="100"></iframe>
<p>某些老式的浏览器不支持内联框架</p>
<p>如果不支持，则 iframe是不可见的</p>
</body>

在浏览器中显示的效果：

<iframe> 标签的 scrolling 属性

定义和用法

scrolling 属性规定了是否在iframe 中显示滚动条。

默认地，如果内容超出了ifrme，滚动条就会出现。

实例：scrolling属性设置为YES。

<body>
<iframe src="test02.html" width="200" height="100" marginheight="50px" scrolling="yes"></iframe>
<p>某些老式的浏览器不支持内联框架</p>
<p>如果不支持，则 iframe是不可见的</p>
</body>

scrolling属性设置为no。

<body>
<iframe src="test02.html" width="200" height="100" marginheight="50px" scrolling="no"></iframe>
<p>某些老式的浏览器不支持内联框架</p>
<p>如果不支持，则 iframe是不可见的</p>
</body>

实例：在当前引用页打开新的链接；

<body>
<iframe src="test02.html" width="200" height="100" name="iframe_test"></iframe>
<br />
<a href="http://blog.youkuaiyun.com/leemin_ios/article/details/51544513" target="iframe_test">技术博客链接</a>
<p>如果不支持，则 iframe是不可见的</p>
</body>