时间：2021-07-01 10:21:17 帮助过：38人阅读
– #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 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.htm” height=“auto” width="100%">iframe>
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”foot.htm” height="auto" width="100%">iframe>
比如下面的代码主页面：index.html
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title>
<link href='head.css' rel="stylesheet" type="text/css" />
<script type="text/javascript">
script>
head>
<body >
//主页面index.html
<div class='miaov_head'>
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" width="100%" height="auto">
iframe>--------这里调用head.html页面，需要使用div包起来，否则样式会发生改变
div>
body>
html>
单独存放的head.html代码如下：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title>
<link href='head.css' rel="stylesheet" type="text/css" />
head>
<body >
<div class='miaov_head'>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Maca>li>
<li><a href="http://www.cnblogs.com/jtjds/">iPada>li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhonea>li>
<li><a href="http://www.cnblogs.com/jtjds/">Watcha>li>
<li><a href="http://www.cnblogs.com/jtjds/">Musica>li>
<li><a href="http://www.cnblogs.com/jtjds/">Contact Usa>li>
ul>
div>
body>
html>
css样式代码如下：
*{margin:0;padding:0;}
body{background:white;position:relative;height:100%;color: #777;font-size: 13px;}
img{border:none;display:block;}
li{list-style:none;text-decoration: none;}
.miaov_head{height:36px;width:100%;margin:0 auto;background: black;margin-bottom: 0px;}
.miaov_head img{width: 30px ;height: 30px;margin-top: 0;margin-left: 130px;}
.miaov_head ul{float: left;width:900px;height: 36px;margin-top: 0px;color: white;position: absolute;top: 0px;margin-left: 200px;}
.miaov_head ul li{float: left;padding-left: 80px;margin-left: 0px;color: white;list-style: none; }
.miaov_head ul li a{color: white;font-size: 14px;text-decoration: none;}
.miaov_head input{position: absolute;top: 5px;margin-left: 1000px;width: 200px;height: 22px;}
.miaov_head a{line-height:36px;color:#777;}
.miaov_head a:hover{color:#555;}
三、script语言--推荐这种
制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:
以后无论在哪个页面，想调用该头部文件，直接插入head.js文件即可：下面是随便建的一个页面，//MAC.html
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title>
<script type="text/javascript" src="head.js">script>-------------------这里调用head.js
head>
<body >
body>
html>
四：shtml文件
1：使用ssi技术页面生成shtml文件，只用在头部文件位置加入，然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好，需要处理的文件在服务器端完成的， 不会加重访问者的浏览器负担。
五：本地合并
即将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页面中，引入头部和尾部的文件的方法就这么多，列举了一些，其它的感兴趣的可自行钻研。