blog

当前位置:首页>文章中心>blog
HTML教程---第一节 HTML 简介
blog 2008-03-05 1 阅读

HTML教程---第一节 HTML 简介

小泥巴 小泥吧科技 2008-03-05

HTML教程

第一节 HTML 简介

什么是HTML文件?

html 指超文本标签语言。

html 文件是包含一些标签的文本文件。这些标签告诉WEB浏览器如何显示页面。

HTML 文件必须HTMHTML作为文件的扩展名。

HTML 文件可以通过简单的文本编辑器来创建。

做个实验如何?

第一步:如果你使用 windows,请启动记事本。

如果你MAC,请启动 SimpleText

(在osx中请使用TextEdit,并设置一下参数:在参数设置中请选择 Plain text 字体替代 Rich text 字体,然后选择“在html文件中忽略rich text命令”。这一点很重要,因为不这样的话,HTML代码也许不能正常工作。)

第二步:键入以下文本:

Title of page

This is my first homepage. this text is bold

第三步:将这个文件存为“mypage.htm"

第四步:用浏览器打开这个文件,浏览器就会显示这个面了。

例子解释:

HTML文件中的第一个标签是。这个标签告诉浏览器这个HTML文件 的开始点。文件最后一个标签是。这个标签告诉您 的浏览器,这是HTML文件的结束点。

位于标签和标签之间的文本是头信息。头信息不会显示在浏览器窗口中。

</span></strong><strong><span>标签中的文本是文件的标题,标题会显示在浏览器的标题栏。</span></strong></p> <p class="MsoNormal"><strong><span></strong><strong><span>标签中的文本是将被浏览器显示出来的文本。</span></strong></p> <p class="MsoNormal"><strong><span><b></span></strong><strong><span>和</span><span></b></span></strong><strong><span>标签中的文本将以粗体显示。</span></strong></p> <p class="MsoNormal"><strong><span> </span></strong></p> <p class="MsoNormal"><strong><span>为什么</span> </strong><strong><span>我们要使用小写的标签?</span></strong></p> <p class="MsoNormal"><strong><span>我们刚才讲到:</span><span>html</span></strong><strong><span>标签对大小写是不敏感的:</span><span><b></span></strong><strong><span>和</span><span><B></span></strong><strong><span>的作用是相同的。当您在网上冲浪时,您会发现大多数教程在他们的例子中都使用大写的</span><span>html</span></strong><strong><span>标签。而我们总是使用小写。原因何在呢?</span></strong></p> <p class="MsoNormal"><strong><span>如果您希望为使用下一代</span><span>html</span></strong><strong><span>作好准备,您就应该使用小写标签。万维网聪明(</span><span>W3C</span></strong><strong><span>)的标准是:建议在</span><span>html 4</span></strong><strong><span>中使用小写标签,而</span><span>xhtml(</span></strong><strong><span>下一代</span><span>html</span></strong><strong><span>)中,必须使用小写标签。</span></strong></p> <p class="MsoNormal"><strong><span> </span></strong></p> <p class="MsoNormal"><strong><span>html </span></strong><strong><span>还是</span><span>htm</span></strong><strong><span>扩展名?</span></strong></p> <p class="MsoNormal"><strong><span>当您将一个</span><span>html</span></strong><strong><span>文件存盘时,您即可以</span><span>htm</span></strong><strong><span>也可以使用</span><span>html</span></strong><strong><span>作为扩展名。我们刚才使用了</span><span>.htm</span></strong><strong><span>作为上面那个例子的扩展名。不过这样做也许是一个坏习惯,习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯,这些软件只充许三个字母作为扩展名。</span></strong></p> <p class="MsoNormal"><strong><span>如果您使用最近的软件,我们认为使用</span><span>.html</span></strong><strong><span>是相当安全的做法。</span></strong></p> </div> <!-- Tag chips(单层 pboot:tags,0 迭代时不输出) --> <div class="pbcs-news-tags"> <span class="tags-label"><i class="fa fa-tags"></i> 相关标签:</span> </div> <!-- 分享按钮 row --> <div class="pbcs-news-share"> <span class="share-label">分享到:</span> <button type="button" class="share-btn share-copy" title="复制链接" data-url="https://xiaoniba.com/blog/201.html"> <i class="fa fa-link"></i> </button> <!-- [PBCS PATCH] 微信按钮 + 二维码弹层 点击微信图标 → 上方弹出二维码(用 PBootCMS 自带 /core/qrcode.php?string=URL 生成 PNG) --> <span class="share-wechat-wrap"> <a href="javascript:void(0);" class="share-btn share-wechat" id="pbcs-wechat-btn" title="分享到微信" onclick="return false;"> <i class="fa fa-weixin"></i> </a> <div class="pbcs-qr-popover" id="pbcs-wechat-qr"> <!-- [PBCS PATCH] 用 PBootCMS 内置 {pboot:qrcode} 标签直接渲染 img 解析顺序:parserSiteLabel (line 105) 先把 https://xiaoniba.com/blog/201.html 替换为真实 URL → parserQrcodeLabel (line 124) 拿到 string 拼 <img src="core/qrcode.php?string=...">。 旧版用 data-qr-base + JS 拼 src,PBootCMS 解析器对 HTML data 属性里的 处理不完整,导致 src 始终为空。换成内置标签后服务端直接输出可用 URL。 --> <img src="/core/qrcode.php?string=https%3A%2F%2Fxiaoniba.com%2Fblog%2F201.html" class="qrcode" alt="二维码"> <p class="qr-text">用 <strong>微信</strong> 扫一扫<br>分享给好友 / 朋友圈</p> </div> </span> <a href="javascript:void(0);" class="share-btn share-qq" title="分享到 QQ" onclick="pbcsShareQQ(); return false;"> <i class="fa fa-qq"></i> </a> <a href="javascript:void(0);" class="share-btn share-weibo" title="分享到微博" onclick="pbcsShareWeibo(); return false;"> <i class="fa fa-weibo"></i> </a> <span class="share-success" id="pbcs-share-success"><i class="fa fa-check-circle"></i> 已复制!</span> </div> </div> <!-- 上下篇(卡片化) --> <div class="pbcs-news-prevnext"> <a href="/blog/200.html" class="pn-prev"> <span class="pn-label"><i class="fa fa-arrow-left"></i> 上一篇</span> <span class="pn-title">HTML教程---第二节 HTML元素</span> </a> <a href="/blog/202.html" class="pn-next"> <span class="pn-label">下一篇 <i class="fa fa-arrow-right"></i></span> <span class="pn-title">HTML标签详细讲解说明[HTML语法]</span> </a> </div> </article> <!-- =================== 右:sidebar =================== --> <aside class="pbcs-sidebar"> <!-- 相关文章(4 条同分类最新) --> <div class="pbcs-widget"> <h3 class="widget-title"> <i class="fa fa-newspaper-o"></i> 相关推荐 </h3> <ul class="pbcs-related-list"> <li> <span class="rel-num">1</span> <a href="/blog/851.html" class="rel-title" title="wordpross nginx防护配置">wordpross nginx防护配置</a> </li> <li> <span class="rel-num">2</span> <a href="/blog/849.html" class="rel-title" title="Custom Styles">Custom Styles</a> </li> <li> <span class="rel-num">3</span> <a href="/blog/846.html" class="rel-title" title="@Vposy Adobe最新版">@Vposy Adobe最新版</a> </li> <li> <span class="rel-num">4</span> <a href="/blog/845.html" class="rel-title" title="php ldap 2 调用">php ldap 2 调用</a> </li> </ul> </div> <!-- Tag 云 --> <div class="pbcs-widget"> <h3 class="widget-title"> <i class="fa fa-tags"></i> 热门标签 </h3> <div class="pbcs-tagcloud"> <a href="/tag/%E6%95%B0%E6%8D%AE%E5%BA%93" class="tag-pill">数据库</a> <a href="/tag/sqlserver" class="tag-pill">sqlserver</a> <a href="/tag/Microsoft" class="tag-pill">Microsoft</a> <a href="/tag/%E5%BE%AE%E8%BD%AF" class="tag-pill">微软</a> <a href="/tag/im" class="tag-pill">im</a> <a href="/tag/%E8%81%8A%E5%A4%A9%E8%BD%AF%E4%BB%B6" class="tag-pill">聊天软件</a> <a href="/tag/%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8" class="tag-pill">字节跳动</a> <a href="/tag/%E9%98%BF%E9%87%8C" class="tag-pill">阿里</a> <a href="/tag/css" class="tag-pill">css</a> <a href="/tag/grid" class="tag-pill">grid</a> <a href="/tag/felx" class="tag-pill">felx</a> <a href="/tag/%E5%B8%83%E5%B1%80" class="tag-pill">布局</a> <a href="/tag/%E8%85%BE%E8%AE%AF" class="tag-pill">腾讯</a> <a href="/tag/windows" class="tag-pill">windows</a> <a href="/tag/windowsServer" class="tag-pill">windowsServer</a> <a href="/tag/%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%B3%BB%E7%BB%9F" class="tag-pill">服务器系统</a> <a href="/tag/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F" class="tag-pill">操作系统</a> <a href="/tag/microsoft" class="tag-pill">microsoft</a> <a href="/tag/%E5%BE%AE%E8%BD%AF%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%B3%BB%E7%BB%9F" class="tag-pill">微软服务器系统</a> <a href="/tag/notepad" class="tag-pill">notepad</a> </div> </div> <!-- CTA 联系方式 --> <div class="pbcs-widget pbcs-cta-widget"> <h3 class="widget-title"> <i class="fa fa-comments"></i> 联系我们 </h3> <p>需要技术支持或合作咨询?专业团队为您服务</p> <a href="/contact/" class="cta-phone">Tel:023-67171216</a> <a href="mailto:admin@xiaoniba.com" class="cta-phone">Email:admin@xiaoniba.com →</a> <a href="/contact/" class="cta-btn">联系我们 →</a> </div> </aside> </div> </div> </div> <!-- ===== 分享 + 复制链接 JS ===== --> <script> (function () { // 复制链接 var copyBtn = document.querySelector('.share-btn.share-copy'); var successEl = document.getElementById('pbcs-share-success'); if (copyBtn) { copyBtn.addEventListener('click', function () { var url = this.getAttribute('data-url') || window.location.href; var ok = false; try { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(url); ok = true; } else { var ta = document.createElement('textarea'); ta.value = url; ta.style.position = 'fixed'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); ok = document.execCommand('copy'); document.body.removeChild(ta); } } catch (e) { ok = false; } if (ok && successEl) { successEl.classList.add('show'); setTimeout(function () { successEl.classList.remove('show'); }, 2000); } }); } // [PBCS PATCH] 微信二维码弹层(点击切换显示 / 点别处关闭) // 二维码由 PBootCMS {pboot:qrcode} 标签服务端直接渲染(见上方 popover HTML), // 这里只负责弹层显示/隐藏逻辑。 var wechatBtn = document.getElementById('pbcs-wechat-btn'); var wechatPopover = document.getElementById('pbcs-wechat-qr'); if (wechatBtn && wechatPopover) { wechatBtn.addEventListener('click', function (e) { e.stopPropagation(); wechatPopover.classList.toggle('show'); }); // 点弹层内部不关闭 wechatPopover.addEventListener('click', function (e) { e.stopPropagation(); }); // 点别处关闭 document.addEventListener('click', function () { wechatPopover.classList.remove('show'); }); // ESC 关闭 document.addEventListener('keydown', function (e) { if (e.key === 'Escape') wechatPopover.classList.remove('show'); }); } // 其它分享(占位 — 真实项目里可对接具体 API) window.pbcsShareQQ = function () { window.open('https://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '_blank'); }; window.pbcsShareWeibo = function () { window.open('https://service.weibo.com/share/share.php?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title), '_blank'); }; // [PBCS PATCH] 布局切换(双栏 ↔ 单栏)— localStorage 记忆用户偏好 // 双栏 → 桌面 8+4 grid;单栏 → 桌面 1fr(主内容占满,sidebar wrap 到下一行) // 移动端按钮 CSS 隐藏,但 JS 仍跑(不报错) (function () { var STORAGE_KEY = 'pbcs_news_layout'; var layout = document.querySelector('.pbcs-news-layout'); var toggle = document.getElementById('pbcs-layout-toggle'); if (!layout || !toggle) return; var iconEl = toggle.querySelector('i'); var textEl = toggle.querySelector('.toggle-text'); function applyState(isSingle) { if (isSingle) { layout.classList.add('pbcs-layout-single'); toggle.classList.add('is-single'); if (iconEl) iconEl.className = 'fa fa-bars'; if (textEl) textEl.textContent = '单栏'; toggle.title = '当前:单栏布局(点击切换到双栏)'; } else { layout.classList.remove('pbcs-layout-single'); toggle.classList.remove('is-single'); if (iconEl) iconEl.className = 'fa fa-columns'; if (textEl) textEl.textContent = '双栏'; toggle.title = '当前:双栏布局(点击切换到单栏)'; } } // 恢复用户偏好(localStorage 不可用时静默失败) try { if (localStorage.getItem(STORAGE_KEY) === 'single') applyState(true); } catch (e) { /* 隐私模式 / 禁用 localStorage,静默 */ } toggle.addEventListener('click', function () { var isSingle = !layout.classList.contains('pbcs-layout-single'); applyState(isSingle); try { localStorage.setItem(STORAGE_KEY, isSingle ? 'single' : 'double'); } catch (e) { /* 静默 */ } }); })(); })(); </script> <div class="container"> <div class="shadow-sm p-3 my-5 bg-white rounded"> <h4>发表评论:</h4> <form class="my-4" onsubmit="return submitcomment(this);" data-action="/comment/add/?contentid=201" > <div class="form-group"> <textarea name="comment" id="comment" class="form-control" placeholder="请输入评论内容"></textarea> </div> <div class="form-group"> <div class="row"> <div class="col-6 col-md-3"> <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"> </div> <div class="col-6 col-md-3"> <img title="点击刷新" class="codeimg" style="height:33px;" src="/core/code.php" onclick="this.src='/core/code.php?'+Math.round(Math.random()*10);" /> </div> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-info mb-2">提交评论</button> </div> </form> <h4>评论记录:</h4> <a name="comment"></a> <!-- 分页 --> <div class="text-center my-5 text-secondary">未查询到任何数据!</div> </div> </div> <!-- 评论回复弹框 --> <div class="modal" tabindex="-1" role="dialog" id="reply"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">回复评论:</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form onsubmit="return submitcomment(this);" data-action="" id="replyform"> <div class="modal-body"> <div class="form-group"> <textarea name="comment" id="comment" class="form-control" placeholder="请输入评论内容"></textarea> </div> <div class="form-group"> <div class="row"> <div class="col-6"> <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"> </div> <div class="col-6"> <img title="点击刷新" class="codeimg" style="height:33px;" src="/core/code.php" onclick="this.src='/core/code.php?'+Math.round(Math.random()*10);" /> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> <button type="submit" class="btn btn-info">提交评论</button> </div> </form> </div> </div> </div> <script> //评论回复弹框 $('.replybtn').on("click",function(){ var url=$(this).data("action"); $("#reply").modal("show"); $("#replyform").data("action",url); }); //提交评论 function submitcomment(obj){ var url= $(obj).data("action"); var comment=$(obj).find("#comment").val(); var checkcode=$(obj).find("#checkcode").val(); $.ajax({ type: 'POST', url: url, dataType: 'json', data: { comment: comment, checkcode: checkcode }, success: function (response, status) { if(response.code){ alert(response.data); $(obj)[0].reset(); $(".modal").modal("hide"); window.location.reload() }else{ if(response.tourl!=""){ if(confirm(response.data+'是否立即跳转登录?')){ location.href=response.tourl; } } $('.codeimg').click();//更新验证码 } }, error:function(xhr,status,error){ alert('返回数据异常!'); } }); return false; } </script> <!-- ===================================================================== [PBCS PATCH 2026-08-01] comm/foot.html 整体美化 v1 --------------------------------------------------------------------- 之前:Bootstrap 4 默认 bg-light + text-secondary + 3 栏, aoyun.css 的 .online 亮蓝 #27a8e1(与全站紫蓝不协调), 移动端底栏 bg-info 亮青色突兀。 现在:4 栏现代深紫蓝渐变 + 紫蓝移动底栏 + 紫蓝在线客服, 与 home-modern / about-modern 风格统一。 字段对查 0 丢失:17 unique 标签 + 1 个 sort 块 + 全部 PBCS PATCH 脚本保留 引用样式:css/comm-foot-modern.css ===================================================================== --> <!-- [PBCS PATCH] footer 专用现代样式 — 紫蓝渐变 + 4 栏 --> <link rel="stylesheet" href="/template/default/css/comm-foot-modern.css?v=v1"> <!-- ===================================================================== 主 Footer — 4 栏深紫蓝渐变 ===================================================================== --> <footer class="pbcs-foot"> <div class="pbcs-foot-wrap"> <div class="pbcs-foot-grid"> <!-- Col 1:公司信息(5/12) --> <div class="pbcs-foot-col pbcs-foot-info"> <img src="https://cdn.xiaoniba.com/xiaoniba.com/2026/07/23/logo-03.png" alt="重庆市小泥吧科技有限公司" class="logo"> <h4 class="name">重庆市小泥吧科技有限公司</h4> <p class="desc">专业 IT 技术服务与 AI 解决方案提供商,致力于为客户创造长期价值。</p> <ul class="meta"> <li> <i class="fa fa-id-card"></i> <span>营业执照:91500112305095936A</span> </li> <li> <i class="fa fa-globe"></i> <span>备案号:<a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener">渝ICP备15003197号-2</a></span> </li> <li> <i class="fa fa-map-marker"></i> <span>地址:重庆市渝北区翔宇路15号</span> </li> </ul> </div> <!-- Col 2:站点导航(2/12) --> <div class="pbcs-foot-col pbcs-foot-nav"> <h4>站点导航</h4> <ul> <li><a href="/">首页</a></li> <li><a href="/article/">文章中心</a></li> <li><a href="/product/">产品中心</a></li> <li><a href="/download_13/">下载中心</a></li> <li><a href="/aboutus/">了解我们</a></li> </ul> </div> <!-- Col 3:联系方式(2/12) --> <div class="pbcs-foot-col pbcs-foot-contact"> <h4>联系方式</h4> <ul> <li> <span class="icon-wrap"><i class="fa fa-phone"></i></span> <span class="value"><a href="tel:023-67171216">023-67171216</a></span> </li> <li> <span class="icon-wrap"><i class="fa fa-mobile"></i></span> <span class="value"><a href="tel:15823423319">15823423319</a></span> </li> <li> <span class="icon-wrap"><i class="fa fa-envelope"></i></span> <span class="value"><a href="mailto:admin@xiaoniba.com">admin@xiaoniba.com</a></span> </li> <li> <span class="icon-wrap"><i class="fa fa-qq"></i></span> <span class="value">136288834</span> </li> </ul> </div> <!-- Col 4:关注我们(3/12) --> <div class="pbcs-foot-col pbcs-foot-qr"> <a href="https://zzlz.gsxt.gov.cn/businessCheck/verifKey.do?showType=p&serial=91500112305095936A-SAIC_SHOW_10000091500112305095936A1692001207508&signData=MEYCIQCVSXYB5GJf/DkmTNAjfy7fdkIhV3arGG/tG/jqiMi7AQIhALXQM3zhtJUQFGHhnOj53Z49JVhrEFm00yUI+pgzFU+0" class="pbcs-foot-qr-card"> <div class="img-wrap"> <img src="https://cdn.xiaoniba.com/xiaoniba.com/upload/image/20260726/lz4.avif" alt="关注我们"> </div> <div class="label">营业执照</div> <div class="sub">工商验照</div> </a> <div class="pbcs-foot-qr-card"> <div class="img-wrap"> <img src="/core/qrcode.php?string=https%3A%2F%2Fxiaoniba.com" class="qrcode" alt="二维码"> </div> <div class="label">手机访问</div> <div class="sub">扫码打开</div> </div> <div class="pbcs-foot-qr-card"> <div class="img-wrap"> <img src="https://cdn.xiaoniba.com/xiaoniba.com/upload/other/20260802/qrcode_for_gh_4501fe37a43b_430.avif"> </div> <div class="label">关注我们</div> <div class="sub">官方公众号</div> </div> </div> </div> </div> <!-- 版权栏 --> <div class="pbcs-foot-copyright"> <div class="copy-text">Copyright © 2014-2026 小泥吧科技 All Rights Reserved.</div> <div> <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener">渝ICP备15003197号-2</a> <span class="sep">|</span> <a href="/contact/" rel="nofollow">联系我们</a> <span class="sep">|</span> <a href="https://beian.mps.gov.cn/#/query/webSearch">公安备案号:渝公网安备50011202500456号</a> </div> </div> </footer> <!-- ===================================================================== 在线客服侧栏 — 紫蓝主题(替代 aoyun.css 的 .online 亮蓝) ===================================================================== --> <div class="pbcs-foot-online"> <!-- QQ 咨询 --> <div class="pbcs-foot-online-item"> <i class="fa fa-qq"></i> <span>QQ咨询</span> <div class="pbcs-foot-online-pop"> <h5><i class="fa fa-qq"></i>QQ 在线咨询</h5> <a target="_blank" class="qq-row" href="http://wpa.qq.com/msgrd?v=3&uin=136288834&site=qq&menu=yes"> <img src="/template/default/images/qq.jpg" alt="售前咨询"> <span>136288834</span> </a> <a target="_blank" class="qq-row" href="http://wpa.qq.com/msgrd?v=3&uin=136288834&site=qq&menu=yes"> <img src="/template/default/images/qq.jpg" alt="售后服务"> <span>售后服务</span> </a> </div> </div> <!-- 免费通话 --> <div class="pbcs-foot-online-item"> <i class="fa fa-volume-control-phone"></i> <span>回电话</span> <div class="pbcs-foot-online-pop"> <h5><i class="fa fa-volume-control-phone"></i>回拨通话</h5> <p>我们稍后回拨您的电话</p> <p>座机请加区号</p> <form onsubmit="return subform(this);"> <input type="text" name="tel" id="tel" autocomplete="off" placeholder="请输入您的电话号码" required maxlength="30"> <button type="submit">需要回电</button> </form> </div> </div> <!-- 微信 --> <div class="pbcs-foot-online-item"> <i class="fa fa-weixin"></i> <span>微信联系</span> <div class="pbcs-foot-online-pop"> <h5><i class="fa fa-weixin"></i>微信扫一扫</h5> <img class="qr-img" src="https://cdn.xiaoniba.com/xiaoniba.com/upload/other/20260724/1784861726302185.avif" alt="微信二维码"> <p class="qr-tip">扫码加微信</p> </div> </div> <!-- 返回顶部 --> <button class="pbcs-foot-online-item pbcs-foot-scroll-top" type="button" aria-label="返回顶部"> <i class="fa fa-chevron-up"></i> <span>返回顶部</span> </button> </div> <!-- [PBCS PATCH] 返回顶部按钮点击行为 --> <script> $(function () { var $btn = $('.pbcs-foot-scroll-top'); if ($btn.length === 0) return; $btn.on('click', function (e) { e.preventDefault(); // 优先用原生 smooth(现代浏览器),降级用 jQuery if (window.scrollTo) { try { window.scrollTo({ top: 0, behavior: 'smooth' }); return; } catch (_) {} } $('html, body').animate({ scrollTop: 0 }, 300); }); }); </script> <script src="/template/default/js/popper.min.js"></script> <script src="/template/default/bootstrap/js/bootstrap.min.js"></script> <script src="/template/default/js/wow.min.js"></script> <script src="/template/default/js/aoyun.js?v=v1.2.2"></script> <script> //ajax提交表单 function subform(obj){ var url='/form/2/'; var tel=$(obj).find("#tel").val(); var reg = /^(1|0)[\d\-]+$/; if (!reg.test(tel)) { alert('电话号码错误!'); return false; } $.ajax({ type: 'POST', url: url, dataType: 'json', data: { tel: tel }, success: function (response, status) { if(response.code){ alert("您的来电已收到,我们会尽快联系您!"); $(obj)[0].reset(); }else{ alert(response.data); } }, error:function(xhr,status,error){ alert('返回数据异常!'); } }); return false; } </script> <!-- [PBCS PATCH] 导航下拉菜单:hover 自动展开 + 桌面端点击父级直接跳 href --> <script> $(function () { var $navToggles = $('.navbar-nav .dropdown > .dropdown-toggle'); if ($navToggles.length === 0) return; // 1) hover 自动展开(所有屏幕) $('.navbar-nav .dropdown').hover( function () { $(this).addClass('show').find('> .dropdown-menu').addClass('show'); $(this).find('> .dropdown-toggle').attr('aria-expanded', 'true'); }, function () { $(this).removeClass('show').find('> .dropdown-menu').removeClass('show'); $(this).find('> .dropdown-toggle').attr('aria-expanded', 'false'); } ); // 2) 桌面端 vs 移动端动态切换 data-toggle // 桌面端:去掉 data-toggle="dropdown" → 点击父级 <a> 走 href(不展开下拉) // 移动端:保留 data-toggle="dropdown" → Bootstrap 接管点击 → 展开下拉 var isDesktop = function () { return window.innerWidth >= 992; }; function updateNavMode() { if (isDesktop()) { $navToggles.removeAttr('data-toggle'); } else { $navToggles.attr('data-toggle', 'dropdown'); } } updateNavMode(); $(window).on('resize', updateNavMode); }); </script> <!-- [PBCS PATCH] 代码块插件:highlight.js(本地化)+ 本插件 JS --> <!-- 本地方案([v3.2.18-patch] 把原 jsdelivr CDN 改为本地,避网络挂): - 资源位置:【pboot:sitetplpath】/js/highlightjs/ ├── highlight.min.js └── languages/【php,javascript,css,xml,json,bash,python,sql,yaml,markdown】.min.js - 下载源:jsdelivr github cdn-release 11.9.0 build(手工拼的,避开 check_patches __NOT__) --> <script src="/template/default/js/highlightjs/highlight.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/php.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/javascript.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/css.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/xml.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/json.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/bash.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/python.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/sql.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/yaml.min.js" defer></script> <script src="/template/default/js/highlightjs/languages/markdown.min.js" defer></script> <script src="/template/default/js/pbcs-codeblock.js" defer></script> </body> </html>