1. 程式人生 > >HTML如何共用頭部與尾部?

HTML如何共用頭部與尾部?

很不錯的文章,轉了,解決我的困擾!

html語言
製作一個共用頭部檔案head.htm或一個共用底部檔案foot.htm。如主頁檔案是index.htm,呼叫頭部和底部檔案的方法是:在主頁檔案程式碼的開始位置和結束位置分別增加下面的程式碼:

 
 

比如下面的程式碼主頁面:index.html,在其中引入head.html

 

單獨存放的head.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;}

三、javaScript語言--推薦這種方式
     製作一個共用頭部檔案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:

 以後無論在哪個頁面,想呼叫該頭部檔案,直接插入head.js檔案即可:下面是隨便建的一個頁面,並在其中插入head.js

四: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頁面中,引入頭部和尾部的檔案的方法就這麼多,列舉了一些,其它的感興趣的可自行鑽研。

 

轉載於:https://www.cnblogs.com/jtjds/p/5326200.html