如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
2021-03-06 06:28
标签：demo 其他 ack copyright over 导航栏 不用 copy 头部 直接上代码： 公共头部文件：header.html 公共尾部文件：footer.html js文件： html全部文件： 通过上面的描述，可以发现： 如何让html引用公共布局（多个html文件公用一个header.html和footer.html） 标签：demo 其他 ack copyright over 导航栏 不用 copy 头部 原文地址：https://www.cnblogs.com/shine1234/p/12899579.html如何实现多个.html静态页，引用同一个header.html和footer.html文件？
//不用写标准的html文档格式
div>
头部内容
div>
//不用写标准的html文档格式
div>
页脚内容
div>
当前方法：通过load()函数，引入公共头部和尾部文件;
代码预览：
$(".headerpage").load("header.html");
$(".footerpage").load("footer.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>
p>···代码省略···p>
div class="footerpage">div>
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文件，使用公共头部和尾部的解决办法之一。
上一篇：网站部署使用CDN网络缓存
下一篇：全文搜索Lucene之倒排索引
文章标题：如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
文章链接：http://soscw.com/essay/60739.html