html页面引入公共头部和尾部

蔚落 2022-05-26 07:25 483阅读 0赞

# [如何在HTML不同的页面中，共用头部与尾部？][HTML] #

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

比如下面的代码主页面：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/">Mac</a></li>
          <li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
          <li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
          <li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li>
          <li><a href="http://www.cnblogs.com/jtjds/">Music</a></li>
          <li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></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，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:<script src=’head.js’>和<script src=’foot.js’>调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度，而且方便修改，只要修改一个头部或者底部文件，所有页面的头部或者底部都随之改变，增加了工作效率。

比如：head.js文件------根据上面的head.html，利用转换工具：[http://tool.chinaz.com/Tools/Html\_Js.aspx][http_tool.chinaz.com_Tools_Html_Js.aspx]

html转换为JS:

document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
    document.writeln("<head>");
    document.writeln("<style>");
    document.writeln("</style>");
    document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
    document.writeln("<title></title>");
    document.writeln(" <link href=\'head.css\'  rel=\"stylesheet\" type=\"text/css\" />");
    document.writeln("</head>");
    document.writeln("<body >");
    document.writeln(" <div class=\'miaov_head\'>");
    document.writeln("    <ul>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">iPad</a></li>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Watch</a></li>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Music</a></li>");
    document.writeln("      <li><a href=\"http://www.cnblogs.com/jtjds/\">Contact Us</a></li>");
    document.writeln("    </ul>");
    document.writeln("</div>");
    document.writeln(" ");
    document.writeln("</body>");
    document.writeln("</html>");
    document.writeln("");

以后无论在哪个页面，想调用该头部文件，直接插入head.js文件即可：下面是随便建的一个页面，//MAC.html

**四：****ajax动态拉取填充**

**五：****vue 的组件**

Vue.component('page-footer',{
    	template:`
    		<div class="iPageFooterBtm">
    			这是底部
    			
    		</div>
    	`,
    	data:function(){
    		return{
    			
    		}
    	},
    	methods:{
    		
    	}
    })
    
    var pageFooter = new Vue({
    	el:'#iPageFooter'
    });

引用页：

[HTML]: http://www.cnblogs.com/jtjds/p/5326200.html
[http_tool.chinaz.com_Tools_Html_Js.aspx]: http://tool.chinaz.com/Tools/Html_Js.aspx