如何让html引用公共布局（多个html文件公用一个header.html和footer.html）

Posted 2021-02-19 Running°つ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让html引用公共布局（多个html文件公用一个header.html和footer.html）相关的知识，希望对你有一定的参考价值。

如何实现多个.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文件，使用公共头部和尾部的解决办法之一。

以上是关于如何让html引用公共布局（多个html文件公用一个header.html和footer.html）的主要内容，如果未能解决你的问题，请参考以下文章