我們在使用代碼編程一個網站的時候，通常情況下頭部和尾部是相同的，如果一個網站的每個頁面都把這些代碼寫一遍，不僅浪費時間，還顯得重復代碼很多，所以此時把重復的頁面單獨摘出來，在用到的時候從外部直接引進去，就能節省很多時間，減少很多代碼。
在這里，有好幾種引入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> 最后的運行效果：
import引入運行效果
為了客觀反應不同方式的引入差距，下面是瀏覽器代碼界面：
控制台檢查
由上圖可以看出， import引入除開script標簽，在其他html body中寫入什么就引入什么，完全的內容格式.
-
js引入
<!--注意順序--> <!--使用js引入，引入整個文檔，但是沒有html和body，相當於body里面的數據--> <div class="top"></div> <div class="center"> <p>你好，我在中間！</p> </div> <div class="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> 使用js引入，相當於把引入的html中head和body標簽中的數據拖出來，在外面包了一個你自己寫的標簽，比如說上面代碼中的<div class="top"></div>
運行結果同import相同，這里不再展示
注意：是head和body標簽中的數據，不帶標簽，下圖是瀏覽器顯示代碼
js引入
-
include 引入(涉及到一個從網上扒的封裝函數,下面有)（head和body標簽中的數據直接引入）
<body> <!--include引入，順序很重要--> <script src="js/include.js"></script> <include src="top.html"></include> <include src="center.html"></include> <div id=""> <p>你沒有看錯，我在這！</p> </div> <include src="fotter.html"></include> </body> 瀏覽器代碼分析
include引入
include.js壓縮代碼：
(function(window,document,undefined){var Include39485748323=function(){};Include39485748323.prototype={forEach:function(array,callback){var size=array.length;for(var i=size-1;i>=0;i-=1){callback.apply(array[i],[i])}},getFilePath:function(){var curWwwPath=window.document.location.href;var pathName=window.document.location.pathname;var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);return localhostPaht+projectName},getFileContent:function(url){var ie=navigator.userAgent.indexOf('MSIE')>0;var o=ie?new ActiveXObject('Microsoft.XMLHTTP'):new XMLHttpRequest();o.open('get',url,false);o.send(null);return o.responseText},parseNode:function(content){var objE=document.createElement("div");objE.innerHTML=content;return objE.childNodes},executeScript:function(content){var mac=/<script>([\s\S]*?)<\/script>/g;var r="";while(r=mac.exec(content)){eval(r[1])}},getHtml:function(content){var mac=/<script>([\s\S]*?)<\/script>/g;content.replace(mac,"");return content},