html 如何引入一個公共的頭部和底部

摘要： LINK[rel=import]其實有點相似於IFRAME，它引用的對象也是一個完整的文檔，而不是文檔片斷，並且裏面的SCRIPT也會執行，對跨域的資源訪問一樣有同源策略的限制javascript

html 靜態頁面中引用外部頁面沒那麼方便，主要方法有：php

asp語言和PHP語言

首先製做一個頭部文件head.asp，或者一個底部文件foot.asp。如主頁是index.asp，調用頭部代碼是在index.asp文件代碼的開始位置（第一個標記後面，css

標記前面）增長以下代碼：html

<!–  #include file=」head.asp」    –>

若是是PHP文件，文件名改成 head.php便可java

使用框架來實現

<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\" \"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文件便可ui

這種方式的優勢是方便，便於修改。缺點是因爲搜索引擎讀不懂javascript文件，頭部文件和尾部文件搜索引擎沒法收錄，並且js文件過大會加劇訪問者的瀏覽器負擔，影響訪問速度

Behavior的download方式

最好能有一種方法，就像asp頁面包含其餘頁面時那樣，用一小段包含語句就能夠實現，不要將須要包含的內容出如今本頁面內，而是分割出去到另一個本身的頁面