在HTML不同的页面共用头部与尾部

最新推荐文章于 2023-08-12 15:30:45 发布

八月@谁

最新推荐文章于 2023-08-12 15:30:45 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_45247365/article/details/102622026

版权

本文介绍了在HTML页面中实现头部与尾部共用的多种方法，包括asp和PHP语言、HTML语言、JavaScript、sHTML、本地合并、Ajax动态拉取、服务器设置包含、后台模板引擎处理以及在Angular JS中的应用。通过这些方法，可以有效地管理和维护网站的统一性，提高开发效率。

摘要由CSDN通过智能技术生成

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

<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>
<