51工具盒子今天在扒一个站，然后发现里面有很多东西，如果一个一个改就太麻烦了，然后找了找方法。
通过index.html中的jQuery函数load()来实现！
首先准备好.html文件、header.html和footer.html文件。
还有需要调用的JQ文件，这里清酒准备好了，可以直接调用！
javascript
<script src="https://www.iqjty.com/js/jquery.min.js"></script>
直接上代码：
需要作为公共头部文件：header.html
//不用写标准的html文档格式
<div>
头部文件内容
</div>
需要作为公共尾部文件：footer.html
//不用写标准的html文档格式
<div>
页脚内容
</div>
js文件：
当前方法：通过load()函数，引入公共头部和尾部文件;
代码预览：
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
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="https://www.iqjty.com/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()将上述的两个公共文件引入进来，从而形成一个完整的页面；
并且，不会影响到其他页面对于公共文件的引用和使用；
以上就是关于静态html文件，使用公共头部和尾部的解决办法之一。（内部分名称需要自己根据自己的CSS属性修改）
