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⽂件就可以了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。