我們在使用html編寫(xiě)一個(gè)網(wǎng)站的時(shí)候，通常情況下頭部和尾部是相同的，如果一個(gè)網(wǎng)站的每個(gè)頁(yè)面都把這些代碼寫(xiě)一遍，不僅浪費時(shí)間，還顯得重復代碼很多，所以此時(shí)把重復的頁(yè)面單獨摘出來(lái)，在用到的時(shí)候從外部直接引進(jìn)去，就能節省很多時(shí)間，減少很多代碼。
在這里，有好幾種引入html文件的方式，不過(guò)每種都是有利有弊，需要根據需要自行選擇
如果有些瀏覽器本地實(shí)現不了，那么放到服務(wù)器上面?。ㄖ匾。。。?/strong>
注意：引入后主頁(yè)面的Css樣式不適用于被引入頁(yè)面，比如在主頁(yè)面設置
<style type='text/css'> *{ margin: 0; padding: 0; }</style>
下面介紹幾種實(shí)現方法：
一、import引入(<head>中引入文件，<script>中加載內容)
href鏈接引入的html文件，id可以看做頁(yè)面引導，在script中用到
<head> <meta charset='utf-8' /> <title>主頁(yè)面</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！<!--本頁(yè)面寫(xiě)入內容--><script type='text/javascript'> document.write(page2.import.body.innerHTML);</script>
二、通過(guò)JQuery的load()方法加載頁(yè)面
相當于把引入的html中head和body標簽中的數據拖出來(lái)，在外面包了一個(gè)你自己寫(xiě)的標簽，比如說(shuō)上面代碼中的<div class='top'></div>
<!--注意順序--><!--使用js引入，引入整個(gè)文檔，但是沒(méi)有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引入（帶有滾動(dòng)條，視情況使用）
<!--object引入，相當于把整個(gè)頁(yè)面拉過(guò)來(lái)（在一個(gè)html中嵌套另一個(gè)html），包括title,meta,body,html等--><!--此處的高是嵌套進(jìn)去的整個(gè)html的高，不包括邊框，padding等--><object style='border:1px solid red' type='text/x-scriptlet' data='top.html' width='100%' height='200px'></object><!--iframe引入，同object方式一樣，頁(yè)面整個(gè)嵌套，默認高度為150,frameborder設置為1時(shí)邊框寬度為2--><iframe marginwidth=0 marginheight=0 width='100%' height=200 src='top.html' frameborder='no' <!--scrolling='no'-->></iframe>
兩中引入方式比較：
- 相同點(diǎn)：
- 默認高度為150
- 引入后本頁(yè)面html嵌套引入頁(yè)面html，整個(gè)引入
- 不同點(diǎn)：
- iframe引入使用scrolling='no'可以不讓頁(yè)面進(jìn)行滾動(dòng)，取消右側滾動(dòng)條
- iframe中 frameborder='no'可以修改為0或1，這里不是指寬度，可以理解為布爾型，當設為1時(shí)border寬度為2
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
