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> 详细图认真看一下,才好往下继续学习啦,,,,

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>
      <!-- 公共的头部logo以及搜索 -->
      <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>&copy;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>
        <!-- 公共的 头部logo以及搜索部分 -->
        <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 内联框架-为你节省重复性代码

赞 (0)
分享到:更多 ()