静态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）：

<div id="header"></div>  
<div id="content"></div>  
<div id="footer"></div>  
<script>  
$(function(){  
    $('#header').load('header.html');  
    $('#content').load('content.html');  
    $('#footer').load('footer.html');  
})  
</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里切换多个页面了。