首頁 > 開發者 > JavaScript
如何在HTML不同的頁面中，共用頭部與尾部？，共用尾部
一、asp語言和PHP語言
首先製作一個頭部檔案head.asp，或者一個底部檔案foot.asp。如首頁是index.asp，調用頭部代碼是在index.asp檔案代碼的開始位置（第一個標記後面，<head>標記前面）增加如下代碼：
<!– #include file=”head.asp” –>
調用共用底部檔案代碼是在index.asp檔案代碼的結束位置（最後一個標記前面）增加如下代碼：
<!– #include file=”foot.asp” –>
如果是PHP檔案，檔案名稱改為 footer.php即可。
二、html語言
製作一個共用頭部檔案head.htm或一個共用底部檔案foot.htm。如首頁檔案是index.htm，調用頭部和底部檔案的方法是：在首頁檔案代碼的開始位置和結束位置分別增加下面的代碼：
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%"></iframe>
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”foot.htm” height="auto" width="100%"></iframe>
比如下面的代碼首頁面：index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><link href='head.css' rel="stylesheet" type="text/css" /><script type="text/javascript"></script></head><body >//首頁面index.html<div class='miaov_head'> <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" width="100%" height="auto"> </iframe>--------這裡調用head.html頁面，需要使用div包起來，否則樣式會發生改變</div> </body></html>
單獨存放的head.html代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style></style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> <link href='head.css' rel="stylesheet" type="text/css" /></head><body > <div class='miaov_head'> <ul> <li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li> <li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li> <li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li> <li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li> <li><a href="http://www.cnblogs.com/jtjds/">Music</a></li> <li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li> </ul></div> </body></html>
css樣式代碼如下：
*{margin:0;padding:0;}body{background:white;position:relative;height:100%;color: #777;font-size: 13px;}img{border:none;display:block;}li{list-style:none;text-decoration: none;}.miaov_head{height:36px;width:100%;margin:0 auto;background: black;margin-bottom: 0px;}.miaov_head img{width: 30px ;height: 30px;margin-top: 0;margin-left: 130px;}.miaov_head ul{float: left;width:900px;height: 36px;margin-top: 0px;color: white;position: absolute;top: 0px;margin-left: 200px;}.miaov_head ul li{float: left;padding-left: 80px;margin-left: 0px;color: white;list-style: none; }.miaov_head ul li a{color: white;font-size: 14px;text-decoration: none;}.miaov_head input{position: absolute;top: 5px;margin-left: 1000px;width: 200px;height: 22px;}.miaov_head a{line-height:36px;color:#777;}.miaov_head a:hover{color:#555;}
三、script語言--推薦這種
製作一個共用頭部檔案head.js和一個共用底部檔案foot.js。如首頁檔案是index.htm，調用頭部和底部檔案的方法是：在首頁檔案代碼的開始位置和結束位置分別增加下面的代碼:<script src=’head.js’>和<script src=’foot.js’>調用共同的網頁頭部或者網頁底部，減少了每個頁面都要編寫頭部或底部的複雜程度，而且方便修改，只要修改一個頭部或者底部檔案，所有頁面的頭部或者底部都隨之改變，增加了工作效率。
比如：head.js檔案------根據上面的head.html，利用轉換工具：http://tool.chinaz.com/Tools/Html_Js.aspx
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/\">iPad</a></li>");document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Watch</a></li>");document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Music</a></li>");document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Contact Us</a></li>");document.writeln(" </ul>");document.writeln("</div>");document.writeln(" ");document.writeln("</body>");document.writeln("</html>");document.writeln("");
以後無論在哪個頁面，想調用該頭部檔案，直接插入head.js檔案即可：下面是隨便建的一個頁面，//MAC.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style></style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> <script type="text/javascript" src="head.js"></script>-------------------這裡調用head.js</head><body > </body></html>
四：shtml檔案
1：使用ssi技術頁面產生shtml檔案，只用在頭部檔案位置加入<!--#include file="header.htm" -->，然後修改的時候只要修改header.htm檔案就可以了。使用shtml的好處是對搜尋引擎比較友好，需要處理的檔案在伺服器端完成的， 不會加重訪問者的瀏覽器負擔。
五：本地合并
即將HTML硬拆成頭、尾、內容三個部分的檔案，在預覽或者發布之前用指令碼手工合并。很久以前用過，沒有背景時候使用效果不錯。
六：ajax動態拉取填充
七：web伺服器（比如IIS）中設定包含
比如我們說的SSI，文檔尾碼名是.shtml的就可以使用include包含。
SSI（Server Side Include)，通常稱為"伺服器端嵌入"或者叫"伺服器端包含"，是一種類似於ASP的基於伺服器的網頁製作技術。預設副檔名是 .stm、.shtm 和 .shtml。SSI就是在HTML檔案中，可以通過注釋行調用的命令或指標，SSI具有 強大的功能，只要使用一條簡單的SSI命令就可以實現整個網站的內容更新，時間和日期的動態顯示，以及執行shell和CGI指令碼程式等複雜的功能。
八：後台模板引擎處理（字串拼接）
九：用圖片、flash等外部資源做---不推薦，比較麻煩
十：angular js裡的<ng-include>的使用
差不多在靜態html頁面中，引入頭部和尾部的檔案的方法就這麼多，列舉了一些，其它的感興趣的可自行鑽研。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
