不同平臺：pc端靜態html分割頁面，達到類似php等動態頁面的include引入頁面效果；手機端單一HTML5頁面建立多個頁面。

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

如果用HTML，可以實現頁面的分割嗎？答案是肯定的！

兩種方法：

一、通過iframe巢狀頁面

這個方法不介紹啦，用的很普遍

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

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

假設有四個頁面：index.html、page1.html、page2.html、page3.html，其中首頁index.html頁面由page1、page2、page3.html的三個頁面拼接而成。

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

1. <divid="page1"></div>
2. <divid="page2"></div>
3. <divid="page3"></div>

1. $(function(){ 
2.     $('#page1').load('page1.html'); 
3.     $('#page2').load('page2.html'); 
4.     $('#page3').load('page3.html'); 
5. }) 

page1.html頁面的主要程式碼：

1. <h1style="border:1px solid red; width:498px; height:40px; line-height:40px; text-align:center; 
2. background-color:#ddd">我是頁面1</h1>

page2.html頁面的主要程式碼：

1. <h1style="float:left;border:1px solid red; width:248px; height:140px; text-align:center; 
2. background-color:#ddd">我是頁面2</h1>

page3.html頁面的主要程式碼：

1. <h1style="float:left;border:1px solid red; width:248px; height:140px; text-align:center; 
2. background-color:#eee">我是頁面3</h1>

重要說明

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

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

另外，通過js追加進來的DOM結構，對SEO（搜尋引擎優化）有影響，類似百度蜘蛛是無法抓取的！一般情況下不到萬不得已的時候，不推薦使用。

移動端單一HTML建立多個頁面的方法

可能你想要的不是以上這種效果，而是基於移動端的。比如基於移動框架jquery.mobile開發的，那麼在單一 HTML 檔案中建立多個頁面的方法：

1. <divdata-role="page"id="pageone">
2.   <divdata-role="content">
3.     <ahref="#pagetwo">轉到頁面二</a>
4.   </div>
5. </div>
6. <divdata-role="page"id="pagetwo">
7.   <divdata-role="content">
8.     <ahref="#pageone">轉到頁面一</a>
9.   </div>
10. </div>

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