如何在HTML不同的頁面中，共用頭部與尾部？HTML的引入幾種方法
阿新 • • 發佈：2018-11-05
-
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> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body > --------呼叫內容呼叫內容呼叫內容------------- <div class='miaov_head'> <!--這裡呼叫head.html頁面，需要使用div包起來，否則樣式會發生改變--> <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" width="100%" height="auto"></iframe> </div> </body>
- 單獨存放的head.html程式碼
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href='head.css' rel="stylesheet" type="text/css" />
<style type="text/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;}
</style>
</head>
<body >
<div class='miaov_head'>
<ul>
<li><a href="">我是head</a></li>
<li><a href="">我是head</a></li>
<li><a href="">我是head</a></li>
<li><a href="">我是head</a></li>
<li><a href="">我是head</a></li>
<li><a href="">我是head</a></li>
</ul>
</div>
</body>
</html>
-
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>");
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=\"這裡放連結/\">我是js方法</a></li>");
document.writeln(" <li><a href=\"這裡放連結/\">我是js方法</a></li>");
document.writeln(" <li><a href=\"這裡放連結/\">我是js方法</a></li>");
document.writeln(" <li><a href=\"這裡放連結/\">我是js方法</a></li>");
document.writeln(" <li><a href=\"這裡放連結/\">我是js方法</a></li>");
document.writeln(" <li><a href=\"這裡放連結/\">我是js方法</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln(" ");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");
- 以後無論在哪個頁面，想呼叫該頭部檔案，直接插入head.js檔案即可：如下
<!DOCTYPE html>
<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 >
我是js方法
</body>
</html>
-
shtml檔案
- 使用ssi技術頁面生成shtml檔案，只用在頭部檔案位置加入<!--#include file="header.htm" -->，然後修改的時候只要修改header.htm檔案就可以了。使用shtml的好處是對搜尋引擎比較友好，需要處理的檔案在伺服器端完成的， 不會加重訪問者的瀏覽器負擔。
-
ajax動態拉取填充