我們在使用html編寫一個網站的時候，通常情況下頭部和尾部是相同的，如果一個網站的每個頁面都把這些代碼寫一遍，不僅浪費時間，還顯得重覆代碼很多，所以此時把重覆的頁面單獨摘出來，在用到的時候從外部直接引進去，就能節省很多時間，減少很多代碼。 在這裡，有好幾種引入html文件的方式，不過每種都是有利有弊 ...
我們在使用html編寫一個網站的時候，通常情況下頭部和尾部是相同的，如果一個網站的每個頁面都把這些代碼寫一遍，不僅浪費時間，還顯得重覆代碼很多，所以此時把重覆的頁面單獨摘出來，在用到的時候從外部直接引進去，就能節省很多時間，減少很多代碼。
在這裡，有好幾種引入html文件的方式，不過每種都是有利有弊，需要根據需要自行選擇
如果有些瀏覽器本地實現不了，那麼放到伺服器上面！（重要！！！）
註意：引入後主頁面的Css樣式不適用於被引入頁面，比如在主頁面設置
<style type="text/css"> *{ margin: 0; padding: 0; } </style>
下麵介紹幾種實現方法：
一、import引入(<head>中引入文件，<script>中載入內容)
href鏈接引入的html文件，id可以看做頁面引導，在script中用到
<head> <meta charset="utf-8" /> <title>主頁面</title> <!--import引入--> <link rel="import" href="top.html" id="page1"/> <link rel="import" href="fotter.html" id="page2"/> </head>
<!--註意順序--> <!--import在頭部引入，裡面是啥就是啥--> <script type="text/javascript"> document.write(page1.import.body.innerHTML); </script> hello world！<!--本頁面寫入內容--> <script type="text/javascript"> document.write(page2.import.body.innerHTML); </script>
二、通過JQuery的load()方法載入頁面
相當於把引入的html中head和body標簽中的數據拖出來，在外麵包了一個你自己寫的標簽，比如說上面代碼中的<div class="top"></div>
<!--註意順序--> <!--使用js引入，引入整個文檔，但是沒有html和body，相當於body裡面的數據--> <div class="top">top</div> <div class="center"> <p>你好，我在中間！</p> </div> <div class="footer">footer</div> <script src="js/jq/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //在js中引入 $(document).ready(function () { $('.top').load('top.html'); $('.footer').load('fotter.html'); }); </script>
三、object引入和iframe引入（帶有滾動條，視情況使用）
<!--object引入，相當於把整個頁面拉過來（在一個html中嵌套另一個html），包括title,meta,body,html等--> <!--此處的高是嵌套進去的整個html的高，不包括邊框，padding等--> <object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object> <!--iframe引入，同object方式一樣，頁面整個嵌套，預設高度為150,frameborder設置為1時邊框寬度為2--> <iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>
兩中引入方式比較：
- 相同點：
- 預設高度為150
- 引入後本頁面html嵌套引入頁面html，整個引入
- 不同點：
- iframe引入使用scrolling="no"可以不讓頁面進行滾動，取消右側滾動條
- iframe中 frameborder="no"可以修改為0或1，這裡不是指寬度，可以理解為布爾型，當設為1時border寬度為2
