Iframe 内联框架

最新推荐文章于 2022-11-21 14:34:51 发布

脑袋不灵光的小白羊

最新推荐文章于 2022-11-21 14:34:51 发布

阅读量1k

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： html

本文链接：https://blog.csdn.net/qq_42588990/article/details/107566345

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。iframe是属于内联框架，它是body的子级，和body是父子关系。iframe作为一个普通元素放在body里。

属性
①width 可设置内联框架的宽
②height 可设置内联框架的高
③name 设置框架名称
④src 设置页面的路径
⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）
⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）

简单理解来说，iframe 就是用来对整个页面进行布局的框架，我们平时所使用的 div 、table等都是局部的布局方式。所谓行内框架，事实上 iframe 是一个行内块的元素，我们都知道，HTML分为行元素和块元素，行内元素显示在同一行上，块级元素独占一行，块级元素可以设置宽高，行内元素不可以设置宽高，所以说 iframe 即可以显示在同一行上，又可以设置宽高。

Iframe 的应用

这里我引用一个常见的网页布局方式来举例说明

上左右布局格式

上：logo、导航栏
左：菜单栏
右：主体

iframe

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Iframe框架</title>
</head>
<body>
    <iframe src="http://www.baidu.com"  frameborder="1" name="topIframe" width="100%" height="150px"  scrolling="auto" ></iframe>
    <iframe src="other/menu.html" height="480px" name="leftIframe" ></iframe>
    <iframe src="http://www.baidu.com" name="rightIframe" height="480px" width="1570px"></iframe>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左菜单</title>
</head>
<body>
    <ul>
        <li><a href="sxtindex.html"  target="rightIframe">学校介绍</a></li>
        <li>师资力量</li>
        <li>专业方向</li>
    </ul>
</body>
</html>

这里尤其注意：name 和 target属性经常用到，两个属性需结合使用，name是当前位置的名称，target 指定将要显示的内容到什么位置。

脑袋不灵光的小白羊

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Iframe 内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。iframe是属于内联框架，它是body的子级，和body是父子关系。iframe作为一个普通元素放在body里。属性①width 可设置内联框架的宽②height 可设置内联框架的高③name 设置框架名称 ④src 设置页面的路径⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）简单理解来说，iframe 就是用来对整
复制链接

扫一扫

专栏目录