如何在HTML不同的页面中,共用头部与尾部?

方法1：embed属性要设置宽高

<embed type="text/html" src="header.html" />

 

方法2：使用jQuery的load函数

注意：此时的footer.html不需要是完整的HTML，这包含标签内容即可

/*导入头部和尾部*/ 

$(document).ready(function(){

  $(".footer").load("footer.html"); 

}

<!--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>