靜態html分割頁面，達到類似PHP等動態頁面的include引入頁面效果。

用html把首頁分成三個文件

web.png

在PHP、JSP等動態頁面開發中，頁面里引入其它頁面只需include()進來就可以實現頁面的分離。如果用HTML，也是可以實現頁面的分割的。

兩種方法：

一、通過iframe嵌套頁面

二、通過AJAX方法load載入頁面

通過jQuery的load()方法載入頁面：

假設有四個頁面：index.html、header.html、content.html、footer.html，其中首頁index.html頁面是由其他三個頁面拼接而成的。

index.html頁面的主要代碼(含js)：

$(function(){

$('#header').load('header.html');

$('#content').load('content.html');

$('#footer').load('footer.html');

})

jQuery的load()方法：載入遠程HTML文件代碼并插入至DOM中，默認使用GET方式。

load(url,data,callback)

參數說明：

url：待加載的HTML網頁網址

data：發送至服務器的key / value數據。在jQuery 1.3中也可以接受一個字符串了。

callback：載入成功時回調函數

重要說明：

通過load()方法載入的頁面，需要控制好css樣式，這樣才能達到完整的頁面顯示效果。

可以先在一個頁面里寫好html+css，然后再分離出去，最后用load()載入進來即可。

另外，通過js追加進來的DOM結構，對SEO有影響，類似百度爬蟲是無法抓取的！一般情況下不到萬不得已的時候，不推薦使用。

移動端單一html創建多個頁面的方法

基于移動端的，比如基于移動框架jquery.mobile開發的，那么在單一HTML文件中創建多個頁面的方法：

轉到頁面二

轉到頁面一

注: 屬性data-role="page"的元素要與a鏈接中的錨點名稱一致！這樣就能實現一個HTML里切換多個頁面了。

總結

以上是生活随笔為你收集整理的php怎么分割页面,将一个页面分成多个html文件（静态html分割页面）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。