用html如何把页面分割成多个文件，由多个文件拼接而成

用html把首页分成三个文件

通过load()方法拼接html页面

在PHP、JSP等动态页面开发中，页面里引入其它页面只需include()进来就可以实现页面的分离。

如果用HTML，可以实现页面的分割吗？答案是肯定的！

两种方法：

一、通过iframe嵌套页面

这个方法不介绍啦，用的很普遍

二、通过AJAX方**oad载入页面

通过jQuery的load()方法载入页面

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

index.html页面的主要代码（含js）：

$(function(){ 
    $('#page1').load('page1.html'); 
    $('#page2').load('page2.html'); 
    $('#page3').load('page3.html'); 
}) 

jquery的load()方法：载入远程 HTML 文件代码并插入至 DOM 中，默认使用GET方式 load(url,data,callback) 参数说明： url:待装入 HTML 网页网址。 data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。 callback:载入成功时回调函数。

page1.html页面的主要代码：

background-color:#ddd">我是页面1 

page2.html页面的主要代码：

background-color:#ddd">我是页面2 

page3.html页面的主要代码：

background-color:#eee">我是页面3 

重要说明

通过load()方法载入的页面，需要**好css样式，这样才能达到完整的页面显示效果。

可以先在一个页面里写好html+css，然后再分离出去，最后用load()载入进来即可！

另外，通过js追加进来的DOM结构，对SEO（搜索引擎优化）有影响，类似百度蜘蛛是无法抓取的！一般情况下不到万不得已的时候，不推荐使用。

原创文章转载请注明出处！原文链接：https://www.exp99.com/fangan/f2e/qianduanfangan_222.html

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

 

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z