纯静态网站html文件header和footer部分模块化调用问题，首页index.html文件修改
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯静态网站html文件header和footer部分模块化调用问题，首页index.html文件修改相关的知识，希望对你有一定的参考价值。
做一个完全静态的网站，header部分和footer部分需要不断重复（为相同内容，未来维护更新方便）所以考虑将header部分和footer部分做成两个header.html 和 footer.html文件（php\asp文件也可以，满足后面描述的环境要求就可以），然后在index.html 、news.html 、About.html等文件中调用
以下面的一个实例修改
7xlgaq.com1.z0.glb.clouddn.com
首页源码：7xlgaq.com1.z0.glb.clouddn.com /index.html
网站源码打包下载地址： pan.baidu.com/s/1o6ipyNw
如果有更好的实现方案同样可以采纳。
PS:架设环境说明
我目的是要做一个企业展示站，除了SEO文章推广需要1~2次/天的更新，其他没有更新内容
考虑到 1.是容易被同行攻击的行业，静态漏洞少
2.百度云加速对动态站加速内容少，对静态网站效果好，所以使用纯静态站
百度知道规定了一个问题最高只能赏200分，采纳者我另外送200分吧，谢谢了
下面那个朋友的方法 不知道是不是我没有加对地方还是怎么滴，没有把保存的header.html调用出来，还请知道的朋友补个刀
静态页面放在服务器上是可以使用ajax的。你可以单独把公共文件分离出来，然后各个页面ajax这个公共文件（比如头）
如果你完全不想发任何请求，你可以把头写在js文件里，就是把头部的html整个拼成一个字符串，负值给一个变量，然后页面引用这个js把变量插到body你想放的位置中就行了
1.上面两种方案那种对屏幕宽度自适应的方案更加友好？
2.自学代码的小白，没语言功底，只会用浏览器的“审查元素”功能边摸索边改，所以烦请大神修改出index.html和相对应的js文件或者方案1的ajax
首先你把头部的html摘出来 另存一份文件比如叫 header.html
然后在你原来放头部html代码的地方写如下代码
<div id="myheader"></div>然后再在 head 里 引入以下js
<!-- 这个是jquery 你可以替换成你本地的jquery --><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!-- 这个是ajax加载头部 -->
<script type="text/javascript">
$(function()
$("#myheader").load("header.html"); //header和其他静态页放同一目录下
)
</script>追问
是这样改吗？ 但改完不正常哎，方便请教下 能加个QQ么 522830704
<head>
<div id="myheader"></div>
<script type="text/javascript" src="<a ……
…………………………………………
$("#myheader").load("header.html");
)
</script>
</head>
哥
这已经是最基本的html知识了
没法再讲的更简单了
百度这个热心网友到底是什么鬼？
追答^ω^
如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
如何实现多个.html静态页，引用同一个header.html和footer.html文件？
直接上代码：
公共头部文件：header.html
//不用写标准的html文档格式 <div> 头部内容 </div>
公共尾部文件：footer.html
//不用写标准的html文档格式 <div> 页脚内容 </div>
js文件：
当前方法：通过load()函数，引入公共头部和尾部文件; 代码预览： $(".headerpage").load("header.html"); $(".footerpage").load("footer.html");
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()将上述的两个公共文件引入进来，从而形成一个完整的页面； 并且，不会影响到其他页面对于公共文件的引用和使用；
以上就是关于静态html文件，使用公共头部和尾部的解决办法之一。
以上是关于纯静态网站html文件header和footer部分模块化调用问题，首页index.html文件修改的主要内容，如果未能解决你的问题，请参考以下文章
如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
ThinkPHP如何给网页加公共的header文件和footer文件