html 如何引入公共的头部和底部

这个问题其实应该算是一个一直困扰我等前端开发者的心魔了，当然说得夸张些了。我们在做项目的时候经常会遇到一样的头部和底部，如果修改就要修改大量的页面，增加工作量还容易出错，这时候就需要我们把公共部分提取出来，等需要的时候再引入页面。我在网上找了一些资源，发现对前端来说最好的方法就是使用jQuery的load函数，话不多说直接上代码

1.先写好公共部分的文件，文件内不要有任何页面声明的标签，只需要内容的html部分

<ul>
    <li><a href="#" class="nav-a">首页</a></li>
    <li><a href="#" class="nav-b">分类</a></li>
    <li><a href="#" class="nav-b">订单</a></li>
    <li><a href="#" class="nav-b">我的</a></li>
</ul>

2.在需要引入的主页面写入jq，引入公共部分的文件

$(function(){
    $(".head").load("head.html");
})

记得页面添加jquery库

当然上面的也只是一个方法，还有另外的一个方法就是将这些共用的写到js 内，使用js 将html 拼写出来

类似这种：

var tbody =  "<div class='mask' id='pcEwm'>"+
                    "<div class='pc-box'>"+
                        "<font>温馨提示</font>"+
                        "<img src='images/webEwm.png'/>"+
                        "<p>手机端扫码参与，更方便更快捷哦~</p>"+
                 "</div>"+
                "</div>"

$("body").append(tbody);

参考：https://blog.csdn.net/qq_38860424/article/details/80269421