iframe是什么？html中iframe标签的用法详解

经常进行页面布局的人对于HTML中的iframe标签一定不陌生，iframe标签是一个内联框架，说白了就是用来在当前 HTML 页面中嵌入另一个文档的。刚刚接触前端的小伙伴可能不知道html中iframe标签的用法，这篇文章就结合实例给大家讲解html中iframe标签的使用用法，有一定的参考价值，感兴趣的朋友可以看看。

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

基本语法：<iframe src="文件路径"></iframe>

<iframe> 标签常用属性介绍:

height可以设置框架显示的高度

width可以设置框架显示的宽度

name可以定义框架的名称

frameborder用来定义是否需要显示边框，取值为1表示需要边框

scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto

src用于设置框架的地址，可以使页面地址，也可以是图片地址

align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom

以上属性可以根据需要进行设置。

实例讲解：html中<iframe>标签的使用方法

首先新建两个HTML页面，一个命名为iframe-content.html，另一个命名为iframe.html，在iframe-content.html中添加内容，代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<p>蒹葭苍苍，白露为霜。所谓伊人，在水一方。</p>

<p>溯洄从之，道阻且长。溯游从之，宛在水中央。</p>

<p>蒹葭萋萋，白露未晞。所谓伊人，在水之湄。</p>

<p>溯洄从之，道阻且跻。溯游从之，宛在水中坻。</p>

</body>

</html>

然后用<iframe>标签将iframe-content.html文件嵌入到iframe.html中，可以根据自己的需要设置样式，此例将frameborder设为0，不需要边框，将scrolling设为no，不需要滚动条，具体代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<iframe src="iframe-content.html" width="400px" height="150px" frameborder="0"

scrolling="no"></iframe>

</body>

</html>

有边框和滚动条的效果图：

没有边框和滚动条的效果图：

当页面中有大部分内容相同时，比如页面的头部和底部，我们就可以使用<iframe>标签将重复的部分嵌入页面中，这样可以减少代码的重复率，减轻代码量，但不足之处是页面url地址没有改变。

以上结合实例给大家介绍了html中<iframe>标签的使用方法，小白一定要自己动手尝试，看看你的代码能不能实现这样的效果，希望这篇文章对你有所帮助！

iframe是什么？html中iframe标签的用法详解相关推荐

php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下定义和用法标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异在 HTML ...
html中iframe标签的用法详解
<iframe>是什么?html中iframe标签的用法详解 原创  2018-10-26 10:24:35 03690 经常进行页面布局的人对于HTML中的iframe标签一定不 ...
resultmap的写法_mybatis的mapper.xml中resultMap标签的使用详解
1.前言最近博主在做一个ssm框架的共享汽车管理系统,其中,数据库字段设计的有下划线方式,a_username,然后在写mapper.xml里面的sql语句的时候,一直出现查询语句查询的值为null ...
html中使用volist要引入什么,thinkphp中volist标签使用案例详解
这次给大家带来thinkphp中volist标签使用案例详解,thinkphp中volist标签使用的注意事项有哪些,下面就是实战案例,一起来看一下. 属性: name(必须):要输出的数据模板变量 ...
php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
el表达式ne什么意思_JSP中EL表达式的用法详解(必看篇)
EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${ ...
php fieldset,html fieldset标签的用法详解
标签将表单内容的一部分打包,生成一组相关表单的字段.从中提取两层意思: 1.fieldset存在于form里(这样说不准确): 2.分组打包的功能. field:[fiːld]领域:牧场:旷野:战场: ...
CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
escape mysql_MySQL中ESCAPE关键字的用法详解
MySQL转义转义即表示转义字符原来的语义,一个转义字符的目的是开始一个字符序列,使得转义字符开头的该字符序列具有不同于该字符序列单独出现时的语义. MySQL中,转义字符以"" ...
csh for循环_shell中的for循环用法详解_linux shell
这篇文章主要介绍了shell中的for循环用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 for 命令: for i i ...

iframe是什么？html中iframe标签的用法详解

iframe是什么？html中iframe标签的用法详解相关推荐

最新文章

热门文章