如何在HTML不一樣的頁面中，共用頭部與尾部？

時間 2019-11-16

原文原文鏈接

1、asp語言和PHP語言

首先製做一個頭部文件head.asp，或者一個底部文件foot.asp。如主頁是index.asp，調用頭部代碼是在index.asp文件代碼的開始位置（第一個標記後面，<head>標記前面）增長以下代碼：
javascript

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

調用共用底部文件代碼是在index.asp文件代碼的結束位置（最後一個標記前面）增長以下代碼：
php

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

若是是PHP文件，文件名改成 footer.php便可。css

2、html語言
製做一個共用頭部文件head.htm或一個共用底部文件foot.htm。如主頁文件是index.htm，調用頭部和底部文件的方法是：在主頁文件代碼的開始位置和結束位置分別增長下面的代碼：
html

<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.htmljava

<!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代碼以下：web

<!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樣式代碼以下：ajax

*{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;}

3、script語言--推薦這種
製做一個共用頭部文件head.js和一個共用底部文件foot.js。如主頁文件是index.htm，調用頭部和底部文件的方法是：在主頁文件代碼的開始位置和結束位置分別增長下面的代碼:<script src=’head.js’>和<script src=’foot.js’>調用共同的網頁頭部或者網頁底部，減小了每一個頁面都要編寫頭部或底部的複雜程度，並且方便修改，只要修改一個頭部或者底部文件，全部頁面的頭部或者底部都隨之改變，增長了工做效率。
shell

好比：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文件，只用在頭部文件位置加入，而後修改的時候只要修改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頁面中，引入頭部和尾部的文件的方法就這麼多，列舉了一些，其它的感興趣的可自行鑽研。