如果有些浏览器本地实现不了，那么放到服务器上面！（重要！！！）
注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
1.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>
<!--注意顺序--> <!--import在头部引入，里面是啥就是啥--> <script type="text/javascript"> document.write(page1.import.body.innerHTML); </script> hello world！<!--本页面写入内容--> <script type="text/javascript"> document.write(page2.import.body.innerHTML); </script>
2.通过JQuery的load()方法加载页面
相当于把引入的html中head和body标签中的数据拖出来，在外面包了一个你自己写的标签，比如说上面代码中的<div class="top"></div>
<!--注意顺序--> <!--使用js引入，引入整个文档，但是没有html和body，相当于body里面的数据--> <div class="top">top</div> <div class="center"> <p>你好，我在中间！</p> </div> <div class="footer">footer</div> <script src="js/jq/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //在js中引入 $(document).ready(function () { $('.top').load('top.html'); $('.footer').load('fotter.html'); }); </script>
3.object引入和iframe引入（带有滚动条，视情况使用）
<!--object引入，相当于把整个页面拉过来（在一个html中嵌套另一个html），包括title,meta,body,html等--> <!--此处的高是嵌套进去的整个html的高，不包括边框，padding等--> <object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object> <!--iframe引入，同object方式一样，页面整个嵌套，默认高度为150,frameborder设置为1时边框宽度为2--> <iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>
3.1两种引入方式比较：
- 相同点：
- 默认高度为150
- 引入后本页面html嵌套引入页面html，整个引入
- 不同点：
- iframe引入使用scrolling="no"可以不让页面进行滚动，取消右侧滚动条
- iframe中 frameborder="no"可以修改为0或1，这里不是指宽度，可以理解为布尔型，当设为1时border宽度为2