靜態html如何包括header和footer

時間 2021-06-03 02:30:32

1樓:

chrome 還未納入標準的標籤:

rel=

"import"

href

="components/head.html"

>

2樓:一鳴

今天正好碰到了這個需求,用純 js 和 html 實現的,說一下我用的方法。

1.把 header 和 footer 剝離成單獨的 html 檔案。

2.在需要引入的頁面的頭部和尾部分別寫乙個空 div 標籤,作為 header 和 footer 的預留位置。

3.新建乙個 js 檔案,封裝乙個 ajax 方法,url 分別指向第一步剝離出來的的 html 檔案,並將返回的內容用 innerHTML 分別填充進第二步的預留位置中。

4.在相應頁面引入該 js 檔案。

這樣就完成了。可以很方便地引入想要的模組,以後要維護的話直接改模組對應的 html 檔案就好了。

希望對題主有幫助~o(∩_∩)o ~

3樓:張科洋

復用的話,我見到的有兩種方式:

1. 伺服器端渲染:也就是後端的模板引擎,比如說php中的smarty,node中的ejs,這個的原理是在後端解析,拼字串,最後生成完整的html,再傳送到客戶端。

2, 客戶端渲染:這個最常見的就是元件化,比如說angular中的指令,react中的元件,這個時候操作的是dom,動態插入或移除。

當然,你說的也可以,但是輪子有些大。

4樓:擼碼客

今天這個問題怎麼這麼多。。。HTML 靜態頁面的頭部和底部都是相同的,如何讓每個頁面統一呼叫乙個公共的頭部和底部呢? - 前端開發

5樓:題葉

復用的頁面布局, 考慮載入速度相關的效能和效果, 不要用 jQuery. 盡量服務端做元件化, 其實就是乙個 HTML 字串模板的函式. 比如樓上有人說 EJS 就可以.

6樓:梅雪香

通常,這是在server端做的事情,可以使用各種各樣的檔案include技術,如:Server Side Includes

但我看題主的意思好像是要在瀏覽器端來實現,可瀏覽器端沒有類似的技術,只能另闢蹊徑。

那麼,最容易想到的辦法就是:document.write()了。

可以建立乙個檔案:header-footer.js內容如下var headerHtml = ['

靜態 HTML 檔案怎麼從外部調入 HTML 模板(如頭部,頁尾這些公共的部分)?

鶴嘯九天 我用jquery的load方式是可以的,但是純HTML頁面如果需要在DOM ready後與ajax一起執行時,反而是ajax先執行,所以load會比ajax滯後! 1.用html html5 自帶的標籤引入,其他回答者已經回答的很好了 2.有後端語言環境的 PHP,JSP,ASP 的,用後...

學了html和css,但是自己做靜態網頁布局的能力很差不知道怎麼提公升?

心亡淚涼 樓主也是剛剛學這個嗎,很巧我最近把html css看完,感覺懂一點,興趣很重要吧,同時給你自己定製乙個目標,做個什麼網頁出來,比如,做乙個和QQ導航差不多的頁面 以後html5 css3。以後那就看你努力啦 凱斯 做大量的練習,多看一些經典的書籍,嘗試去模仿一些頁面。現在JS能實現的一些功...

如何判斷自己靜態代謝是否提高?

健身流言終結者 HIIT能不能提公升代謝?可以!問題是多少。是HIIT過程消耗的14 普通有氧是7 不是提公升你代謝的14 是總量只有運動消耗的14 假設運動總共消耗100卡路里。他在之後提公升你的代謝一共只有14卡。然後就沒了 所以不要再鼓吹迷信HIIT了 關於RMR本身。他幾乎至於你的身高體重和...