<iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="no" src="head.html" height="70" width="100%"></iframe> 一、asp语言和PHP语言
首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码：
<!– #include file=”head.asp” –>
调用共用底部文件代码是在index.asp文件代码的结束位置（最后一个标记前面）增加如下代码：
<!– #include file=”foot.asp” –>
如果是PHP文件，文件名改为 footer.php即可。
二、html语言
制作一个共用头部文件head.htm或一个共用底部文件foot.htm。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码：
<iframe marginwidth="0" marginheight="0" style="margin: 0; padding: 0;" frameborder="0" scrolling="no" src="head.html" height="auto" width="100%"></iframe>head.html（为了方便测试和实践，直接用了boostrap，避免去写太多样式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="second.html">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div><iframe src="head.html" frameborder="0" framespacing="0" width="100%" height="40" style="margin: 0; padding: 0;"></iframe></div>
<div class="container clearfix">
<div class="pull-left hih400 bluebg">左边</div>
<div class="pull-right hih400 greybg">右边</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
index.css只设置了全局样式及为了区分的背景色
html,body{height: 100%;}
body { margin: 0; padding: 0; font-family:"Microsoft Yahei",Arial,sans-serif; /*background: #f4f4f4;*/ }
table,td,tr,th{ font-size: 12px; }
ol,ul { list-style: none; }
li{ list-style-type: none; }
address,cite,code,em,th,i{ font-weight: normal; font-style: normal; }
.hx a,.hx em,.fB{ font-weight: bold; }
a{outline:none;blr:expression(this.onFocus=this.blur());}
a:focus{outline: none;}
.hih400{height: 400px;width: 50%;}
.bluebg{background: lightskyblue;}
.greybg{background: honeydew;}
使用iframe嵌套页面，此类方法出现的问题：
1、iframe，height设置为auto，如果头部有下拉菜单，iframe的高度过高，下方会出现一块空白；
如果将height设置为固定高度，下方还是有大约5px的空白，我已经设置padding及margin为0 ，仍有空白，此时唯一解决办法是将头部下方div加margin-top:-5px
2、添加第二个页面，seconde.html。点击导航，页面出现跳转，但是是在ifram内进行的跳转，地址栏内地址未变，且跳转后页面被index.html页面遮挡。并且尝试调整公用头部iframe的z-index属性，仍未作用
经测试此方法不太奏效，如果其它同学有好的可以教下我，谢谢
三、script语言--推荐这种
制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:<script src=’head.js’>和<script src=’foot.js’>调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度，而且方便修改，只要修改一个头部或者底部文件，所有页面的头部或者底部都随之改变，增加了工作效率。
比如：head.js文件------根据上面的head.html，利用转换工具：http://tool.chinaz.com/Tools/Html_Js.aspx
html转换为JS:
document.writeln("<div class=\'container\'>");
document.writeln(" <ul class=\'nav nav-pills nav-justified\'>");
document.writeln(" <li class=\'active\'><a href=\'index.html\'>Home</a></li>");
document.writeln(" <li><a href=\'index.html\'>SVN</a></li>");
document.writeln(" <li><a href=\'second.html\'>iOS</a></li>");
document.writeln(" <li><a href=\'#\'>VB.Net</a></li>");
document.writeln(" <li><a href=\'#\'>Java</a></li>");
document.writeln(" <li><a href=\'#\'>PHP</a></li>");
document.writeln(" </ul>");
document.writeln(" </div>");以后无论在哪个页面，想调用该头部文件，直接插入head.js文件即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--此处引用head.jd-->
<script src="js/head.js"></script>
<div class="container clearfix">
<div class="pull-left hih400 bluebg">左边</div>
<div class="pull-right hih400 greybg">右边</div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
亲测此方法较上面的方法来说更为可靠，页面未出现多余的空白等，且支持到IE8
唯一缺陷：无法实现，当前页面导航点亮，当前页面导航加active或者on等样式，继续寻找有无更好方法
四：shtml文件
1：使用ssi技术页面生成shtml文件，只用在头部文件位置加入<!--#include file="header.htm" -->，然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好，需要处理的文件在服务器端完成的， 不会加重访问者的浏览器负担。
需要再服务器上配置SSI功能
五：本地合并
即将HTML硬拆成头、尾、内容三个部分的文件，在预览或者发布之前用脚本手工合并。很久以前用过，没有后台的时候使用效果不错。
六：ajax动态拉取填充
七：web服务器（比如IIS）中设定包含
比如我们说的SSI，文档后缀名是.shtml的就可以使用include包含。
SSI（Server Side Include)，通常称为"服务器端嵌入"或者叫"服务器端包含"，是一种类似于ASP的基于服务器的网页制作技术。默认扩展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中，可以通过注释行调用的命令或指针，SSI具有 强大的功能，只要使用一条简单的SSI命令就可以实现整个网站的内容更新，时间和日期的动态显示，以及执行shell和CGI脚本程序等复杂的功能。
八：后台模板引擎处理（字符串拼接）
九：用图片、flash等外部资源做---不推荐，比较麻烦
十：angular js里的<ng-include>的使用
差不多在静态的html页面中，引入头部和尾部的文件的方法就这么多，列举了一些，其它的感兴趣的可自行钻研。
其它待研究方法：
2.有后端语言环境的（PHP, JSP, ASP）的，用后端语言引入
3.只是单纯的做静态页面（html, js, css）, 那么你要利用nodejs的模板引擎
- Dust.js
- Embedded JS (ejs)
- Handlebars
- Hogan.js
- Jade
- Mustache
- Nunjucks
- Swig (Note: no longer maintained)
推荐个如何使用模板引擎的文章（博主是用Nunjucks来介绍的）
How to Modularize HTML Using Template Engines and Gulp
模板引擎不一定要配合后端才能用。
用gulp、webpack等工具都可以很方便的使用node的模板引擎来写html。
大部分模板应该都有继承、引用模块的功能。
写个通用的header、footer是很容易的。
比如用jade:
main.jade
.
.
.
body
block header
header
div.container 顶部
block content
div#content 内容
block footer
footer
div.container 底部 a.jade
extends main.jade
block content
div#content a的内容
扫一扫
1787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
