htnl页面分header、footer块

最近在写自己的项目，这里将自己遇到的问题记录一下，首先是页面，用的是html纯净态页面，分为header、body、footer等，使用的是Jquery的load函数。

 <div class="header"></div>
    <script>
        $(".header").load("header.html");
    </script>

 <div class="footer"></div>
    <script>
        $(".footer").load("footer.html");
    </script>

header页面内容

<meta charset="UTF-8">

<div class="header">
			<div class="black">
				<div class="black-main">
					<h1>
						<div>
						
						</div>
					</h1>
					<ul class="customer">
						
						
						<li>
							<i aria-hidden="true">
								<a href="localhost:8081/Personal.html" class="person_a">
									<img class="customer_logo" src="img\person_mini.png">
								</a>
							</i>
						</li>
						<li>
							<i aria-hidden="true">
							</i>
							<div id="count">
								<a>
									<img class="customer_logo" src="img\car.png">
									<span style="color: white;" id="totalNum">
									</span>	
								</a>
							</div>
						</li>
					</ul>
					<!-- 搜索框 -->
					<input class="input-search" placeholder="请输入商品信息" />	
				</div>
			</div>
			<div class="white">
				<div class="white-main">
					<ul>
						<li>
							<a href="#">首页</a>							
						</li>
						<li>
							<a href="#">闲置书籍</a>															
						</li>
						<li>
							<a href="#">服装鞋饰</a>															
						</li>
						<li>
							<a href="#">数码电子</a>															
						</li>
						<li>
							<a href="#">日用物品</a>															
						</li>
						<li>
							<a href="#">出行交通</a>															
						</li>
						<li>
							<a href="#">其他闲置</a>													
						</li>
					</ul>
				</div>
			</div>		
		</div>

这里说一下踩的坑。
第一个：确保你引用了JQuery框架。
第二个：header页面要有

<meta charset="UTF-8">

这个能确保拟引入到主页面后，header页面不会乱码。
第三个：可以看到，header页面是纯代码，相当于一个div块，他不是一个完整的页面。完整的页面会报错，因为一个页面只能有一个body。
2020.2.5
新增一个遇到的坑
第四个：记得写一个通用跳转页面的page，不然你会发现，匹配路径跳转有可能会不显示头和尾。