將一個頁面分成多個html文件（靜態html分割頁面）

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

用html把首頁分成三個文件

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

如果用HTML，也是可以實現頁面的分割的。

兩種方法：

一、通過iframe嵌套頁面

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

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

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

index.html頁面的主要代碼（含js）：

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
lt;script>
$(function(){
    $('#header').load('header.html');
    $('#content').load('content.html');
    $('#footer').load('footer.html');
})
lt;/script>

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文件中創建多個頁面的方法：

<div data-role="page" id="pageone">
    <div data-role="content">
        <a href="#pagetwo">轉到頁面二</a>
    </div>
</div>
<div data-role="page" id="pagetwo">
    <div data-role="content">
        <a href="#pageone">轉到頁面一</a>
    </div>
</div>

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