如何在HTML不同的页面中，共用头部与尾部
发布网友
发布时间：2022-04-21 22:31
共3个回答
热心网友
时间：2023-07-17 05:06
将多个html页面里引进相同的一个头部页面的方法如下：
1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
简单代码结构示例：
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="head.html"></iframe>
<div>页面内容</div>
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="foot.html"></iframe>
</div>
</body>
</html>
2. js包含法
页头和页尾改成外接js的形式，通过documen.write输出或其它js的输出的方法。这种方法在页头页尾需要修改时，不利于修改，也不好还原原先的html结构。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<script type="text/javascript" href="head.js"></script>
<div>页面内容</div>
<script type="text/javascript" href="foot.js"></script>
</div>
</body>
</html>
3. shtml方法
运用服务端的包含方法，只需在页面中使用服务端包含命令<!--# include file="文件名称" -->，在被调用的页面嵌入页头和页脚即可。但此方法需要服务端支持ssi（server side include 服务端包含）功能。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<!--#include file="head.html" -->
<div>页面内容</div>
<!--#include file="foot.html" -->
</div>
</body>
</html>
热心网友
时间：2023-07-17 05:07
2、在你说的多个html页面引入即可
示例：index.html文件引入公用头部header.html
在index.html文件开始加入：<include file="header.html" />
file内填写的是你需要引入的文件的详细地址，可以是相对地址，也可以是绝对地址！
热心网友
时间：2023-07-17 05:07
<jsp:param value="" name="menu" />
</jsp:include>
2、 <%@ include file="/common/frontconditionturnpage.jsp"%>
3、<c:import url="${innerahstudyUrl}/course/manage/tutor!list.excsec?id=${curUser.id}">
<c:param name="tutorUserIds" value="${tutorIds}"></c:param>
</c:import>追问直接在html页面里可以引jsp吗，怎么出不来啊
热心网友
时间：2023-07-17 05:06
将多个html页面里引进相同的一个头部页面的方法如下：
1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
简单代码结构示例：
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="head.html"></iframe>
<div>页面内容</div>
<iframe frameboder="0" scrolling="no" width="100%" height="80" src="foot.html"></iframe>
</div>
</body>
</html>
2. js包含法
页头和页尾改成外接js的形式，通过documen.write输出或其它js的输出的方法。这种方法在页头页尾需要修改时，不利于修改，也不好还原原先的html结构。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<script type="text/javascript" href="head.js"></script>
<div>页面内容</div>
<script type="text/javascript" href="foot.js"></script>
</div>
</body>
</html>
3. shtml方法
运用服务端的包含方法，只需在页面中使用服务端包含命令<!--# include file="文件名称" -->，在被调用的页面嵌入页头和页脚即可。但此方法需要服务端支持ssi（server side include 服务端包含）功能。
<html>
<head>
<title>页面</title>
<style type="text/css">
.page{width:950px;margin:0 auto;}
</style>
</head>
<body>
<div class="page">
<!--#include file="head.html" -->
<div>页面内容</div>
<!--#include file="foot.html" -->
</div>
</body>
</html>
热心网友
时间：2023-07-17 05:07
2、在你说的多个html页面引入即可
示例：index.html文件引入公用头部header.html
在index.html文件开始加入：<include file="header.html" />
file内填写的是你需要引入的文件的详细地址，可以是相对地址，也可以是绝对地址！
热心网友
时间：2023-07-17 05:07
<jsp:param value="" name="menu" />
</jsp:include>
2、 <%@ include file="/common/frontconditionturnpage.jsp"%>
3、<c:import url="${innerahstudyUrl}/course/manage/tutor!list.excsec?id=${curUser.id}">
<c:param name="tutorUserIds" value="${tutorIds}"></c:param>
</c:import>追问直接在html页面里可以引jsp吗，怎么出不来啊
