|
我們在使用html編寫一個網(wǎng)站的時候，通常情況下頭部和尾部是相同的，如果一個網(wǎng)站的每個頁面都把這些代碼寫一遍，不僅浪費時間，還顯得重復(fù)代碼很多，所以此時把重復(fù)的頁面單獨摘出來，在用到的時候從外部直接引進去，就能節(jié)省很多時間，減少很多代碼。 在這里，有好幾種引入html文件的方式，不過每種都是有利有弊，需要根據(jù)需要自行選擇 如果有些瀏覽器本地實現(xiàn)不了，那么放到服務(wù)器上面?。ㄖ匾。。。?/strong> 注意：引入后主頁面的Css樣式不適用于被引入頁面，比如在主頁面設(shè)置  <style type='text/css'> *{ margin: 0; padding: 0; }</style> 下面介紹幾種實現(xiàn)方法： 一、import引入(<head>中引入文件，<script>中加載內(nèi)容)href鏈接引入的html文件，id可以看做頁面引導(dǎo)，在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！<!--本頁面寫入內(nèi)容--><script type='text/javascript'> document.write(page2.import.body.innerHTML);</script> 二、通過JQuery的load()方法加載頁面相當(dāng)于把引入的html中head和body標簽中的數(shù)據(jù)拖出來，在外面包了一個你自己寫的標簽，比如說上面代碼中的<div class='top'></div> <!--注意順序--><!--使用js引入，引入整個文檔，但是沒有html和body，相當(dāng)于body里面的數(shù)據(jù)--><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引入，相當(dāng)于把整個頁面拉過來（在一個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設(shè)置為1時邊框?qū)挾葹?--><iframe marginwidth=0 marginheight=0 width='100%' height=200 src='top.html' frameborder='no' <!--scrolling='no'-->></iframe> 兩中引入方式比較：
|
|
|
