HTML引用公共的页眉头部header.html文件和尾部footer.html文件精华部分：
<body>
<div id="page1"></div>
<div id="page2"></div>
<script>
$("#page1").load("page/Page_1.html");
$("#page2").load("page/Page_2.html");
</script>
</body>
————————————————
版权声明：本文为CSDN博主「luckydie」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/luckydie/article/details/83383536
详细说明：
来源：https://blog.csdn.net/qq_35393869/article/details/79803190
文章目录
- 如何实现多个.html静态页，引用同一个header.html和footer.html文件?
- HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?
- 首先，先看一下代码与界面的划分，效果示意图如下：
- 然后，看一下head.html文件，全部代码示下：
- 其次，看一下footer.html文件，全部代码示下：
- 最后，看一下index.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"> （工作日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="#" class="httitle " id="htName"></a></li>
<!--<li class="htli" id="htRegister"><a href="register.html" class="httitle loginout">注册</a></li>-->
<li class="htli" id="htLogin"><a href="#" class="httitle">登录</a></li>
<li class="htli"><a href="" class="httitle">关于我们</a></li>
<li class="htli"><a href="" class="httitle">帮助中心</a></li>
<li style="height: 36px;float: right;text-align: center;"><span class="httitle-top-txt">推荐有惊喜 好礼拿不停</span></li>
</ul>
</div>
</div>
</div>
<div class="jpt-nav">
<input type="hidden" id="top_login" />
<div class="htmargin">
<div class="nav fl">
<a href="" style="overflow:hidden;display:block;"><i class="logo"></i><!--<i class="jpt-logo-right"></i>--></a>
</div>
<div class="nav-wrap fr" style="position:relative">
<ul class="group" id="example-one">
<li class="index"><a href="">首页</a></li>
<li class="product"><a href="">全部商品</a></li>
<li style="float:right;" class="self"><a style="cursor:pointer;" href="">我的账户</a></li>
<li class="mae" id="mae" style="width: 86px; left: 0px;"></li>
</ul>
</div>
</div>
</div>
<!-- 页眉 共通 -->
<script src="js/public_share_code.js"></script>
其次，看一下footer.html文件，全部代码示下：
<!-- S 页脚共通 -->
<div class="btmpage" style="margin-top: 48px;">
<div class="div-btm ">
<div class="pro-tolo">
<div class="div-btm-left">
<a href="" target="_blank" class="btm">关于我们</a>
<a href="" target="_blank" class="btm">全部商品</a>
<a href="" target="_blank" class="btm">帮助中心</a>
<a href="" target="_blank" class="btm">加入我们</a>
<a href="" target="_blank" class="btm">联系我们</a>
<a href="" target="_blank" class="btm">意见反馈</a>
<span class="divpc-contact">中国北京市 联系方式 <br />电话：+86-0551-65522006 邮箱：123456@123.mail<br />地址：中国北京新城区XX写字楼1楼101~106</span>
</div>
<div class="div-btm-center">
<div class="div-btm-reph">
<span class="divpc-contact-top">客服热线1：0123-87654321 <i class="btm-time"> 工作日9:00-17:30</i><br />客服热线2：0123-12345678 <i class="btm-time"> 工作日9:00-17:30</i><br />QQ客服：123456789</span>
<i class="div-right-qq"><a href="" class="divpc-online onlineChat">在线客服</a></i>
<div class="c"></div>
</div>
</div>
<div class="div-btm-right">
<span class="gz"><i class="khd"></i><span class="ph-gzh">微信学习群</span></span>
<span class="gz"><i class="gzh"></i><span class="ph-gzh">官方公众号</span></span>
</div>
<div class="c"></div>
</div>
<div class="div-btm-info">
<div class="div-btm-gg" style="display: none;">
<a target="_blank" class="div-btm-pic"><i class="wangxin"></i></a>
<a target="_blank" class="div-btm-pic"><i class="kx"></i></a>
<a target="_blank" class="div-btm-pic"><i class="gt"></i></a>
<a target="_blank" class="div-btm-pic"><i class="360"></i></a>
<a target="_blank" class="div-btm-pic"><i class="icp"></i></a>
<a target="_blank" class="div-btm-pic"><i class="djcp"></i></a>
<a target="_blank"><img src="images/ebsIcon.png" title="" alt="" width="32" height="45" border="0" style="border-width:0px;border:hidden; border:none;" /></a>
<a class="c"></a>
</div>
<div class="c"></div>
<div class="copyright">
Copyright © 2012-2018 www.123456.com All Rights Reserved | 生态家装公司
<span> | <a style="color:#4e5158;" href="" target="_blank">京ICP备123456789号</a></span>
</div>
</div>
</div>
</div>
最后，看一下index.html文件，全部代码示下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo演示</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->
<!--中部主体-->
<p>···代码省略···</p>
<!--中部主体 over-->
<!--footer-->
<div class="footerpage"></div>
<!--footer over-->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
/*公共部分
* 导航栏
* footer CopyRight
*/
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
});
</script>
</body>
</html>
通过上面的描述，可以发现：
在header.html和footer.html文件中，并非是标准的html文档格式!
与此同时，通过index.html中的jQuery函数 load()将上述的两个公共文件引入进来，从而形成一个完整的页面;
并且，不会影响到其他页面对于公共文件的引用和使用;
这是评论测试
飞歌导航东方红烦得很
这是新的一条评论
未来一年，中国的移动支付市场会是什么样？