html中如何放置公共部分，header,footer等

以前一直用iframe，但是很不灵活，占的地方是死的，比如header，如果想要有下拉菜单，就实现不了。

今天介绍一个新的方法，jq的load方法

header.html

<div class="header">
	<div class="container">
	  	<a class="navbar-branda" href="index.html">
	      	<img src="../images/navlogo.png"/>
	    </a>
      	<img src="../images/navtoggle.png" class="nav-toggle">
	    <ul class="navlist">
	        <li><a href="index.html">首页</a></li>
	        <li><a href="hardware.html">硬件设备</a></li>
	        <li><a href="appdown.html">APP下载</a></li>
	        <li><a href="case.html">应用案例</a></li>
	        <li><a href="introduce.html">公司介绍</a></li>
	    </ul>
	</div>
</div>

index.html

<div id="head"></div>

公共的js

$("#head").load("header.html");

//如果想要操作header.html中的元素，就得等到header.html加载完成后操作
$("#head").load("header.html", function(){
});