如何在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>