我们在使用代码编程一个网站的时候，通常情况下头部和尾部是相同的，如果一个网站的每个页面都把这些代码写一遍，不仅浪费时间，还显得重复代码很多，所以此时把重复的页面单独摘出来，在用到的时候从外部直接引进去，就能节省很多时间，减少很多代码。
在这里，有好几种引入html文件的方式，不过每种都是有利有弊，需要根据需要自行选择 有大佬反馈解决了有些浏览器本地实现不了的问题：放到服务器上面！（感谢！！！） 注意：引入后主页面的Css样式不适用于被引入页面，比如在主页面设置 <style type="text/css"> *{ margin: 0; padding: 0; } </style> 只在本页面生效，引入文件整体适用，但引入文件内容不适用。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> 你好呀！ <!--本页面写入内容--> <script type="text/javascript"> document.write(page2.import.body.innerHTML); </script>最后的运行效果：