如何在HTML不同的页面中，共用头部与尾部？HTML的引入几种方法

时间：2025-02-09 07:28:16

  • asp语言和PHP语言 的使用 

  • 首先制作一个头部文件，或者一个底部文件。如主页是，调用头部代码是在文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码：
<!–  #include file=””    –>

  

  • 调用共用底部文件代码是在文件代码的结束位置（最后一个标记前面）增加如下代码：
<!–     #include file=””    –>

  

  • 如果是PHP文件，文件名改为 即可 

  • html语言 的使用

  • 制作一个共用头部文件或一个共用底部文件。如主页文件是，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码：
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”” height=“auto” width="100%"></iframe>

  

<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”” height="auto" width="100%"></iframe>
  •  主页面：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

</head>
<body >
	--------调用内容调用内容调用内容------------- 
	<div class='miaov_head'>
		<!--这里调用页面，需要使用div包起来，否则样式会发生改变-->
	   <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="" width="100%"  height="auto"></iframe>
	   
	</div>
</body>

  

  • 单独存放的代码
<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
 	<link href=''  rel="stylesheet" type="text/css" />
	<style type="text/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;}
	</style>
</head>
<body >
	
	<div class='miaov_head'>
	    <ul>
	      <li><a href="">我是head</a></li>
	      <li><a href="">我是head</a></li>
	      <li><a href="">我是head</a></li>
	      <li><a href="">我是head</a></li>
	      <li><a href="">我是head</a></li>
	      <li><a href="">我是head</a></li>
	    </ul>
	</div>
 
</body>
</html>

  

  • script语言--推荐这种

  • 制作一个共用头部文件和一个共用底部文件。如主页文件是，调用头部和底部文件的方法是：在主页文件代码的开始位置和结束位置分别增加下面的代码:<script src=’’>和<script src=’’>调用共同的网页头部或者网页底部，减少了每个页面都要编写头部或底部的复杂程度，而且方便修改，只要修改一个头部或者底部文件，所有页面的头部或者底部都随之改变，增加了工作效率。
  •  比如：文件------根据上面的，利用转换工具：/Tools/Html_Js.aspx
  •  html转换为JS:

 

("<!DOCTYPE html>");
("<head>");
("<style>");
("</style>");
("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
("<title></title>");
(" <link href=\'\'  rel=\"stylesheet\" type=\"text/css\" />");
("</head>");
("<body >");
(" <div class=\'miaov_head\'>");
("    <ul>");
("      <li><a href=\"这里放链接/\">我是js方法</a></li>");
("      <li><a href=\"这里放链接/\">我是js方法</a></li>");
("      <li><a href=\"这里放链接/\">我是js方法</a></li>");
("      <li><a href=\"这里放链接/\">我是js方法</a></li>");
("      <li><a href=\"这里放链接/\">我是js方法</a></li>");
("      <li><a href=\"这里放链接/\">我是js方法</a></li>");
("    </ul>");
("</div>");
(" ");
("</body>");
("</html>");
("");

  

  • 以后无论在哪个页面，想调用该头部文件，直接插入文件即可：如下
<!DOCTYPE html>
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <script type="text/javascript" src=""></script>------这里调用
</head>
<body >
     我是js方法
</body>
</html>

  

  • shtml文件

  • 使用ssi技术页面生成shtml文件，只用在头部文件位置加入<!--#include file="" -->，然后修改的时候只要修改文件就可以了。使用shtml的好处是对搜索引擎比较友好，需要处理的文件在服务器端完成的， 不会加重访问者的浏览器负担。

  • ajax动态拉取填充

 

 

 

相关文章