HTML引用公共页面（header.html和footer.html）

最新推荐文章于 2022-10-21 10:54:55 发布

-森木-

最新推荐文章于 2022-10-21 10:54:55 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb 前端文章标签： html jquery

本文链接：https://blog.csdn.net/senmu_/article/details/109452730

前端同时被 2 个专栏收录

69 篇文章

订阅专栏

JavaWeb

66 篇文章

订阅专栏

在项目开发中，为了提高效率和便于维护，通常会将HTML页面中的公共部分如header和footer提取到单独的文件中，然后在需要的地方进行引用。这样在修改公共组件时，所有引用该组件的页面都会自动更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML引用公共页面（header.html和footer.html）

我们做项目时，会发现许多页面有相同的部分，重复写会花费大量不必要的时间，复制的话修改不方便。只要我们把公共部分提取出来，单独写，在需要用的时候引入就可以。

<body>
<div class="headerpage"></div>
<div>...中间部分...</div>
<div class="footerpage"></div>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function(){
        $(".headerpage").load("header.html");
        $(".footerpage").load("footer.html");
    });
</script>
</body>