通过jq的load方法引入
<body>
<div id="div"></div>
<script>
$("#div").load("index.html");
</script>
</body>
原生js的object标签引入
<body>
<div id="div"></div>
<script>
document.getElementById("div").innerHTML = '<object type="text/html" data="index.html" width="100%" height="100%"></object>';
</script>
</body>
iframe引入
<body>
<div id="div">
<iframe align="center" width="100%" height="200" src="index.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
</body>
import引入(head中引入文件，script中加载内容)
href链接引入的html文件，id可以看做页面引导，在script中用到
注意：需要在服务器环境下，否则会报跨域错误
<head>
<meta charset="utf-8" />
<title>主页面</title>
<!--import引入-->
<link rel="import" href="top.html" id="page1"/>
<link rel="import" href="fotter.html" id="page2"/>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script type="text/javascript">
document.getElementById("div1").innerHTML = page1.import.body.innerHTML;
document.getElementById("div2").innerHTML = page2.import.body.innerHTML;
</script>