静态HTML页⾯如何加⼊公共头尾（附代码）
制作⼀个共⽤头部⽂件head.js和⼀个共⽤底部⽂件foot.js。如主页⽂件是index.htm，调⽤头部和底部⽂件的⽅法是：在主页⽂件代码的开始位置和结束位置分别增加下⾯的代码:
footer.html
<footer class="sc-footer">
<img src="../../starCapital-pc/images/sc-footer-logo.png" alt="" />
<div class="sc-footer_bottom w710">
<div class="sc-footer_bottom_t w580">
<a >Copyright © DoNews 2000-2019 All Rights Reserved</a>
<a >版权所有：北京星资本有限管理公司</a>
<a >联系地址：北京市海淀区宝盛东路多⽜传媒中⼼</a>
<a >：010-XXXXXXXX 邮箱：XXXXXX@DONEWS.COM</a>
</div>
<div class="sc-footer_bottom_b w580">
<a >京ICP证10000号</a>
<a >京⽹⽂【2019】0000-000号</a>
<a >京公⽹安备XXXXXXXXXXXXXX号</a>
</div>
</div>
</footer>
转换为js
document.writeln("");
document.writeln(" <div class=‘sc-contact’>");
document.writeln(" <div class=‘sc-h3’>");
document.writeln(" <h3 class=‘color-w’>");
document.writeln(" ");
document.writeln(" “);
document.writeln(” COOPERATION");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-title.png’ alt=’’ />");
document.writeln(" “);
document.writeln(” <ul class=‘flex list w710’>");
document.writeln("
“);
document.writeln(” COMPETITION");
document.writeln("
参赛咨询
");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-results_other.png’ alt=’’ />");
document.writeln(" <ul class=‘item_list’>");
document.writeln(" <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-phone.png’ alt=’’ />mars@donews");
document.writeln("
“);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-weixin.png’ alt=’’ /> mars@donews");
document.writeln(" “);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-email.png’ alt=’’ /> mars@donews");html主页
document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(”
document.writeln(”
“);
document.writeln(” COMPETITION");
document.writeln("
参赛咨询
");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-results_other.png’ alt=’’ />"); document.writeln(" <ul class=‘item_list’>");
document.writeln(" <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-phone.png’ alt=’’ />mars@donews"); document.writeln("
“);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-weixin.png’ alt=’’ /> mars@donews"); document.writeln(" “);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-email.png’ alt=’’ /> mars@donews"); document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(”
“);
document.writeln(” COMPETITION");
document.writeln("
参赛咨询
");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-results_other.png’ alt=’’ />"); document.writeln(" <ul class=‘item_list’>");
document.writeln(" <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-phone.png’ alt=’’ />mars@donews"); document.writeln("
“);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-weixin.png’ alt=’’ /> mars@donews"); document.writeln(" “);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-email.png’ alt=’’ /> mars@donews"); document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(”
“);
document.writeln(” COMPETITION");
document.writeln("
参赛咨询
");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-results_other.png’ alt=’’ />"); document.writeln(" <ul class=‘item_list’>");
document.writeln(" <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-phone.png’ alt=’’ />mars@donews"); document.writeln("
“);
“);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-weixin.png’ alt=’’ /> mars@donews");
document.writeln(" “);
document.writeln(” <li class=‘flex’>");
document.writeln(" <img src=’…/images/footer-email.png’ alt=’’ /> mars@donews");
document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(” “);
document.writeln(” <div class=‘w710 code flex’>");
document.writeln("
“);
document.writeln(” <img src=’…/…/starCapital-pc/images/code1.png’ alt=’’ class=‘img_max’ />"); document.writeln(" <p class=‘w180’>");
document.writeln(" 官⽅ <span style=‘display: block;’>公众账号⼆维码");
document.writeln("
“);
document.writeln(” <img src=’…/…/starCapital-pc/images/contant_weixin.png’ alt=’’ class=‘img_min’ />"); document.writeln(" “);
document.writeln(”
“);
document.writeln(” <img src=’…/…/starCapital-pc/images/code1.png’ alt=’’ class=‘img_max’ />"); doc
ument.writeln(" <p class=‘w180’>");
document.writeln(" 官⽅新浪 <span style=‘display: block;’>微博⼆维码");
document.writeln(" “);
document.writeln(” <img src=’…/…/starCapital-pc/images/contant_weixin.png’ alt=’’ class=‘img_min’ />"); document.writeln("
“);
document.writeln(”
“);
document.writeln(” <img src=’…/…/starCapital-pc/images/code1.png’ alt=’’ class=‘img_max’ />"); document.writeln(" <p class=‘w180’>");
document.writeln(" 官⽅腾讯 <span style=‘display: block;’>微博⼆维码");
document.writeln(" “);
document.writeln(” <img src=’…/…/starCapital-pc/images/contant_weixin.png’ alt=’’ class=‘img_min’ />"); document.writeln("
“);
document.writeln(” “);
document.writeln(” “);
document.writeln(” <footer class=‘sc-footer’>");
document.writeln(" <img src=’…/…/starCapital-pc/images/sc-footer-logo.png’ alt=’’ />");
document.writeln("");
document.writeln(" <div class=‘sc-footer_bottom w710’>");
document.writeln(" <div class=‘sc-footer_bottom_t w580’>");
document.writeln(" Copyright © DoNews 2000-2019 All Rights Reserved");
document.writeln(" 版权所有：北京星资本有限管理公司");
document.writeln(" 联系地址：北京市海淀区宝盛东路多⽜传媒中⼼");
document.writeln(" ：010-XXXXXXXX 邮箱：XXXXXX@DONEWS.COM");
document.writeln(" “);
document.writeln(” <div class=‘sc-footer_bottom_b w580’>");
document.writeln(" 京ICP证10000号");
document.writeln(" 京⽹⽂【2019】0000-000号");
document.writeln(" 京公⽹安备XXXXXXXXXXXXXX号");
document.writeln(" “);
document.writeln(” “);
document.writeln(” “);
document.writeln(”");
以后⽆论在哪个页⾯，想调⽤该头部⽂件，直接插⼊head.js⽂件即可：下⾯是随便建的⼀个页⾯，//test.html
<div class="sc-1 w1200">
<div class="sc-1_item_text">
<div class="w518">
<h3>强⼒推荐</h3>
<p>RECOMMEND</p>
</div>
</div>
<div class="contentArea-con w710">
<div class="contentArea-title">
<h4>这是⼀个很重要的标题</h4>
<p>THIS IS A VERY IMPORTANT TITLE.</p>
</div>
<div class="contentArea-text">
资本主义的资本是什么？就是⼀套社会权⼒的计量⼿段，这是基于商品经济的。资本不断增值的特性，来⾃私有者对劳动者的剥削——其
剩余劳动作为资本积累在了资本家⼿⾥。⽽资本家则运⽤这些资本争夺控制⽣产的社会权⼒——购买商品不是资本增值的⽬的，资本对应
的不是具体的商品，⽽是政治权⼒。按资分配实际就是按对劳动者剥削程度进⾏社会权⼒的分配。谁剥削劳动者最有效率，积累的资本越
多，谁就获得控股权，成为⾸席决策者，按资分配的股份制度，完全可以拿贵族共和来形容——谁掌握的军队多..
</div>
<img src="../images/sc-ab_1.png" alt="" />
<div class="contentArea-title ">
<h4>这是⼀个很重要的标题</h4>
<p>THIS IS A VERY IMPORTANT TITLE.</p>
</div>
<div class="contentArea-text">
资本主义的资本是什么？就是⼀套社会权⼒的计量⼿段，这是基于商品经济的。资本不断增值的特性，来⾃私有
</div>
</div>
</div>
//引⼊footer.js即可
**但是这⾥边存在⼀个坑，就是我们要引⼊的公共html页⾯，⽆需把页⾯写完整，只需要包括我们所需的代码⽚段就可以。因为⼀个html页⾯只允许存在⼀个body，去掉所有的<html><body>标签。切记**
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论