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

来源:http://www.cnblogs.com/jtjds/archive/2016/03/27/5326200.html
-Advertisement-
Play Games

一、asp語言和PHP語言 首先製作一個頭部文件head.asp，或者一個底部文件foot.asp。如主頁是index.asp，調用頭部代碼是在index.asp文件代碼的開始位置（第一個標記後面，<head>標記前面）增加如下代碼： 調用共用底部文件代碼是在index.asp文件代碼的結束位置（最 ...


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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 何為BFC
    BFC 定義 BFC(Block formatting context)直譯為"塊級格式化上下⽂文"。它是⼀一個獨⽴立的渲染區域，只有Block-level box參 與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。 BFC佈局規則：內部的Box會在垂直⽅方向 ...
  • 關於清除浮動的一些簡單理解。
    在我們學習css時，利用浮動可以為我們的的佈局樣式提供很大的便利，但是隨著而來，我們也會遇到清除浮動的問題，關於清除浮動，我談一談我的一些簡單看法。 首先，我們為什麼要清除浮動，因為浮動會使該標簽脫離文檔流，對前後的元素，還有父元素（邊框，內容）都會造成影響。 下麵說一說清除浮動的方法： 1 定義h ...
  • 網易2016實習生前端筆試題部分總結
    這隻是部分題，答案為個人觀點如有錯誤歡迎指出，感覺考點都挺基礎，但是很註重考細節方面，通過整理也知道自己在CSS3和HTML5，網路知識等方面的不足還是得多學多練多思考。攢rp，希望自己在明天360筆試中能輕鬆答過~css 1.多選 添加以下哪些樣式可以使超出部分文字變為"..."。 A.white ...
  • 巧用margin/padding的百分比值實現高度自適應（多用於占位，避免閃爍）
    一個基礎卻又容易混淆的css知識點 本文依賴於一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！ 也許你會說，left/right以父元素的width為參照物好理解，但是t ...
  • Http協議與TCP協議簡單理解
    TCP協議對應於傳輸層，而HTTP協議對應於應用層，從本質上來說，二者沒有可比性。Http協議是建立在TCP協議基礎之上的，當瀏覽器需要從伺服器獲取網頁數據的時候，會發出一次Http請求。Http會通過TCP建立起一個到伺服器的連接通道，當本次請求需要的數據完畢後，Http會立即將TCP連接斷開，這 ...
  • 多列
    1 .newspaper 2 { 3 -moz-column-count:3; /* Firefox */ 4 -webkit-column-count:3; /* Safari and Chrome */ 5 column-count:3; 6 } 7 在當前div的寬度中，將內容分為3列顯示 1 ...
  • JavaScript選項卡
    實現js選項卡 html的代碼如下： 1、通過滑鼠划過來看選中選項卡的哪個標題，其實也就是通過li的class=“tabin1”來改變選中標題樣式； 2、選中標題的內容也是通過class的轉變來控制，主要是使用display樣式； 3、選中標題和內容通過他們的下標來對應起來； 具體的js代碼實現如下 ...
  • 關於響應式、媒體查詢和media的關係 、流媒體佈局flex 和em rem像素的使用 我有一些廢話要講.....
    一、什麼是響應式 隨著移動端越來遇火 網站的佈局成為一個熱議的話題 有的人喜歡用手機瀏覽網站、有的人喜歡用paid瀏覽網站、有人喜歡用電腦瀏覽網站 那麼問題來了 我們怎麼樣才能使用一套css樣式 完成三種終端的適配呢 萬維組織(W3c)朝思暮想 終於提出了一種可以相容各個終端的頁面佈局樣式語法 交給 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類