【前端技巧】html页面引入公共的头部和底部

我们在做项目的时候经常会遇到一样的头部和底部，如果每个页面都复制一遍，不仅工作量大而且万一需要修改一下文章就更麻烦了，这时候就需要我们把公共部分提取出来，等需要的时候再引入页面。在网上找了好久，也尝试了几次，觉得对前端来说最好的方法就是使用jQuery的load函数，

/*导入头部和尾部*/ $(document).ready(function(){ $(".footer").load("page/footer.html"); });

但是注意，此时的footer.html不需要是完整的HTML（当时本人自己可是遇到了这个大坑，都是泪/(ㄒoㄒ)/~~），这包含标签内容即可。

<!--footer.html页面--> <footer> <ul class="g-flex"> <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li> <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li> <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li> <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li> </ul> </footer>