一、问题描述
目前在做公司的一个网站，静态页面有很多，顶部导航和底部导航都是相同的，在每个页面中写头部和底部是可以的，但是修改

起来特别费时费力，后期很难维护。那么如何实现多个.html静态页，引用同一个header.html和footer.html文件呢？

前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件（footer：CopyRight、友情链接等部分）

HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件？下面就来记录一下常用的方法：

二、解决方案
当前方法：通过load()函数，引入公共头部和尾部文件;

代码预览：

<div id="head"></div>
<script type="text/javascript">
   $('#head').load('components/head.html');
   $('#footer').load('components/footer.html');
</script>
三、示例代码
header.html顶部导航部分的静态页面，全部代码示下：

<div class="head">
   <img src="img/logo.png" class="logo" alt=""/>
   <div class="wrapper">
       <nav><img src="img/logo.png" class="logos" alt=""/>
           <div id="drop">
               <div>
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
       </nav>
       <ul>
           <li><a href="index.html">首页</a></li>
           <li><a href="service_case.html">服务案例</a></li>
           <li><a href="product_center.html">产品中心</a></li>
           <li><a href="media_center.html">媒体中心</a></li>
           <li><a href="operating_center.html">运营中心</a></li>
           <li><a href="service_and_support.html">服务与支持</a></li>
           <li><a href="about_us.html">关于我们</a></li>
       </ul>
   </div>
</div>
<script type="text/javascript">
   $('#drop, nav ~ ul li').click(function() {
     $('nav, #drop span').toggleClass('open');
     $(window).scrollTop(0);
   });
   $('#drop>div').click(function(){
       $('.logos').toggleClass('blo')
   })
</script>
其次，看一下footer.html文件，全部代码示下：

<footer class="footer">
   <p class="return">回到顶部<span class="glyphicon glyphicon-menu-up"></span></p>
   <ul id="accordion" class="accordion">
       <li>
           <div class="link">服务案例<i class="glyphicon glyphicon-menu-right"></i></div>
       </li>
       <li>
           <div class="link">产品中心<i class="glyphicon glyphicon-menu-right"></i></div>
       </li>
       <li>
           <div class="link">媒体中心<i class="glyphicon glyphicon-menu-right"></i></div>
       </li>
       <li>
           <div class="link"><a href="operating_center.html" style="color: #a5a5a5;">运营中心</a></div>
       </li>
       <li>
           <div class="link">服务与支持<i class="glyphicon glyphicon-menu-right"></i></div>
       </li>
       <li>
           <div class="link"><a href="about_us.html" style="color: #a5a5a5;">关于我们</a></div>
       </li>
   </ul>
   <div class="footer_qrcode">
       <img src="img/weixin_qrcode.png" alt="" />
       <p>
           <a>关注公众号</a>
           <a>了解更多资讯</a>
       </p>
       <hr />
       <span>© 2012-2020 版权所有</span>
       <span>****科技有限公司<a style="color: #ffffff" href="http://www.beian.miit.gov.cn" target="_blank">  沪ICP备16004537号-1</a></span>
   </div>
</footer>
<script type="text/javascript">
   $(function() {
       var Accordion = function(el, multiple) {
           this.el = el || {};
           this.multiple = multiple || false;
           var links = this.el.find('.link');
           links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
       }
       Accordion.prototype.dropdown = function(e) {
           var $el = e.data.el;
               $this = $(this),
               $next = $this.next();
           $next.slideToggle();
           $this.parent().toggleClass('open');
           if (!e.data.multiple) {
               $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
           };
       }    
       var accordion = new Accordion($('#accordion'), false);
   });
   //滑动高度监测
   var scrollTop;
   var timer = null;
   //监测当前屏幕高度
   window.onscroll = function() {
       scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
       return scrollTop;
   }
   //点击返回顶部
   $('.return').click(function(){
       clearInterval(timer);
       timer = setInterval(function() {
           var now = scrollTop;
           var speed = (0 - now) / 10;
           speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
           if(scrollTop == 0) {
               clearInterval(timer);
           }
           document.documentElement.scrollTop = scrollTop + speed;
           document.body.scrollTop = scrollTop + speed;
       }, 35)
   })
</script>

最后，看一下index.html文件，全部代码示下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <title>首页</title>
   <link rel="stylesheet" type="text/css" href="css/common.css"/>
   <link rel="stylesheet" type="text/css" href="css/join_investment_details.css"/>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
   <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--通用顶部导航-->
<div id="head"></div>
<script type="text/javascript">
   $('#head').load('components/head.html')
</script>
<!--通用顶部导航 结束-->

<!--热点资讯列表-->
<section class="join_investment_details">
   <div class="details-img">
       <img src="img/join_investment_info/18.png" alt="">
   </div>
   <div class="details-content container_content">
       <h5>开业支持</h5>
       <p>选择、设计、驻店指导</p>
       <ul>
           <li>选址支持：公司协助在当地高端建材城优先选择最优店面</li>
           <li>设计支持：店面智能化方案免费设计，制作最佳的客户体验动线。</li>
           <li>驻店指导：店面管理标准化打造，运营部门统一输出指导</li>
           <li></li>
       </ul>
   </div>
</section>
<!--热点资讯列表 结束-->

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--通用底部导航-->
<div id="footer"></div>
<script type="text/javascript">
   $('#footer').load('components/footer.html')
</script>
<!--通用底部导航 结束-->
</body>
</html>