1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，
html文件引入其它html文件的三种方法：可以在一个html的文件当中读取另一个html文件的内容吗？答案是确定的，而且方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，那今天就总结这几种方法让大家参考一下。
1.IFrame引入
a.html引入b.html的内容
<iframe name="content_iframe" marginwidth=0 marginheight=0 width=100% height=30 src="b.html" frameborder=0></iframe>
参数：
runat="server" 这个最好加上Iframe跳转 asp.net 可在当前iframe中跳转
src 链接到的地址URl
frameborder 是否显示边框（0无边框 1有边框）
scrolling 是否有滚动条（yes有滚动条 no无滚动条）
allowtransparency 背景是否透明（yes透明 no不透明）
详细介绍：http://www.cnblogs.com/kingboy2008/archive/2011/05/10/2055545.html
不足：很多页面都有下拉单，那么iframe 就不方便使用了，因为是在a窗口里面嵌入了b窗口。那么iframe的窗口则是固定不变的。没法自动调节。iframe 这个我没用过，之前看过一些小说网站，因为对内容的隐秘性，不让读者能复制内容，他们就是用了iframe的方法。
比如此处的下拉单要到内容部分，这样iframe就不适用了。那么用include方式就很方便。接下来会有include方式详解。
2.<object>方式
<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>
定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
<object>标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。
浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。
而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object>和 </object>之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。
而我用object方式就常用于插入一个flash插件。
将内容引入放置到你的div中
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' name='flashDiv' id='flashDiv' border='none'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0'>
<param name='movie' value='js/webchat.swf'>
<param name='quality' value='high'>
<embed src='js/webchat.swf' width='1100' height='680' quality='high' name='flashDiv'
type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' </embed>
</object>
详细链接：http://blog.163.com/horse622@126/blog/static/477054722009102492216760/
param的详解：http://201205083157.iteye.com/blog/1863322
3.include（这是我此处重点讲解，也是最方便使用的）
一个网站很多页面里面，一部分内容的代码是一样的，比如：head，footer，menu等。那么我们则可以写一个头部，一个尾部，一个menu然后引入到需要用的页面里面，则不需用写重复的代码了。include是在a.html里面嵌入b.html的代码，是将代码拼凑完整，而不是在浏览器中嵌入一个浏览器。
这样的好处是，当重复代码修改一个小地方时候，只需在一个html里面修改，不需要重复修改代码，也不会因为页面太多导致漏掉未修改。
我将内容分成4部分，然后将heder、menu、footer引入到index里面，将会看见网页代码就成完整的了：
前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件把头部代码和尾部代码分别单独写到一个新的html页面(头部header.html 尾部footer.html)，以便引用；将header部分和footer部分提取出来，各保存为header.html和footer.html。在header.html和footer.html文件中，并非是标准的html文档格式！与此同时，通过index.html中的jQuery函数load()将上述的两个公共文件引入进来，从而形成一个完整的页面；并且，不会影响到其他页面对于公共文件的引用和使用；大部分的pc项目中有很多个页面，而每个页面几乎都有重复的部分，今天分享得是如何将这些公共布局样式封装起来，在其他的页面中直接调用如果你是使用动态语言,ASP,PHP,JSP等那些语言里面都有一个include的标签,可能叫法不一致你可以将导航做成单独的一个文件,通过这些标签是可以引入这个文件的如果是静态的HTML,没有这类的标签,不建议你使用iframe和JS一般这种情况下,静态页面都会将导航一个一个的加到静态页面中,最后写程序的时候在用include这种标签添加即可<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。link是一个链接标签，包括外部css文件引用、js文件引用、favicon.ico图标引用等作用link介绍
meta包含广泛的内容标签，如网页关键字、网页介绍、作者、网页编码、robots、自动跳转等声明及说明标签。 meta介绍在HTML中，head标签内包含的元素表示网页文档的元数据，即用来描述网页但又不直接显示的数据。下面描述head标签及其常用内容。因为页面默认的字符集是ISO-8859-1，它是欧美系字体的字符集，例如英文之类的语言就没问题，它包含了ASCII字符集在内。因为UTF8包含了中文编码，为了让页面显示中文，我们需要一句<meta charset="utf-8">即可。
另外meta标签代表的是元数据，所以不像title或者其他body内的元素那样需要包含内容，它是空元素，只需要包含属性即可。除了charset属性，还有用name/content对来表示各种各样的元数据，name代表元数据类型，content代表元数据内容，详细可以参考HTML <meta>。可以用一些前端模板来做，例如我用的就是handlebars，你先用handlebars写好公共部分，然后再在js里用Handlebars.compile插入进来
如果你不想在页面加载完后再用js插入的话，建议使用前两者
这种情况一般都需要上构建工具，我是用gulp+jade实现的
能想到的只有两种解决方案：
后台拼接页面，可以用PHP，jsp或是nodejs模板引擎。
使用Ajax做单页面应用(不过这个似乎不符合你的要求)
你可以用shtml include的，不过一般都是在程序语言组装好的，而且每个语言都有各自的叫法，不过都是一个意思，
比如aspx就是用户控件啊
还有一种就是用ajax加载，不过这个不合常理，只不过能实现而已。
你可以考虑把头部导航栏的html 以字符串的形式保存到一个全局变量里，然后在需要的地方通过js动态写入进去。
用react框架轻松实现。
可以试下用组件来实现。
比如PHP里，把a.html中任意一段代码放到b.html文件中，然后在a.html那个地方这样调用
<?php include("b.html")?>
使用pugjs可以
比如把头部菜单栏的HTML当作字符串放在一个单独的js文件里，
样式独立一个文件，js动画(如果有的话一个独立的文件) 用的时候去拿来把HTML插入到页面，然后该用样式用样式，该用js用js就好了。可以用模板引擎,比如arttemplate,上手容易,功能简单,但是css样式,还有js你要再引用一次,关键他可以定义模板变量,可以改变你原来的一些内容
2.vue和react 都有组件功能,其实用过这两个框架后,你这个问题就迎刃而解了
3.node.js搭配nunjucks也不错,node应该属于后端思想编写页面,处理你这个问题很简单这个meta标签中给charset属性设置属性值为“utf-8”，浏览器在解析的过程中就可以知晓该文档是使用“utf-8”编码完成的。
此处的meta标签完成了声明编码的任务，与之相类似还有很多可以用到meta标签，如声明作者、主要内容等等。可以看出meta标签个性化程度很高。
link标签与style标签都用作css样式的引入，区别主要在于文件的操作与体量。
如果是很简单的html文档，需要改变样式的标签也不会很多的话，完全可以使用内联式（<style></style>），甚至是之后会见到的行内式（将style作为属性，具体需要改变的样式作为属性值）；
在相对大一些的html文档中css就被作为外部文件进行引入了，这样做的好处是方便修改而且减少代码冗余。针对不同的情况两种方式各有利弊，接下来要说到的script标签也是如此
