网站中公用头部与尾部？

一、asp语言和PHP语言

首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，标记前面）增加如下代码：

–  #include file=”head.asp”    –> 

调用共用底部文件代码是在index.asp文件代码的结束位置（最后一个标记前面）增加如下代码：

–     #include file=”foot.asp”    –>

 

如果是PHP文件，文件名改为 footer.php即可。

二、html语言
制作一个共用头部文件head.htm或一个共用底部文件foot.htm。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码：

head.html（为了方便测试和实践，直接用了boostrap，避免去写太多样式）

	
		
		
		
		
		
    	
    	
	
	
	

		

		  
Home
		  
SVN
		  
iOS
		  
VB.Net
		  
Java
		  
PHP
		
	
		
		
		
	

index.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，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:

左边

右边

亲测此方法较上面的方法来说更为可靠，页面未出现多余的空白等，且支持到IE8

唯一缺陷：无法实现，当前页面导航点亮，当前页面导航加active或者on等样式，继续寻找有无更好方法

四：shtml文件

   1：使用ssi技术页面生成shtml文件，只用在头部文件位置加入，然后修改的时候只要修改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里的的使用

 差不多在静态的html页面中，引入头部和尾部的文件的方法就这么多，列举了一些，其它的感兴趣的可自行钻研。

其它待研究方法：

1.用html(html5)自带的标签引入，其他回答者已经回答的很好了
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)
  

以上都是按照字母排序，不按使用量排序，其中Jade是目前使用量最多的模板引擎
推荐个如何使用模板引擎的文章（博主是用Nunjucks来介绍的）
How to Modularize HTML Using Template Engines and Gulp

2、

模板引擎不一定要配合后端才能用。
用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的内容