*制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度，而且方便修改，只要修改一个头部或者底部文件，所有页面的头部或者底部都随之改变，增加了工作效率。
**head.js文件——根据上面的head.html，利用转换工具：http://tool.chinaz.com/Tools/Html_Js.aspx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>head</title>
</head>
<body>
<div class="top">
<div class="top-con clearfix">
<div class="container">
<div class="logo col-xs-3">
<img src="image/logo.png" alt="" title="">
</div>
<div class="dropdown visible-xs pull-right">
<button class="btn btn-default" data-toggle="dropdown">
<span><img src="image/nav_ico.png" width="22" height="18" alt="" title=""></span>
导航栏
</button>
<ul class="dropdown-menu text-center list-inline">
<li><a href="index.html" style="color: #086194">首页</a></li>
<li><a href="service.html"> 服务</a></li>
<li><a href="programme.html">方案</a></li>
<li><a href="news.html"> 资讯</a></li>
<li><a href="about.html"> 关于</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
<div class="col-sm-9 hidden-xs">
<ul class="list-unstyled list-inline text-right ">
<li><a href="index.html" style="color: red;border-bottom: 2px solid red">首页</a></li>
<li><a href="service.html">服务</a></li>
<li><a href="programme.html">方案</a></li>
<li><a href="news.html">资讯</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-----------------以上是头部内容------------>
</body>
</html>
压缩成 下面
document.writeln("<!DOCTYPE html>");
document.writeln("<html lang=\'en\'>");
document.writeln("<head>");
document.writeln(" <meta charset=\'UTF-8\'>");
document.writeln(" <title>head</title>");
document.writeln("</head>");
document.writeln("<body>");
document.writeln("<div class=\'top\'>");
document.writeln(" <div class=\'top-con clearfix\'>");
document.writeln(" <div class=\'container\'>");
document.writeln(" <div class=\'logo col-xs-3\'>");
document.writeln(" <img src=\'image/logo.png\' alt=\'\' title=\'\'>");
document.writeln(" </div>");
document.writeln(" <div class=\'dropdown visible-xs pull-right\'>");
document.writeln(" <button class=\'btn btn-default\' data-toggle=\'dropdown\'>");
document.writeln(" <span><img src=\'image/nav_ico.png\' width=\'22\' height=\'18\' alt=\'\' title=\'\'></span>");
document.writeln(" 导航栏");
document.writeln(" </button>");
document.writeln(" <ul class=\'dropdown-menu text-center list-inline\'>");
document.writeln(" <li><a href=\'index.html\' style=\'color: #086194\'>首页</a></li>");
document.writeln(" <li><a href=\'service.html\'> 服务</a></li>");
document.writeln(" <li><a href=\'programme.html\'>方案</a></li>");
document.writeln(" <li><a href=\'news.html\'> 资讯</a></li>");
document.writeln(" <li><a href=\'about.html\'> 关于</a></li>");
document.writeln(" <li><a href=\'#\'>论坛</a></li>");
document.writeln(" </ul>");
document.writeln(" </div>");
document.writeln(" <div class=\'col-sm-9 hidden-xs\'>");
document.writeln(" <ul class=\'list-unstyled list-inline text-right \'>");
document.writeln(" <li><a href=\'index.html\' style=\'color: red;border-bottom: 2px solid red\'>首页</a></li>");
document.writeln(" <li><a href=\'service.html\'>服务</a></li>");
document.writeln(" <li><a href=\'programme.html\'>方案</a></li>");
document.writeln(" <li><a href=\'news.html\'>资讯</a></li>");
document.writeln(" <li><a href=\'about.html\'>关于</a></li>");
document.writeln(" <li><a href=\'#\'>论坛</a></li>");
document.writeln(" </ul>");
document.writeln(" </div>");
document.writeln(" </div>");
document.writeln(" </div>");
document.writeln("</div>");
document.writeln("<!-----------------以上是头部内容------------>");
document.writeln("</body>");
document.writeln("</html>");
调用下
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>***</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/master.css" rel="stylesheet">
<script src="js/head.js"></script>
</head>
“`
这就可以了简单方便，还有好多方法感觉这只是最简单。