javascript - 请问前端大神，html如何引入另一个html，写了一个导航栏想在多个页面中如何重复使用？-PHP中文网问答

写了一个头部导航栏的html
想在多个html页面中引用，请问怎么操作？
网上找了用标签实际效果并不好，导航栏中按钮下拉菜单无法完全显示 <br>请问大牛们平时开发中怎么处理这个的 </p> <p>如图：<br><span class="img-wrap"><img src="https://img.php.cn/upload/image/000/000/000/a88bd7925af6ecc25759d08262b931df-0.jpg"></span></p> </div> <div class="share flexRow"> <div class="shareReply flexColumn shareDiv"> <a href="javascript:;"><img class="sharerImg" src="/static/images/images/icon50.png" data-id="1"></a> <span class="sharerSpan">19</span> </div> <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(53666)"> <a href="javascript:;" > <img class="sharerImg" src="/static/images/images/icon52.png" data-id="2"> </a> <span class="sharerSpan">0</span> </div> <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 aiaskgoodICollection" data-id=""> <a href="javascript:;" > <img class="sharerImg " src="/static/images/images/icon37.png" data-id="5"> </a> <span class="sharerSpan">0</span> </div> </div> <script> $('.jbtitleimg').on('click',function(){ $("#layuitc").hide() var layer = layui.layer; layer.closeAll(); }) $('.jbbtn').on('click',function(){ $("#layuitc").hide() var layer = layui.layer; layer.closeAll(); }) $('.sharerImg').mouseenter(function(e){ var dataId = e.currentTarget.dataset.id if(dataId == 1){ // $('.shareReply').find('img').attr('src','/static/images/images/icon51.png') }else if(dataId == 2){ // $('.shareLike').find('img').attr('src','/static/images/images/icon53.png') }else if(dataId == 4){ $('.shareShare').find('img').attr('src','/static/images/images/icon55.png') }else{ } }) $('.sharerImg').mouseleave(function(e){ var dataId = e.currentTarget.dataset.id if(dataId == 1){ // $('.shareReply').find('img').attr('src','/static/images/images/icon50.png') }else if(dataId == 2){ // $('.shareLike').find('img').attr('src','/static/images/images/icon52.png') }else if(dataId == 4){ $('.shareShare').find('img').attr('src','/static/images/images/icon54.png') } }) </script>             <div id="commentinput" class="info detail-comment-input layui-hide-sm"> <div class="detail-ci-avator"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" alt="ringa_lee"/> <div class="detail-r"> <span class="detail-name">ringa_lee</span> <p class="detail-signal">ringa_lee</p> </div> </div> <div id="js-reply-wrap"> <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div> <div class="qa-ci-footer"> <div class="qa-ci-footright"> <button id="js-wenda-ci-submit" class="detail-btn" data-qid="53666">回答</button> </div> </div> </div> </div> <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content"> <div class="arTop flexRow"> <div class="artLeft flexRow fontBold fontColor1">全部回复<b class="artlb colorGrey">(19)</b></div> <button class="artBtn ask-comment-answer">我来回复</button> </div> <div class="allReplayLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/194/591128da2963a284.jpg" alt="黄舟" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/194.html" target="_blank" class="wdcdcName">黄舟<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">19楼</span> </div> <div class="wdcdcCons"><p>可以使用<code>html</code>的<code>import</code>这个功能<br>通过声明 <code><link rel="import"></code> 来在页面中包含一个导入<br>具体可以看教程<br>可以向下面这样使用<br>warning.html</p> <pre class='brush:php;toolbar:false;'><code><p class="warning"> <style scoped> h3 { color: red; } </style> <h3>Warning!</h3> <p>This page is under construction</p> </p> <p class="outdated"> <h3>Heads up!</h3> <p>This content may be out of date</p> </p> </code></pre> <p>导入</p> <pre class='brush:php;toolbar:false;'><code><head> <link rel="import" href="warnings.html"> </head> <body> ... <script> var link = document.querySelector('link[rel="import"]'); var content = link.import; // 从 warning.html 的文档中获取 DOM。 var el = content.querySelector('.warning'); document.body.appendChild(el.cloneNode(true)); </script> </body> </code></pre></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106933)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106933">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/001/120/5f2a5b6053764987.jpg" alt="天蓬老师" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/1120.html" target="_blank" class="wdcdcName">天蓬老师<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">18楼</span> </div> <div class="wdcdcCons"><p>1、可以用构建工具拼接，例如gulp， fis， <br>我之前用过gulp，大概是这样的</p> <pre class='brush:php;toolbar:false;'><code>var headerfooter = require('gulp-headerfooter'); gulp.task("html", function() { return gulp.src("src/template/*.html") .pipe(headerfooter.header('src/headerfooter/header.html')) .pipe(headerfooter.footer('src/headerfooter/footer.html')) .pipe(gulp.dest("templates/purchase")) })</code></pre> <p>更详细的可以去我的github上看一下</p> <p>2、用后台模板来拼接，例如php，django等</p> <p>3、可以用一些前端模板来做，例如我用的就是handlebars，你先用handlebars写好公共部分，然后再在js里用Handlebars.compile插入进来</p> <p>如果你不想在页面加载完后再用js插入的话，建议使用前两者</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106934)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106934">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/004/5c511d62e6c0e698.png" alt="大家讲道理" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/4.html" target="_blank" class="wdcdcName">大家讲道理<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">17楼</span> </div> <div class="wdcdcCons"><p>这种情况一般都需要上构建工具，我是用gulp+jade实现的</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106935)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106935">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/004/5c511d62e6c0e698.png" alt="大家讲道理" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/4.html" target="_blank" class="wdcdcName">大家讲道理<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">16楼</span> </div> <div class="wdcdcCons"><p>能想到的只有两种解决方案：</p> <ol> <li><p>后台拼接页面，可以用PHP，jsp或是nodejs模板引擎。</p></li> <li><p>使用Ajax做单页面应用（不过这个似乎不符合你的要求）</p></li> </ol></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106936)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106936">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" alt="ringa_lee" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/3.html" target="_blank" class="wdcdcName">ringa_lee<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">15楼</span> </div> <div class="wdcdcCons"><p>你可以用shtml include的，不过一般都是在程序语言组装好的，而且每个语言都有各自的叫法，不过都是一个意思，<br>比如aspx就是用户控件啊<br>还有一种就是用ajax加载，不过这个不合常理，只不过能实现而已。</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106937)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106937">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/001/120/5f2a5b6053764987.jpg" alt="天蓬老师" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/1120.html" target="_blank" class="wdcdcName">天蓬老师<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">14楼</span> </div> <div class="wdcdcCons"><p>你可以考虑把头部导航栏的html 以字符串的形式保存到一个全局变量里，然后在需要的地方通过js动态写入进去。</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106938)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106938">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/006/5858d2cd2dae7264.jpg" alt="怪我咯" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/6.html" target="_blank" class="wdcdcName">怪我咯<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">13楼</span> </div> <div class="wdcdcCons"><p>用react框架轻松实现。</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106939)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106939">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" alt="ringa_lee" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/3.html" target="_blank" class="wdcdcName">ringa_lee<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">12楼</span> </div> <div class="wdcdcCons"><p>可以试下用组件来实现。</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106940)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106940">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/000/008/585b8851bdbdb211.jpg" alt="伊谢尔伦" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/8.html" target="_blank" class="wdcdcName">伊谢尔伦<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">11楼</span> </div> <div class="wdcdcCons"><p>比如PHP里，把a.html中任意一段代码放到b.html文件中，然后在a.html那个地方这样调用</p> <pre class='brush:php;toolbar:false;'><code><?php include("b.html"); ?></code></pre></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106941)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106941">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="/static/images/user_avatar.jpg" alt="巴扎黑" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/7.html" target="_blank" class="wdcdcName">巴扎黑<b class="wdxqRcT colorGrey">2017-04-11 12:34:30</b></a> <span class="wdxqrcTopspan colorGrey">10楼</span> </div> <div class="wdcdcCons"><p>使用pugjs可以</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(106942)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/003/619af4a6bc197237.jpg" class="retlAvatar" > <span class="retlName">ringa_lee</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复"></textarea> <button type="button" class="replayBtn do-reply-btn" data-id="106942">回复</button> </div> </div> <div class="wdcdContentReplyss"> <ul class="replyssul"> </ul> </div> </div> </div> </div> <div class="wdsyCondivLine"></div> <div></div> </div> </div>  <div class="phpwzright wdxq"> <a href="javascript:void(0);" onclick="publish_ask('发布话题',1)"><img src="/static/images/images/needtiwen.png" class="wdxqrImg"></a> <div class="wzrTwo"> <div class="wzrt-title"> <div>专题推荐</div> <a href="/faq/zt">更多> </a> </div> <div class="wzrtlist"> <ul> <li> <a target="_blank" href="/faq/gddtdhsyff"><img src="https://img.php.cn/upload/subject/202503/11/2025031116021251731.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" /> </a> <a target="_blank" href="/faq/gddtdhsyff" class="title-a-spanl"><span>高德地图导航使用方法</span> </a> </li> <li> <a target="_blank" href="/faq/jdrhbdxrkxf"><img src="https://img.php.cn/upload/subject/202409/23/2024092313535083098.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" /> </a> <a target="_blank" href="/faq/jdrhbdxrkxf" class="title-a-spanl"><span>京东如何绑定瑞祥卡消费</span> </a> </li> <li> <a target="_blank" href="/faq/javajyqj"><img src="https://img.php.cn/upload/subject/202508/06/2025080618462635935.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" /> </a> <a target="_blank" href="/faq/javajyqj" class="title-a-spanl"><span>Java就业前景</span> </a> </li> <li> <a target="_blank" href="/faq/smpyt"><img src="https://img.php.cn/upload/subject/202406/03/2024060316495023390.jpg?x-oss-process=image/resize,m_fill,h_96,w_156" /> </a> <a target="_blank" href="/faq/smpyt" class="title-a-spanl"><span>树莓派用途</span> </a> </li> </ul> </div> </div> <div class="wzrOne"> <div class="wzroTitle"> <div> 热门话题 </div>  </div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/567848.html">如何知道别人悄悄看过我的朋友圈</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/599548.html">bgm什么意思</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/874325.html">番茄畅听怎么把歌词放在车屏</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/730402.html">QQ邮箱格式怎么填写</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/1146662.html">123456是什么电话 123456是干嘛的</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/1215361.html">yandex官网登录入口地址在哪 yandex官网入口</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/1253345.html">QQ邮箱格式怎么填写 qq邮箱的格式怎么填</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/730403.html">qq邮箱的格式是什么</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/799443.html">节点是什么意思</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a target="_blank" href="/faq/1106205.html">比特币最全诞生至今历史价格表一览(2024年最新汇总)</a> </div> </li> </ul> </div> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div>热门教程</div> <a target="_blank" href="https://www.php.cn/k.html">更多> </a> </div> <div class="wzrthreelist"> <div class="wzrthreeTab"> <div class="check tabdiv" data-id="one">相关教程 <div></div></div> <div class="tabdiv" data-id="two">热门推荐<div></div></div> <div class="tabdiv" data-id="three">最新课程<div></div></div> </div> <ul class="one"> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a> <div class="wzrthreerb"> <div >64937次学习</div> <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1484960次学习</div> <a class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="phpStudy极速入门视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/639.html">phpStudy极速入门视频教程</a> <div class="wzrthreerb"> <div >529754次学习</div> <a class="courseICollection" data-id="639"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/379.html">独孤九贱(4)_PHP视频教程</a> <div class="wzrthreerb"> <div >1249519次学习</div> <a class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a> <div class="wzrthreerb"> <div >769630次学习</div> <a class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="/course/1696.html" title="最新Python教程从入门到精通" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png" alt="最新Python教程从入门到精通"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1696.html">最新Python教程从入门到精通</a> <div class="wzrthreerb"> <div >2726次学习</div> <a class="courseICollection" data-id="1696"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png" alt="JavaScript ES5基础线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1656.html">JavaScript ES5基础线上课程教学</a> <div class="wzrthreerb"> <div >64937次学习</div> <a class="courseICollection" data-id="1656"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png" alt="PHP新手语法线上课程教学"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1655.html">PHP新手语法线上课程教学</a> <div class="wzrthreerb"> <div >6428次学习</div> <a class="courseICollection" data-id="1655"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1654.html" title="支付宝沙箱支付（个人也能用的支付）" class="wzrthreelaimg"> <img src="https://img.php.cn/teacher/course/20240819/172406094466c31510e008b.jpg" alt="支付宝沙箱支付（个人也能用的支付）"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1654.html">支付宝沙箱支付（个人也能用的支付）</a> <div class="wzrthreerb"> <div >4508次学习</div> <a class="courseICollection" data-id="1654"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="/course/1650.html" title="麻省理工大佬Python课程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/66592dcfeb1b4698.png" alt="麻省理工大佬Python课程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="/course/1650.html">麻省理工大佬Python课程</a> <div class="wzrthreerb"> <div >41271次学习</div> <a class="courseICollection" data-id="1650"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> </div> <script> $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新下载</div> <a href="/xiazai">更多> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList"> <div class="wzrfourlTab"> <div class="check" data-id="onef">网站特效 <div></div></div> <div class="" data-id="twof">网站源码<div></div></div> <div class="" data-id="threef">网站素材<div></div></div> <div class="" data-id="fourf">前端模板<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery企业留言表单联系代码" href="/xiazai/js/8071">[表单按钮] jQuery企业留言表单联系代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3音乐盒播放特效" href="/xiazai/js/8070">[播放器特效] HTML5 MP3音乐盒播放特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5炫酷粒子动画导航菜单特效" href="/xiazai/js/8069">[菜单导航] HTML5炫酷粒子动画导航菜单特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery可视化表单拖拽编辑代码" href="/xiazai/js/8068">[表单按钮] jQuery可视化表单拖拽编辑代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS仿酷狗音乐播放器代码" href="/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音乐播放器代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="经典html5推箱子小游戏" href="/xiazai/js/8066">[html5特效] 经典html5推箱子小游戏</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery滚动添加或减少图片特效" href="/xiazai/js/8065">[图片特效] jQuery滚动添加或减少图片特效</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3个人相册封面悬停放大特效" href="/xiazai/js/8064">[相册特效] CSS3个人相册封面悬停放大特效</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10916" title="专卖店通用管理系统" target="_blank">[电商源码] 专卖店通用管理系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10915" title="商家联盟分红权返利购物商城系统源码" target="_blank">[电商源码] 商家联盟分红权返利购物商城系统源码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10914" title="网趣购物系统精装版" target="_blank">[电商源码] 网趣购物系统精装版</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10913" title="得推B2B2C商城" target="_blank">[电商源码] 得推B2B2C商城</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10912" title="商达讯网店系统豪华版" target="_blank">[电商源码] 商达讯网店系统豪华版</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10911" title="客客出品专业威客系统KPPW" target="_blank">[电商源码] 客客出品专业威客系统KPPW</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10910" title="名品购物网店系统" target="_blank">[电商源码] 名品购物网店系统</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/10909" title="支付宝快登ECSHOP支付宝用插件 utf8" target="_blank">[电商源码] 支付宝快登ECSHOP支付宝用插件 utf8</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3834" target="_blank" title="创意工作坊宣传单页A5模板设计下载">[psd素材] 创意工作坊宣传单页A5模板设计下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3833" target="_blank" title="旅行时光主题宣传海报PSD模板下载">[psd素材] 旅行时光主题宣传海报PSD模板下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3832" target="_blank" title="可爱南瓜灯万圣节合集矢量素材">[矢量素材] 可爱南瓜灯万圣节合集矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3831" target="_blank" title="波尔卡圆点风格INS模板设计下载">[psd素材] 波尔卡圆点风格INS模板设计下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3830" target="_blank" title="万圣节甜点零食合集矢量素材">[矢量素材] 万圣节甜点零食合集矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3829" target="_blank" title="监控产品宣传主图ps素材下载">[psd素材] 监控产品宣传主图ps素材下载</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3828" target="_blank" title="万圣节元素无缝背景矢量素材">[矢量素材] 万圣节元素无缝背景矢量素材</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/sucai/3827" target="_blank" title="感恩节活动列表ps素材下载">[psd素材] 感恩节活动列表ps素材下载</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8590" target="_blank" title="驾照考试驾校HTML5网站模板">[前端模板] 驾照考试驾校HTML5网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8589" target="_blank" title="驾照培训服务机构宣传网站模板">[前端模板] 驾照培训服务机构宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8588" target="_blank" title="HTML5房地产公司宣传网站模板">[前端模板] HTML5房地产公司宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8587" target="_blank" title="新鲜有机肉类宣传网站模板">[前端模板] 新鲜有机肉类宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8586" target="_blank" title="响应式天气预报宣传网站模板">[前端模板] 响应式天气预报宣传网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8585" target="_blank" title="房屋建筑维修公司网站CSS模板">[前端模板] 房屋建筑维修公司网站CSS模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8584" target="_blank" title="响应式志愿者服务网站模板">[前端模板] 响应式志愿者服务网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="/xiazai/code/8583" target="_blank" title="创意T恤打印店网站HTML5模板">[前端模板] 创意T恤打印店网站HTML5模板</a> </div> </li> </ul> </div> <script> $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> </div>    <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a> <a href="/about/jbzx.html" rel="nofollow" target="_blank" title="举报中心" class="cBlack">举报中心</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a href="https://www.php.cn/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a> <a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>  <a href="/new/" target="_blank" title="最新文章列表" class="cBlack">最新更新</a> <a href="https://global.php.cn/" target="_blank" title="English" class="cBlack">English</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span class="ylwTopBox"> <a href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a> <em style="display:none;" class="ylwTopSub"> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div class="clear"></div> </dd> </dl> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>  <style> .layui-fixbar{display: none;} </style> <div class="phpSdhBox" style="height:240px !important;"> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="/k24.html" target="_blank" class="hover" title="PHP学习"> <b class="icon1"></b> <p>PHP学习</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="https://www.php.cn/blog/detail/1047189.html" target="_blank"> <b class="icon2"></b> <p>技术支持</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="#"> <b class="icon6"></b> <p>返回顶部</p> </a> </div> </div> </li> </div>  <script src="/static/layui/layui.all.js"></script> <script src="/static/ueditor/ueditor.config.js"></script> <script src="/static/ueditor/ueditor.user.all.js"></script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <script type="text/javascript" src="/static/video/video.js?1.7" charset="UTF-8"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script> <script>$('.isAct-attr').viewer();</script> </body> </html>