html 如何引入一個公共的頭部和底部
原文轉自https://yq.aliyun.com/articles/100662?t=t1#
html 靜態頁面中引用外部頁面沒那麼方便，主要方法有：
1.asp語言和PHP語言
首先製作一個頭部檔案head.asp，或者一個底部檔案foot.asp。如主頁是index.asp，呼叫頭部程式碼是在index.asp檔案程式碼的開始位置（第一個標記後面，
標記前面）增加如下程式碼：
<!– #include file=”head.asp” –> 如果是PHP檔案，檔名改為 head.php即可
2.使用框架來實現
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>
以前人們常常使用靜態frame框架來做首尾(一般不是iframe)。現在越來越少見了。主要因為設計網頁相對比較困難，而且還增加了連線數,佔用執行緒較多，速度慢，而且也不利於搜尋引擎的對頭尾的收錄
3.使用.js指令碼來實現
建立一個head.js的檔案，找一個html轉js的網站，然後把你頭部的html程式碼轉化成js程式碼，並放在head.js檔案裡面。然後在需要呼叫head檔案程式碼的地方新增
<script language="javascript" type="text/javascript" src="js/head.js"></script>這個地方src="js/head.js"的路徑是你head.js檔案的路徑
html轉換為JS:
document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">"); document.writeln("<head>"); document.writeln("<style>"); document.writeln("</style>"); document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />"); document.writeln("<title></title>"); document.writeln(" <link href=\'head.css\' rel=\"stylesheet\" type=\"text/css\" />"); document.writeln("</head>"); document.writeln("<body >"); document.writeln(" <div class=\'miaov_head\'>"); document.writeln(" <ul>"); document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>"); document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>"); document.writeln(" </ul>"); document.writeln("</div>"); document.writeln(" "); document.writeln("</body>"); document.writeln("</html>"); document.writeln("");
以後無論在哪個頁面，想呼叫該頭部檔案，直接插入head.js檔案即可
這種方式的優點是方便，便於修改。缺點是由於搜尋引擎讀不懂javascript檔案，頭部檔案和尾部檔案搜尋引擎無法收錄，而且js檔案過大會加重訪問者的瀏覽器負擔，影響訪問速度
4.Behavior的download方式
最好能有一種方法，就像asp頁面包含其他頁面時那樣，用一小段包含語句就可以實現，不要將需要包含的內容出現在本頁面內，而是分割出去到另外一個自己的頁面
<span ><IE:Download STYLE="behavior:url(#default#download)" />
<script>
function onDownloadDone(downData){
showImport1.innerHTML=downData
}
oDownload1.startDownload('top.htm',onDownloadDone)
</script>注：包含的頁面為 top.htm 只要把需要包含的頁面改掉就可以了！其中id=showimport 不能改為其他，這種寫法為一次包含一個檔案
5.通過<object>實現
<object type="text/x-scriptlet" data="import.htm" width=100% height=30></object>6.HTML中執行include file
使用ssi技術頁面生成shtml檔案，只用在頭部檔案位置加入：
SSI（Server Side Include)，通常稱為"伺服器端嵌入"或"伺服器端包含"，是一種類似於ASP的基於伺服器的網頁製作技術。預設副檔名是 .stm、.shtm 和 .shtml。SSI就是在HTML檔案中，可以通過註釋行呼叫的命令或指標，SSI具有 強大的功能，只要使用一條簡單的SSI命令就可以實現整個網站的內容更新，時間和日期的動態顯示，以及執行shell和CGI指令碼程式等複雜的功能
<!--#include file="library/common_header.html" -->使用shtml的好處是對搜尋引擎比較友好，需要處理的檔案在伺服器端完成的， 不會加重訪問者的瀏覽器負擔
7.HTML5 中的 <embed> 標籤
<embed type="text/html" src="footer.html" />8.ajax動態填充
node代理
1：使用ssi技術頁面生成shtml檔案，只用在頭部檔案位置加入，然後修改的時候只要修改header.htm檔案就可以了。使用shtml的好處是對搜尋引擎比較友好，需要處理的檔案在伺服器端完成的，不會加重訪問者的瀏覽器負擔
本地合併
即將HTML硬拆成頭、尾、內容三個部分的檔案，在預覽或者釋出之前用指令碼手工合併，沒有後臺的時候使用效果不錯
9.使用JQuery的load方法
/*匯入頁面*/
$(document).ready(function(){
$(".top").load("top.html");
$(".footer").load("footer.html");
});
把他寫入到js檔案裡，在需要的頁面匯入就可以了，
10.ajax動態拉取填充
11.web伺服器（比如IIS）中設定包含
12.後臺模板引擎處理（字串拼接）
13.用圖片、flash等外部資源做---不推薦，比較麻煩
14.angular js裡的的使用
15.使用fis。有html嵌入功能
<link rel="import" href="demo.html?__inline">LINK[rel=import]其實有點類似於IFRAME，它引用的物件也是一個完整的文件，而不是文件片段，而且裡面的SCRIPT也會執行，對跨域的資源訪問同樣有同源策略的限制
和IFRAME不同的是，它和父文件的關係更密切。它自身確實是一個文件，可以通過link元素上的import屬性訪問，但在其內部的程式碼中，如果訪問document則等同於訪問父文件。這是很奇怪的設定，雖然內部的元素與父文件不在一個DOM樹上（父文件上querySelector無法找到內部的元素），但他們卻共用一個document物件，甚至共用一個全域性環境。這意味著STYLE或SCRIPT之類的標籤所執行的結果會影響到容器