在编写网页有多个页面时经常会用到很多公共的部分，如页面的头部导航、尾部信息等，如果每个页面都写一次太过繁琐造成代码的冗余且不便于维护，所以将公共数据封装化，继承引入才是王道。文件的引入在不同的环境下有不同的方式，如PHP环境下，可以通过设置，直接@include('public.header')就行，纯HTML可以iframe或者是其他方式，在一次页面中，我是通过ajax方式引入的，例如：
1.在主文件中设置div及id或class:

<div class="c_navigationmodel" id="navigation"></div>

2.新建一个用于编写头部导航文件header.html

<div class="c_navigation">
  <a href="javascript:;" class="c_navleft">
    <img src="../img/logo.jpg" alt="">
  </a>
  <div class="dflex">
    <div class="c_navright">
      <a href="javascript:;">产品定位</a>
      <a href="javascript:;">产品功能</a>
      <a href="javascript:;">产品特征</a>
    </div>
    <div class="c_navrbut">
      <a href="http://www.baidu.com" target="_blank">注册</a>
    </div>
  </div>
</div>

3.创建数据渲染的js，public.js

navigation();
//显示菜单栏
function navigation(){
    $.ajax({
        type:"GET",
        dataType:'html',
        url:'/header.html',
        success:function( result ){
            $('#navigation').html(result);
        },
        error:function(e) {
          console.log('数据错误');
        }
    })
}

4.在需要用的header.html文件内容的页面中引入public.js

<script src="js/public.js" charset="utf-8"></script>

通过文件分离方式，可以提高代码的管理，以后若有需要改变的，直接改一个地方就好。