如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）

---

---

如何实现多个.html静态页，引用同一个header.html和footer.html文件？

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

---

HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件？

因保密等诸多因素，线上项目运行效果，暂不推荐大家观看，敬请谅解。
本次实例为临时花了几分钟手写的，下面就来讲一下常用的方法：

当前方法：通过load()函数，引入公共头部和尾部文件;
代码预览：
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");

---

首先，先看一下代码与界面的划分，效果示意图如下：

然后，看一下head.html文件，全部代码示下：

	   <!-- 页眉 共通 --> 
	   <div class="header">
	    <div class="htmargin">
	     <div class="fl">
	      <i class="htphone"></i>
	      <span class="htfont">咨询电话：</span>
	      <i class="telphone">0123-123456</i>
	      <span class="htfont">&nbsp;&nbsp;（工作日9:00-17:30）</span>
	      <span class="headerwx"><a class="htheader htwx"></a>
	       <div class="htwx">
	        <div class="httext">
	         <span>扫码关注官方公众号</span>
	         <i></i>
	        </div>
	       </div></span>
	      <span class="headerwb"><a class="htheader htwb"></a>
	       <div class="htwb">
	        <div class="httext">
	         <span>在线咨询QQ客服</span>
     <div class="htwb-link">
      <a href="" class="htwb-link-font">@在线客服</a>
	         </div>
	        </div>
	       </div><i></i></span>
	     </div>
	     <div class="fr item-list">
	      <ul class="htul">
	       <li class="htli" id="loginOut" style="display:none"><a onclick="javascript:doLogout();" class="httitle">退出</a></li>
	       <!--用户名-->
	       <li class="htli" id="htName-li" style="display:none"><a href="#