html如何封装头部
今天，我们来给大家介绍一下html封装头部的办法，并附上代码供大家参考学习，大家可以上手来试试。
一、通过iframe
1.原理：创建一个header.html头部和一个footer.html底部公共文件，然后再主页用两个iframe引入这两个文件
2.代码：
主页
<!DOCTYPE html >
<html>
<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>
<!--公共头部-->
<!--iframe需要用div包括起来，然后给div定个高度-->
<div class="">
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="head.html" width="100%" height="auto"></iframe>
</div>
<!--公共尾部-->
<div class="footer">
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="footer.html" height="auto" width="100%"></iframe>
</div>
</body>
</html>
头部
<!DOCTYPE html >
<html>
<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>
<div class="menu">
<ul>
<li>首页</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>
二、通过load方法
1.原理：创建一个header.html头部和一个footer.html底部公共文件，然后再主页用js方法 load(）引入这两个文件
2.代码：
主页面代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/public.css" />
</head>
<body>
<div id="header"></div>
<div class="container container-content">
</div>
<div id="footer"></div>
</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
loadModel('');//加载头部跟尾部
</script>
</html>
最后，推荐我们的管理工具给大家。
