html页⾯引⼊公共的页⾸和导航栏
当⽹站页⾯数量多达⼏⼗上百时,制作⼀个头部的html页⾯和⼀个尾部的html页⾯将会省去很多的⿇烦事,⽐如更改头部的样式时,不必在每个页⾯中全改⼀遍,⽅便了代码的维护,能减轻很多的⼯作量。
这⼏天修改公司官⽹的时候,被领导要求改变头部导航中的⼀些内容,但是我发现如果要改内容,所有页⾯的<header>内容都要改,⼏百个页⾯如果⼀个⼀个改太浪费时间和精⼒。于是我想到,之前⽤ASP.NET时⾥⾯有母版页的功能,那现在可不可以通过类似的⽅法,实现不同⼦页⾯链接同⼀个⽹页头部。
经过查阅各⼤博客⽹站,我发现了<iframe>元素。
标签定义及使⽤说明
<iframe> 标签规定⼀个内联框架。
⼀个内联框架被⽤来在当前 HTML ⽂档中嵌⼊另⼀个⽂档。
例如我做了头部⽂件head.html,在index.html⽂件中链接时,只需在该页⾯的开头(<body>后⾯)增加以下代码:
html首页制作
<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src=”head.html” height=“auto” width="100%">
<p>您的浏览器不⽀持  iframe 标签。</p>
</iframe>
但是当我把做好的头部⽂件链接到⾸页进⾏测试时,却发现在⾸页⽆法正常显⽰头部的导航下拉栏,研究了很久,试了⽹上的各种办法都⽆法成功,所以我换了⽅法,改⽤js的⽅式链⼊。
我将head.html转换成head.js(我⽤的是站长⼯具),然后直接在index.html⽂件的开头调⽤js代码:
<script type="text/javascript" src="head.js"></script>
采⽤js调⽤的⽅法测试,⾸页成功和头部⽂件契合在⼀起,之后将所有页⾯都链⼊同⼀个头部⽂件,再次改动头部的内容或者导航时,只需要改⼀个head.js⽂件就可以了。