如何复用HTML模板代码，比如头部尾部等相同代码的部分，具体怎么做
模板怎么写，放在哪个文件夹
如何引用这个模板
工具条件：H5、原生JavaScript、vue.min.js、bootstrap 展开
HTML复用，不需要任何模板就可以复用相同的内容
条件：控制页面布局显示就可以完成
示例：
主页
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML调试</title>
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script src='js/zui.min.js' type='text/javascript' charset='utf-8'></script>
<script src='js/jquery-barcode.js' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' type='text/css' href='css/zui.css' />
<style type='text/css'>
#container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
font-family: '宋体';
}
</style>
</head>
<body>
<div id='container'>
<!--复用页面容器1-->
<div style="position: absolute;left: 0px;top: 0px;height: 70px;width: 100%;border-bottom: 1px solid #F1F1F1;">
<iframe align="center" width="100%" height="70px" src="html/page_header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="contents" style="position: absolute;left: 0px;top: 70px;width: 100px;">
<!--不相同内容容器-->
</div>
<!--复用页面容器2-->
<div style="position: absolute;left: 0px;top: 585px;height: 70px;width: 100%;border-top: 1px solid #F1F1F1;">
<iframe align="center" width="100%" height="70px" src="html/page_footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
复用页面1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<title>复用头部</title>
</head>
<body>
<div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;">
复用头部
</div>
</body>
</html>
复用页面2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<title>复用底部</title>
</head>
<body>
<div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;">
复用底部
</div>
</body>
</html>
项目结构
实现结果：
