html如何封装头部

by Worktile 项目协作工具

今天，我们来给大家介绍一下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>

最后，推荐我们的管理工具给大家。