iframe 内联框架-为你节省重复性代码-创之梦博客

相信做过多个页面的网页/网站，应该深有体会，当你做好一个首页后，其余的大部分子页面的头部（logo,导航栏）和尾部（版权信息）等信息，基本上大同小异，都是和首页一致的，那么十几个页面每次都需要写一遍大量的重复性的代码吗？使用<iframe> 标签后，其实完全没有必要这样做的啦，，，

注：下面以H5元素制作为例，使用常用的：div方法制作也是一样的。

一，<iframe> 作用及属性介绍

1.使用<iframe> 标签可以简化大量的重复性的代码， <iframe> 标签规定了一个内联框架。一个内联框架被用来在当前 HTML 文件中嵌入另一个html文件。目前，所有的主流浏览器都支持<iframe>标签。

同时，在不支持 <iframe>的浏览器的时候，把提示的文字放到 <iframe> 提示的文字 </iframe>里面，这样就会出现提示的文字。

2.iframe 的常用属性：
width：规定 <iframe> 的宽度。

height ：规定 <iframe> 的高度。

src ：规定在 <iframe> 中显示的文档的 URL。
frameborder ：规定是否显示 <iframe> 边框。[0无边框，1有边框]。
scrolling ：规定是否在 <iframe> 中显示滚动条。 [yes,no,auto]。

align ：规定如何根据周围的元素来对齐 <iframe>。[ left, right, top, middle, bottom ]。
注：如果宽度设置100%，align属性可忽略，红色字体为必须属性。

二，那么具体如何使用 iframe 呢？

首先大家先把博主制作的 <iframe> 详细图认真看一下，才好往下继续学习啦，，，，

*首先准备好需要公共引用的 header.html 和 footer.html

1.公共的头部header.html文件部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<header>
<img src="images/logo.png" width="20%" height="65">
<article>
<img src="images/photo3.jpg" alt="">
<input type="text" placeholder="输入关键字"><button value="搜索"> </button>
</article>
</header>

</body>
</html>

2.公共的尾部footer.html文件部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href=" css/index.css">
</head>
<body>

<footer>
<p>©2019版权所有创之梦博客域名：www.52czm.cn</p>
</footer>

</body>
</html>

3.index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<iframe src="header.html" width="100%" height="80" scrolling="no" frameborder=0>
浏览器不支持iframe
</iframe>
<section>

</section>

<iframe src="footer.html" width="100%" height="80" scrolling="no" frameborder=0>
浏览器不支持iframe
</iframe>
</body>
</html>

以后再做网站导航栏子页的时候，就不需要重复写很多一样的代码结构了，只需要把链接好的<iframe> 标签的html文件放在指定的位置上即可。你get到了，，，，，，，，，

未经允许不得转载：创之梦博客 » iframe 内联框架-为你节省重复性代码

一，<iframe> 作用及属性介绍

二，那么具体如何使用 iframe 呢？

1.公共的头部header.html文件部分

2.公共的尾部footer.html文件部分

3.index.html

相关推荐