用html如何把页面分割成多个文件,由多个文件拼接而成?
来源:互联网 发布:javascript json 数组 编辑:程序博客网 时间:2024/04/24 19:24
不同平台:pc端静态html分割页面,达到类似php等动态页面的include引入页面效果;手机端单一HTML5页面创建多个页面。
用html把首页分成三个文件
在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):
- <div id="page1"></div>
- <div id="page2"></div>
- <div id="page3"></div>
jquery的load()方法:载入远程 HTML 文件代码并插入至 DOM 中,默认使用GET方式
- $(function(){
- $('#page1').load('page1.html');
- $('#page2').load('page2.html');
- $('#page3').load('page3.html');
- })
load(url,data,callback)
参数说明:
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
page1.html页面的主要代码:
- <h1 style="border:1px solid red; width:498px; height:40px; line-height:40px; text-align:center;
- background-color:#ddd">我是页面1</h1>
page2.html页面的主要代码:
- <h1 style="float:left;border:1px solid red; width:248px; height:140px; text-align:center;
- background-color:#ddd">我是页面2</h1>
page3.html页面的主要代码:
- <h1 style="float:left;border:1px solid red; width:248px; height:140px; text-align:center;
- background-color:#eee">我是页面3</h1>
重要说明
通过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里切换多个页面啦!
- 用html如何把页面分割成多个文件,由多个文件拼接而成?
- 用html如何把页面分割成多个文件,由多个文件拼接而成?
- 简化html,把页面分割成多个文件
- 将一个页面分成多个html文件(静态html分割页面)
- 如何把html文件快速转换成JSP文件
- 多个文件文件的拼接
- 在HTML页面中如何实现多个文件同时下载
- 如何让一个label显示多种颜色,多种字体大小,并非多个label拼接而成。
- Python合并(拼接)多个CSV文件
- 如何写可以不提交服务器而把输入内容保存在本机的HTML文件
- 把汇集多个json文件的txt进行分割,然后批量修改文件名后缀
- 如何不刷新页面而刷新页面中某个文件
- 把html页面的部分内容保存成新的html文件
- 把html页面的部分内容保存成新的html文件的jquery代码
- 把多个文件打包压缩成ZIP文件
- 八、将 程序 分割成 多个文件
- 把Html页面转化为简单的Markdown文件
- 用汇编写个文件分割器
- org.springframework.web.servlet.DispatcherServlet noHandlerFound
- java cookies详解
- 查看tcp/udp端口占用命令
- libxml2库函数详解
- Scrapy引擎
- 用html如何把页面分割成多个文件,由多个文件拼接而成?
- Linux 系统裁剪笔记 4 (内核配置选项及删改)
- mysql 远程访问-权限
- RecyclerView配合SwipeRefreshLayout实现下拉刷新以及实现上拉加载更多
- 数据库水平切分的实现原理解析——分库,分表,主从,集群,负载均衡器(转)
- Tmux 使用说明
- 对虚拟地址和物理地址的理解
- MATLAB阈值获取函数ddencmp、thselect、wbmpen和wwdcbm,阈值去噪的函数wden、wdencmp、wthresh、wthcoef、wpthcoef以及wpdencm的
- 滑动条的创建与使用