如何实现多个.html静态页，引用同一个header.html和footer.html文件？
直接上代码：
公共头部文件：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="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文件，使用公共头部和尾部的解决办法之一。