HTML 靜態頁面的頭部和底部都是相同的，如何讓每個頁面統一調用一個公共的頭部和底部呢？

01-06

1、如果每個頁面都單獨寫的話，要是修改起來每個頁面都要修改，不方便。
2、用 JS 外鏈調用會有載入問題，有什麼更好的辦法？

直接給你提供一個比較匹配你的工具，裡面帶有一份demo，demo就是和你描述需求的差不多。

GitHub - lmtdit/demo-builder: 這是一個靜態html模塊化構建方案，主要解決沒有服務端語言支持的情況下，靜態html文件的模塊抽象問題。

主要功能

1 基於靜態html的demo模塊化構建方案，支持內嵌圖片資源的定位功能（img帶MD5戳）
2 基於LESS的CSS模塊化構建方案（暫未包含雪碧圖的自動構建功能在內）
3 靜態CSS和JS的優化壓縮，支持內嵌圖片資源的定位功能，（同上）
4 開發狀態下的watch即時編譯功能
5 內置一款靜態開發的web伺服器

模板語法很簡單，github上有文檔，需要就關注一下。。。

不過這是1年寫的了，只是一種實現。你可以去試試fis之類的構建工具（提供各種該資源的__inline引用）或webpack（require一份html）等，一樣能夠完成你的需求。。。

實現方式有N多，關鍵是要想明白前端開發為什麼存在這樣的問題，別人為什麼要這麼去做，想明白了解決方法就多了。

你需要有類似Jade、EJS這樣的模板引擎，其次，你需要一個類似Gulp這樣的build system

nginx ESI 最簡單了

在Python的Django框架下

可以使用模板Template

模板可以像c的頭文件那樣具有包含關係

可以參考django自帶的後台管理admin帶的模板嵌套關係

這樣你可以寫一個統一的頭/尾，別的模板都繼承它們

這種模板系統同時應該是用的比較廣泛的，我猜在別的Web應用也有類似的東西

詳情報考:https://docs.djangoproject.com/en/1.9/ref/templates/language/

1、使用後端語言實現 include，比如 PHP，當然這跟你說的「靜態頁面」可能不相符；

2、使用模板引擎，無論是前端模板還是後端模板，比如 Handlebars、Jade 等；

3、使用組件化框架或庫，把這些可復用的部分做成組件，比如 React 或者 Vue。

方案一：用 iframe

方案二：用 JavaScript 填充內容，所有的頁面都有

&& .... && &


  &&
  ...
謝謝評論里的某個人補充鏈接
https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports

你好
這個問題我很早前就碰到了
如果使用模版引擎的話
就可以很輕鬆的解決這個問題
這裡強烈安利一下我的個人開源框架（可以完美解決你這個問題--模版繼承）
https://github.com/az8321550/front-end-separate

 
從DRY原則來講，你需要一個模板引擎，如EJS；而從靜態頁面的角度來講，你需要複製、黏貼。

可以看看我寫的gulp插件
gulp-html-import
https://segmentfault.com/a/1190000005719119

安利之前寫的一款 Gurnt 插件：https://ben-yip.github.io/grunt-html-imports/
藉助構建工具來解決，這樣只依賴構建環境，輸出的還是HTML文件，所以對運行環境的要求很低，直接用瀏覽器就能查看，達到了「靜態頁面」的開發要求。
————————————————————————————————
解決方法其實有很多，總結分析如下：

情景描述

開發靜態頁面 Demo 時，如何解決包含頁面片段的問題（比如抽取然後引用相同的 header 和 footer）？
是不是想要在開發靜態 HTML 時，也可以像在 JSP 中那樣 include 一些可重用的頁面片段？
如果有了片段引入，就可以用模塊化的思想去組織頁面片段，開發多個稍複雜靜態頁時，結構也變得更清晰了；
開發完靜態頁後，如果切換成其他後端模板的工作需要交給後端的小夥伴，後端開發者也更容易看懂頁面組織的邏輯；


 
解決方案
（知乎弄不了表格只能用截圖，具體看這裡：github.com 的頁面）

解決方案總結

伺服器端渲染：其實就是利用模板引擎做字元串拼接的工作；
客戶端渲染：不管以何種形式載入，最終會涉及DOM操作，甚至要在頁面中引入與實際業務邏輯無關的腳本；
各種有組件化功能的框架/庫：除非項目基於這些框架/集成方案構建，否則方案不通用；
自行編寫小工具；


結論

可見有很多方案可以實現，但是割雞焉用牛刀？借用大型的框架/組件來實現這一簡單的功能會引入多餘的東西，顯得太「重」；
而本項目就是只做頁面片段引入這件事的一款Grunt插件：構建後的頁面就是一個個普通的 HTML 文件，甚至在要查看時可以直接本地在瀏覽器中打開，無需依賴其他配置和環境，這也是比起伺服器端/前端渲染方案的優勢所在。
前提是會簡單地使用Grunt。英文爛？不怕，還有Grunt中文站。


艱難的標準化進程

HTML 至今尚未原生支持引入片段，也有自身的歷史原因；
在當下組件化的需求和浪潮下，一些工作草案（Working Draft）正在制定：

http://w3c.github.io/webcomponents/spec/imports/
https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports
https://www.html5rocks.com/en/tutorials/webcomponents/imports/ （可切換中文版）
使用方式大概是這樣的：&
在有些試驗性實現下，引入的不是片段，而是文檔，類似於iframe；
不過距離標準化還遠，不好說到時會變成什麼樣；
也可以在Can I use 中看看支持情況：Can I use... Support tables for HTML5, CSS3, etc


其他相關概念：

Custom Element：允許自定義元素；
Shadow DOM：允許用聲明的方式定義你的自定義元素的內容；
The & Element：允許一個元素的style、ID、class只作用到其本身；
再結合 HTML Import，可見這些都是為了構造可復用、模塊化的 Web 組件；
雖然標準沒實現，不過已經有支持這套規範的polyfill： webcomponents.js
關注這個組織： http://webcomponents.org/



參考閱讀

靜態頁面Demo項目，如何將header和footer 像PHP一樣 include？ —— segmentfault
靜態 HTML 文件怎麼從外部調入 HTML 模板（如頭部，頁尾這些公共的部分）？—— zhihu
靜態html如何包括header和footer ?——zhihu


純靜態HTML可以考慮SSI，動態語言搭配的模板大多數都支持include模式

 
用構建工具處理吧，既不增加開發成本又能降低維護成本

有個東西叫模板引擎，當然了要純前端實現也不是不行，將這些模塊存到離線儲存里，用一個自執行函數調用，對應模塊，具體實現需要一點點過硬的前端基礎，無腦實現的方法。做一個靜態html，只有頭部和尾部，然後每個新模板從這個模板複製粘貼開始，適用0基礎人士。

題主的這個可以使用shtml解決吧！

glup你值得擁有

一般都是用模板引擎include公共文件，純html的話，可以通過引用js動態寫入

大家說的方法都可行，但我要提個醒，如果這些頁面要兼顧seo的話，還是建議手打，通過後端處理的除外。

可以用.net設置為控制項，然後引用就好

 
  推薦閱讀：


※關於angualr網站後台？
※如何看待 ECMAScript 2018 規範?
※如何讓一個div裡面的div垂直居中？
※facebook首頁的這個載入效果是怎麼實現的?
※網站為什麼 JS 調用盡量放到網頁底部？
TAG:前端開發 | HTML | CSS | JavaScript | 靜態頁面 |