前言
前端开发过程中经常会遇到这样的问题，一个网站的头部侧边栏尾部固定，几乎每个页面都存在，，这时为了做到一次编写，多处使用的效果，我们就会想要去将这部分的代码放在单独的文件中，然后引用这个文件。分享几个楼主工作上遇到过的方法。
- PHP/ASP.NET——include
首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码：
<!– #include file=”head.asp” –> 调用共用底部文件代码是在index.asp文件代码的结束位置（最后一个标记前面）增加如下代码：
<!– #include file=”foot.asp” –>如果是PHP文件，文件名改为 footer.php即可。
- iFrame
<iframe marginwidth="0" marginheight="0" style="margin: 0; padding: 0;" frameborder="0" scrolling="no" src="head.html" height="auto" width="100%"></iframe> head.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 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只设置了全局样式及为了区分的背景色
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的方式缺点在于页面结构的杂乱、不易被搜索引擎搜索、导航链接等等问题，因此，大家普遍寻找其他的替代方法。
- js - document.writeln
制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：
<script src=’head.js’>和<script src=’foot.js’>调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度，而且方便修改，只要修改一个头部或者底部文件，所有页面的头部或者底部都随之改变，增加了工作效率。
比如：head.js文件——根据上面的head.html，利用转换工具：转换工具
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>"); <!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等样式，继续寻找有无更好方法
- js - ajax
用 JavaScript 填充內容，所有的页面都有：
<div id="header"></div>
<div id="footer"></div>
<script type="text/javascript" src="loader.js">loader.js ：
document.getElementById("header").innerHTML = "....";
document.getElementById("footer").innerHTML = "....";- jquery - load方法(内部ajax+html)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>把头部和尾部通过jquery加载进页面</title>
<style>
body{text-align: center;}
</style>
</head>
<body>
<!--放一个id为header的div,把header.html加载到这块-->
<div id="header"></div>
<div class="main" style="width:100%;padding:100px 0;background:#dcdcdc;">
<h1>我是主体</h1>
</div>
<!--放一个id为footer的div,把footer.html加载到这块-->
<div id="footer"></div>
<!--利用jquery的load()方法把header.html和footer.html加载进来 -->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
$(function() {
$('#header').load('common/header.html');
$('#footer').load('common/footer.html');
})
</script>
</body>
</html>- 模板继承
利用xtemplate等模版引擎的模版继承方法，可以让你更容易的来复用模板。
xtemplate中文文档
layout.xtpl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
header {
color: blue;
}
</style>
</head>
<body>
<header>
<h1>我是头部</h1>
</header>
{{{block ('zhanweifu')}}}
<footer>
<h1>我是底部</h1>
</footer>
</body>
</html>index.xtpl
{{extend ('./layout')}}
{{#block ('zhanweifu')}}
<h1>这是首页面</h1>
{{/block}}
cate.xtpl
{{extend ('./layout')}}
{{#block ('zhanweifu')}}
<h1>分类页content</h1>
{{/block}}