如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)
文章目录
- 如何实现多个.html静态页,引用同一个header.html和footer.html文件?
- HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?
- 首先,先看一下代码与界面的划分,效果示意图如下:
- 然后,看一下head.html文件,全部代码示下:
- 其次,看一下footer.html文件,全部代码示下:
- 最后,看一下index.html文件,全部代码示下:
- 通过上面的描述,可以发现:
- 值得注意的是:
如何实现多个.html静态页,引用同一个header.html和footer.html文件?
- 静态html文件,使用公共头部和尾部的解决办法之一
- 前端静态
html页面
,封装公共的头文件(header:
顶部页眉,顶部导航栏等部分)和尾部文件(footer:
CopyRight、友情链接等部分)
HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?
因保密等诸多因素,线上项目运行效果,暂不推荐大家观看,敬请谅解。
本次实例为临时花了几分钟手写的,下面就来讲一下常用的方法:
当前方法:通过load()函数,引入公共头部和尾部文件;
代码预览:
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
首先,先看一下代码与界面的划分,效果示意图如下:
然后,看一下head.html文件,全部代码示下:
<!-- 页眉 共通 --> <div class="header"><div class="htmargin"><div class="fl"><i class="htphone"></i><span class="htfont">咨询电话:</span><i class="telphone">0123-123456</i><span class="htfont"> (工作日9:00-17:30)</span><span class="headerwx"><a class="htheader htwx"></a><div class="htwx"><div class="httext"><span>扫码关注官方公众号</span><i></i></div></div></span><span class="headerwb"><a class="htheader htwb"></a><div class="htwb"><div class="httext"><span>在线咨询QQ客服</span><div class="htwb-link"><a href="" class="htwb-link-font">@在线客服</a></div></div></div><i></i></span></div><div class="fr item-list"><ul class="htul"><li class="htli" id="loginOut" style="display:none"><a onclick="javascript:doLogout();" class="httitle">退出</a></li><!--用户名--><li class="htli" id="htName-li" style="display:none"><a href="#" class="httitle " id="htName"></a></li><!--<li class="htli" id="htRegister"><a href="register.html" class="httitle loginout">注册</a></li>--><li class="htli" id="htLogin"><a href="#" class="httitle">登录</a></li><li class="htli"><a href="" class="httitle">关于我们</a></li><li class="htli"><a href="" class="httitle">帮助中心</a></li><li style="height: 36px;float: right;text-align: center;"><span class="httitle-top-txt">推荐有惊喜 好礼拿不停</span></li></ul></div></div></div><div class="jpt-nav"><input type="hidden" id="top_login" /><div class="htmargin"><div class="nav fl"><a href="" style="overflow:hidden;display:block;"><i class="logo"></i><!--<i class="jpt-logo-right"></i>--></a></div><div class="nav-wrap fr" style="position:relative"><ul class="group" id="example-one"><li class="index"><a href="">首页</a></li><li class="product"><a href="">全部商品</a></li><li style="float:right;" class="self"><a style="cursor:pointer;" href="">我的账户</a></li><li class="mae" id="mae" style="width: 86px; left: 0px;"></li></ul></div></div></div> <!-- 页眉 共通 --><script src="js/public_share_code.js"></script>
其次,看一下footer.html文件,全部代码示下:
<!-- S 页脚共通 --><div class="btmpage" style="margin-top: 48px;"> <div class="div-btm "> <div class="pro-tolo"> <div class="div-btm-left"> <a href="" target="_blank" class="btm">关于我们</a> <a href="" target="_blank" class="btm">全部商品</a> <a href="" target="_blank" class="btm">帮助中心</a> <a href="" target="_blank" class="btm">加入我们</a> <a href="" target="_blank" class="btm">联系我们</a> <a href="" target="_blank" class="btm">意见反馈</a> <span class="divpc-contact">中国北京市 联系方式 <br />电话:+86-0551-65522006 邮箱:123456@123.mail<br />地址:中国北京新城区XX写字楼1楼101~106</span> </div> <div class="div-btm-center"> <div class="div-btm-reph"> <span class="divpc-contact-top">客服热线1:0123-87654321 <i class="btm-time"> 工作日9:00-17:30</i><br />客服热线2:0123-12345678 <i class="btm-time"> 工作日9:00-17:30</i><br />QQ客服:123456789</span> <i class="div-right-qq"><a href="" class="divpc-online onlineChat">在线客服</a></i> <div class="c"></div></div> </div> <div class="div-btm-right"> <span class="gz"><i class="khd"></i><span class="ph-gzh">微信学习群</span></span> <span class="gz"><i class="gzh"></i><span class="ph-gzh">官方公众号</span></span> </div><div class="c"></div> </div> <div class="div-btm-info"> <div class="div-btm-gg" style="display: none;"> <a target="_blank" class="div-btm-pic"><i class="wangxin"></i></a> <a target="_blank" class="div-btm-pic"><i class="kx"></i></a> <a target="_blank" class="div-btm-pic"><i class="gt"></i></a> <a target="_blank" class="div-btm-pic"><i class="360"></i></a> <a target="_blank" class="div-btm-pic"><i class="icp"></i></a> <a target="_blank" class="div-btm-pic"><i class="djcp"></i></a> <a target="_blank"><img src="data:images/ebsIcon.png" title="" alt="" width="32" height="45" border="0" style="border-width:0px;border:hidden; border:none;" /></a><a class="c"></a> </div><div class="c"></div> <div class="copyright">Copyright © 2012-2018 www.123456.com All Rights Reserved | 生态家装公司<span> | <a style="color:#4e5158;" href="" target="_blank">京ICP备123456789号</a></span></div> </div> </div></div>
最后,看一下index.html文件,全部代码示下:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>demo演示</title><link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over--> <!--中部主体--> <p>···代码省略···</p>
<!--中部主体 over--> <!--footer-->
<div class="footerpage"></div>
<!--footer over--><script src="js/jquery.min.js"></script>
<script>$(function(){/*公共部分* 导航栏* footer CopyRight*/$(".headerpage").load("header.html");$(".footerpage").load("footer.html");});
</script>
</body>
</html>
通过上面的描述,可以发现:
在
header.html
和footer.html
文件中,并非是标准的html文档格式
!
与此同时,通过index.html
中的jQuery函数
load()
将上述的两个公共文件引入进来,从而形成一个完整的页面;
并且,不会影响到其他页面对于公共文件的引用和使用;
值得注意的是:
在静态文件:
header.html
的页眉代码中,有一段代码:
<script src="js/public_share_code.js"></script>
这段代码,必须在header.html
中引入!
否则,关于导航栏最顶部的页眉中mousehover()
微信图标,JS悬浮显示微信二维码的效果,将会失效!
其他方法,不再具体赘述。
以上就是关于“静态html文件,使用公共头部和尾部的解决办法之一”的全部内容。
如何让html引用公共的头部和尾部(多个html文件公用一个header.html和footer.html)相关推荐
- html js引入位置,JavaScript | 文件引入位置的讲究,在文件头部和尾部哪里引入JS文件更好?...
JS放在文件头部还是尾部 HTML5学堂:JavaScript文件的引入方式与CSS引入方式类似,但是外引的JS文件可以放置在html文件的任意地方,JS文件放置在头部或者底部有何不同呢?或者说,放置 ...
- Android 给RecyclerView添加头部和尾部
之前我在GitHub上开源了一个可以实现RecyclerView列表分组的通用Adapter: GroupedRecyclerViewAdapter.也在博客上写了一篇专门介绍它的实现和使用的文章:& ...
- html注释引用公共头部_HTML注释和引用
html注释引用公共头部 HTML注释 (HTML Comments) To insert a comment in an HTML document, the comment tags are us ...
- html页面怎么引用通用的头部,html 如何引入一个公共的头部和底部
html 静态页面中引用外部页面没那么方便,主要方法有: asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是index.asp,调用头部代码是在i ...
- vue引用公用的头部和尾部文件。
我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...
- Thymeleaf选择器引用公共片段
引用公共片段 可以使用选择器,引用公共片段 ~{templatename::selector} 模板名::选择器 侧边栏 设置一个id属性 <!--sidebar--> <nav c ...
- 小程序引用公共js,不看可惜了!!
转载:微信小程序如何引用公共js - 移动开发 - 亿速云 感谢博主,解决了我的问题,分享给大家!! 有转载相关问题,请私信我! 马上就删 博主原文 这篇文章主要介绍了微信小程序如何引用公共js,具有 ...
- html引入公共的头部,导航栏,尾部
个人分类: HTML5 很不错的文章,讲解html引入公共的头部,导航栏,尾部的很仔细_ 一.asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是i ...
- 京东项目之头部和尾部
京东项目之头部和尾部 花了一天时间写京东首页的头部和尾部,小细节真的太多了,这里附上代码: html部分: <!DOCTYPE html> <htmllang="en&qu ...
最新文章
- 张亚勤:对于产业来讲,深度学习的黄金时代刚刚开始
- 利用jmap和MAT等工具查看JVM运行时堆内存
- 基于FFmpeg H264 + G711A 音视频裸流合并 MP4文件 ( G711A 转 AAC)
- python基础入门:bytes 和 string转换的方法
- SpringBoot+gradle+idea实现热部署和热加载
- (转)iOS里面Frameworks介绍
- 弱水三千 之 统计独立性、统计相关性辨析
- [转载]Qt之模型/视图(自定义风格)
- ssh远程登录Jupyter notebook(七月GPU服务器)
- Administration interface
- 图像处理基础:特征金字塔
- 无损音乐下载器 Delphi版
- 算法笔记学习day1(第二章)
- word到处html分页,请问如何把做好的word分页导出为html格式
- 通过简单实例讲解QQ开放平台登录原理
- Es7.x使用RestHighLevelClient进行聚合操作
- 西瓜视频运营策略分析:借助平台优势实现内容升级
- soho新工作 新娘秘書
- sentinel中黑白名单
- 【stm32f407】时钟树以及SystemInit剖析
热门文章
- 快应用quickapp快速入门教程 by五个半柠檬
- C++ 之const的使用
- PHP JSON文件解析并获取key、value,判断key是否存在
- New Currency Rate IOS APP 上线
- FckEditor配置详解
- 风压和功率计算公式轴流式_水泵和风机的功率计算及风量、风压的附加系数
- 信息学奥赛一本通 1128:图像模糊处理 | OpenJudge NOI 1.8 13:图像模糊处理
- OpenJudge NOI 1.2 05:填空:类型转换2
- 信息学奥赛一本通 1096:数字统计 | 1949:【10NOIP普及组】数字统计 | OpenJudge NOI 1.5 41
- 信息学奥赛一本通(2061:【例1.2】梯形面积)