992
html 如何引入一個公共的頭部和底部
html 靜態頁麵中引用外部頁麵沒那麼方便，主要方法有：
asp語言和PHP語言
首先製作一個頭部文件head.asp，或者一個底部文件foot.asp。如主頁是index.asp，調用頭部代碼是在index.asp文件代碼的開始位置（第一個標記後麵，
標記前麵）增加如下代碼：<!– #include file=”head.asp” –>
如果是PHP文件，文件名改為 head.php即可
使用框架來實現
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>
以前人們常常使用靜態frame框架來做首尾(一般不是iframe)。現在越來越少見了。主要因為設計網頁相對比較困難，而且還增加了連接數,占用線程較多，速度慢，而且也不利於搜索引擎的對頭尾的收錄
使用.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\" \"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
document.writeln("<html xmlns=\"https://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=\"https://www.cnblogs.com/jtjds/\">Mac</a></li>");
document.writeln(" <li><a href=\"https://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文件過大會加重訪問者的瀏覽器負擔，影響訪問速度
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 不能改為其他，這種寫法為一次包含一個文件
通過<object>實現
<object type="text/x-scriptlet" data="import.htm" width=100% height=30></object>
HTML中執行include file
使用ssi技術頁麵生成shtml文件，隻用在頭部文件位置加入：
SSI（Server Side Include)，通常稱為"服務器端嵌入"或"服務器端包含"，是一種類似於ASP的基於服務器的網頁製作技術。默認擴展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中，可以通過注釋行調用的命令或指針，SSI具有 強大的功能，隻要使用一條簡單的SSI命令就可以實現整個網站的內容更新，時間和日期的動態顯示，以及執行shell和CGI腳本程序等複雜的功能
<!--#include -->
使用shtml的好處是對搜索引擎比較友好，需要處理的文件在服務器端完成的， 不會加重訪問者的瀏覽器負擔
HTML5 中的 <embed> 標簽
<embed type="text/html" src="footer.html" />
ajax動態填充
node代理
1：使用ssi技術頁麵生成shtml文件，隻用在頭部文件位置加入<!--#include -->，然後修改的時候隻要修改header.htm文件就可以了。使用shtml的好處是對搜索引擎比較友好，需要處理的文件在服務器端完成的，不會加重訪問者的瀏覽器負擔
本地合並
即將HTML硬拆成頭、尾、內容三個部分的文件，在預覽或者發布之前用腳本手工合並，沒有後台的時候使用效果不錯
ajax動態拉取填充
web服務器（比如IIS）中設定包含
後台模板引擎處理（字符串拚接）
用圖片、flash等外部資源做---不推薦，比較麻煩
angular js裏的的使用
使用fis。有html嵌入功能
<link rel="import" href="demo.html?__inline">
LINK[rel=import]其實有點類似於IFRAME，它引用的對象也是一個完整的文檔，而不是文檔片段，而且裏麵的SCRIPT也會執行，對跨域的資源訪問同樣有同源策略的限製
和IFRAME不同的是，它和父文檔的關係更密切。它自身確實是一個文檔，可以通過link元素上的import屬性訪問，但在其內部的代碼中，如果訪問document則等同於訪問父文檔。這是很奇怪的設定，雖然內部的元素與父文檔不在一個DOM樹上（父文檔上querySelector無法找到內部的元素），但他們卻共用一個document對象，甚至共用一個全局環境。這意味著STYLE或SCRIPT之類的標簽所執行的結果會影響到容器
最後更新：2017-06-13 18:01:44