多个HTML文件共用同一个头部

因为公司临时需要临时搭建一个小项目，没有采用系统框架，之前在搞网页的时候是把前端设计好的头粘贴到新的页面，这样做耦合性很高，每当你新建一个页面的时候都需要进行一次粘贴，需要对头进行修改时更让人感到头疼，所以今天对头的展示方式进行改进，采取了共用头。
新建一个js，如我这里需要的
在js里写进你需要共享的头页面

document.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
document.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
document.writeln("<head>");
document.writeln("<style>");
document.writeln("</style>");
document.writeln("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />");
document.writeln("<title></title>");
document.writeln("</head>");
document.writeln("<body >");
document.writeln(" <div class='navbar navbar-default' id='navbar'>");
document.writeln("    	<div class='navbar-container' id='navbar-container'>");
document.writeln("			<div class='contentBigBox'>");
document.writeln("				<div id='headerNav'>");
document.writeln("					<h1>");
document.writeln("						<img src='public/image/sharelogo.png' />");
document.writeln("					</h1>");
document.writeln("					<div class='navTime'>");
document.writeln("						<ul>");
document.writeln("							<li class='time'>");
document.writeln("								<p id='YMD'>2018年8月15日 星期三</p>");
document.writeln("								<p id='HMS'>12:02:15</p>");
document.writeln("							</li>");
document.writeln("						</ul>");
document.writeln("					</div>");
document.writeln("				</div>>");
document.writeln("			</div>");
document.writeln("		</div>");
document.writeln("	</div>");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");

可以采用转换工具进行上面的操作http://tool.chinaz.com/Tools/Html_Js.aspx
当js建好后，在你需要展示头的位置插入
<script type="text/javascript" src="shaleHead.js"></script>
就可以大工告成了，另外在需要的条件下在没个页面都要引进共用的css样式以及js文件哦。

原文链接：https://blog.csdn.net/qq_40330502/article/details/85099759