网页开发初学者必知的十大技巧与工具，你掌握了吗？-速优物联【PerfCloud】

首页

物联资讯

物联网IOT平台定制文章

网页开发初学者必知的十大技巧与工具，你掌握了吗？

作者：网友投稿

阅读数：83

更新时间：2024-07-24 16:19:32

一、网页开发基础技巧

1. HTML基础结构与标签使用

1.1 HTML文档的基本结构

HTML，即超文本标记语言，是构建网页的基础。一个完整的HTML文档通常包括头部（head）和主体（body）两部分。头部包含了文档的元信息，如、字符编码、样式链接等；而主体则包含了网页的实际内容，如段落、图片、链接等。了解HTML文档的基本结构，对于初学者来说，是掌握网页开发的第一步。

在HTML文档中，标签是构成内容的基本单位。每个标签都有其特定的含义和用途。例如，标签用于定义网页的，<p>标签用于创建段落，<a>标签用于创建链接等。掌握这些常用标签的使用方法和属性，可以帮助初学者快速构建出基本的网页结构。</p></p><p><p>此外，还需要注意HTML标签的嵌套和层级关系。正确的嵌套顺序和层级关系对于保证网页的正确显示和搜索引擎的友好性都至关重要。因此，初学者在编写HTML代码时，应该遵循严格的语法规范，避免出现标签错误或遗漏的情况。</p></p><p><p>除了基本的标签使用外，初学者还应该了解HTML的一些高级特性，如表单、框架、多媒体嵌入等。这些特性可以帮助开发者实现更复杂的网页功能和交互效果。</p></p><p><p>总之，掌握HTML基础结构与标签使用是网页开发的基础，也是初学者必须掌握的技能之一。通过不断学习和实践，初学者可以逐渐熟悉HTML的语法和规范，为后续的学习打下坚实的基础。</p></p><h5>1.2 常用的HTML标签及其功能</h5><p><p>在HTML中，标签是构建网页内容的基本元素。每个标签都有其特定的功能和用途，掌握这些标签对于网页开发者来说至关重要。以下是一些常用的HTML标签及其功能的简要介绍。</p></p><p><p>首先是标签，如<h1>到<h6>。这些标签用于定义网页中的或子，其中<h1>表示最高级别的，<h6>表示最低级别的。通过合理使用这些标签，不仅可以提高网页的可读性，还有助于搜索引擎理解网页的结构和内容。</p></p><p><p>其次是段落标签<p>，它用于创建文本段落。在HTML中，每个<p>标签之间的内容都会被浏览器视为一个独立的段落，并在显示时进行适当的格式化处理。</p></p><p><p>链接标签<a>用于创建超链接，允许用户点击后跳转到其他网页或网站。通过指定href属性，可以定义链接的目标地址。此外，还可以使用target属性来控制链接的打开方式，如在新窗口或标签页中打开。</p></p><p><p>图片标签<img>用于在网页中插入图像。通过指定src属性，可以定义图像的来源地址。此外，还可以使用alt属性为图像提供替代文本，以便在图像无法加载时显示相关信息。</p></p><p><p>除了以上几个常用的标签外，HTML还有许多其他标签，如表单标签、列表标签、表格标签等。这些标签各自具有特定的功能和用途，可以帮助开发者实现更复杂的网页结构和交互效果。因此，初学者应该不断学习和掌握这些标签的使用方法，以便更好地应用于实际开发中。</p></p><h4>2. CSS样式设计与布局</h4><h5>2.1 CSS选择器与样式应用</h5><p><p>CSS，即层叠样式表，是网页开发中用于控制页面样式的重要工具。CSS选择器则是CSS中的核心概念之一，它决定了哪些元素将应用特定的样式规则。掌握CSS选择器与样式应用，对于实现精美的网页布局和视觉效果至关重要。</p></p><p><p>CSS选择器有多种类型，包括元素选择器、类选择器、ID选择器、属性选择器等。每种选择器都有其特定的用途和优先级。例如，元素选择器可以直接选择HTML文档中的元素并应用样式；类选择器则可以根据元素的类属性来选择并应用样式；ID选择器则用于选择具有特定ID属性的元素。通过灵活组合使用这些选择器，我们可以精确地控制网页中各个元素的样式表现。</p></p><p><p>在样式应用方面，CSS提供了丰富的样式属性和值，用于控制元素的布局、颜色、字体等各个方面。通过为选择器指定相应的样式属性和值，我们可以实现各种复杂的视觉效果和交互体验。例如，我们可以使用CSS来控制元素的宽高、边距、内边距等布局属性，实现灵活的页面布局；我们还可以使用CSS来控制元素的背景色、字体大小、颜色等视觉属性，提升页面的美观度和可读性。</p></p><p><p>此外，CSS还支持盒模型、浮动、定位等高级布局技术，这些技术可以帮助我们实现更复杂的页面布局和交互效果。例如，通过使用浮动和定位技术，我们可以实现元素的水平或垂直排列、重叠等效果；通过使用盒模型技术，我们可以</p><p><h3>网页开发常见问题（FAQs）</h3><p>1、网页开发初学者应该掌握哪些基本技巧？</p><p>网页开发初学者应该掌握的基本技巧包括HTML、CSS和JavaScript的基础知识，理解网页结构、样式和交互的基本原理。此外，还应该学习如何使用开发工具进行代码编辑和调试，以及了解响应式设计和SEO优化的基本概念。</p><p>2、有哪些适合网页开发初学者的工具推荐？</p><p>对于网页开发初学者，推荐使用一些易于上手且功能强大的工具。例如，代码编辑器可以选择Visual Studio Code或Sublime Text，它们提供了丰富的插件和扩展，方便开发者进行代码编写和调试。此外，还可以使用一些在线的网页开发平台，如Glitch或Repl.it，它们提供了云端的环境和模板，让初学者能够快速上手实践。</p><p>3、网页开发中的响应式设计是什么，为什么重要？</p><p>响应式设计是指网页能够在不同设备和屏幕尺寸上呈现出良好的用户体验。它的重要性在于，随着移动互联网的普及，用户访问网页的设备越来越多样化，从桌面电脑到手机、平板等移动设备都有。通过响应式设计，可以确保网页在不同设备上都能够自适应显示，提供良好的阅读和交互体验，从而提升用户满意度和留存率。</p><p>4、网页开发中如何进行SEO优化？</p><p>在网页开发中，进行SEO优化是非常重要的。首先，要确保网页的、描述和关键词等元数据设置得当，能够准确反映网页内容。其次，要优化网页的URL结构，使其简洁、清晰且易于理解。此外，还可以通过优化网页的加载速度、提升内容质量和相关性、增加内部链接和外部链接等方式来提升网页在搜索引擎中的排名。同时，也要注意避免使用过度优化或黑帽SEO等不当手段，以免被搜索引擎惩罚。</p></p> <ul> <li>上一篇：<a href="/blog/post/73015">MES制造系统解决方案：如何提升生产效率并降低运营成本？</a></li> <li>下一篇：<a href="/blog/post/73017">山东网站开发：如何选择合适的开发团队，满足您的业务需求？</a></li> </ul> </div> </div> <div class="frame-layout-child"></div> <div class="product-platform-parent"> <button class="product-platform"> <div class="div27"><a href="https://www.perfcloud.cn/blog/tag/123020">mysqldump</a></div> </button> <button class="product-platform"> <div class="div27"><a href="https://www.perfcloud.cn/blog/tag/122994">国家认证标准</a></div> </button> <button class="product-platform"> <div class="div27"><a href="https://www.perfcloud.cn/blog/tag/218">景区票务</a></div> </button> <button class="product-platform"> <div class="div27"><a href="https://www.perfcloud.cn/blog/tag/384">票务核销系统</a></div> </button> <button class="product-platform"> <div class="div27"><a href="https://www.perfcloud.cn/blog/tag/445">资产管理</a></div> </button> </div> <div class="col-md-12" style="border-top: solid 2px #ccc; font-weight:400"> <div id="comment-section" class="bg-light p-4 rounded"> <h3 class="mb-4" style="font-weight:400"><i class="fa fa-pencil"></i> 发表评论</h3> <form id="commentForm" method="post" action="/blog/post/comment" style="border-radius: 0;"> <div class="col-md-12" style="margin:10px auto;"> <div class="col-md-4"> <input type="text" class="form-control" id="commentName" name="commentName" placeholder="请输入您的昵称" required> </div> <div class="col-md-4"> <input type="email" class="form-control" id="commentEmail" name="commentEmail" placeholder="请输入您的邮箱"> </div> <div class="col-md-4"> <input type="url" class="form-control" id="commentWebsite" name="commentWebsite" placeholder="请输入您的网址"> </div> </div> <div class="col-md-12" style="padding:10px 30px;"> <textarea class="form-control" id="commentText" name="commentText" rows="5" placeholder="来都来了，说点什么吧..."></textarea> </div> <button type="submit" class="btn btn-primary" style=" cursor: pointer; border: 0; padding: var(--padding-base); background-color: var(--usage-primary-semi-color-primary); width: 168px; border-radius: var(--br-9xs); overflow: hidden; flex-shrink: 0; align-items: center; justify-content: center; box-sizing: border-box; z-index: 1; margin-left: 30px; ">发布评论</button> </form> <div id="commentsList" class="mt-5" style="font-weight:400"> <h3 style="font-weight:400">评论列表</h3> <p class="text-muted">暂时没有评论，有什么想聊的？</p> <div class="comment-item" style="display:none;"> <p><strong>阿帅</strong>: 我们经常会遇到表格内容显示不完整的问题。 <span class="replies-btn">回复</span></p> <div class="replies"> <div class="reply-item"> <p><strong>理理</strong>: 使用自动换行功能，以及利用条件格式和数据分析工具等。<span class="replies-btn">回复</span></p> </div> </div> <div class="reply-form" style="display:none;"> <input type="text" placeholder="回复这条评论..." class="form-control reply-input"> <button class="btn btn-primary reply-btn">回复</button> </div> </div> </div> </div> </div> </div> </div> <div style="font-weight: 300;" class="col-3 col-md-3 col-lg-3"> <div class="remote-work-community"> <img class="image-1174-icon" loading="eager" alt="" src="https://cdn3.bekaie.com/ewb2024/static/public/image-1174@2x.png" /> <img class="icon3" alt="物联网IOT平台定制" src="https://cdn3.bekaie.com/ewb2024/static/public/2474119-1@2x.png" /> <div class="remote-work-community1"> <div class="remote-work-community-child"></div> <h3 class="h32">物联网IOT平台定制</h3> <div class="div52"> 连接万物，智慧生活。定制物联网IOT系统，助您实现设备互联，引领物联网时代。 </div> <button class="logo2"> <div class="div53"><a href="http://www.perfcloud.cn/gindex/91" style="color:#fff">不看就亏了！</a></div> </button> </div> </div> <br> <div class="frame-set" style="position: sticky;"> <div class="wrapper9"> <div class="div42">推荐阅读</div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82463" class="post-title">'物联网小程序名称'如何助力企业实现智能化管理，解决运营难题？</a></div> <div class="frame1">2024-08-12 22:38:13</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82461" class="post-title">如何高效实现物联网小程序定制开发，解决行业痛点与需求？</a></div> <div class="frame1">2024-09-24 12:12:57</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82455" class="post-title">物联网小程序是什么？揭秘物联网时代的轻量级应用革命</a></div> <div class="frame1">2024-08-12 22:38:13</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82453" class="post-title">农业物联网系统如何精准解决农民灌溉难题，提升作物产量与品质？</a></div> <div class="frame1">2024-09-24 18:05:40</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82450" class="post-title">物联网小程序开发费用详解：如何有效控制预算并避免隐形开销？</a></div> <div class="frame1">2024-08-12 22:38:13</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82446" class="post-title">农业物联网监测系统如何精准解决作物生长中的关键问题？</a></div> <div class="frame1">2024-08-12 22:38:13</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82442" class="post-title">如何设计高效易用的物联网小程序界面以提升用户体验？</a></div> <div class="frame1">2024-09-25 22:14:24</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82441" class="post-title">深度解析：什么叫农业物联网？现代农业的科技革新</a></div> <div class="frame1">2024-09-25 22:13:39</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82434" class="post-title">深度解析：农业物联网到底是什么意思，如何助力现代农业发展？</a></div> <div class="frame1">2024-09-25 22:13:50</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82433" class="post-title">如何高效利用物联网小程序分销策略，解决市场拓展难题？</a></div> <div class="frame1">2024-09-24 17:42:08</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82427" class="post-title">如何构建高效农业物联网架构并掌握关键技术？</a></div> <div class="frame1">2024-08-12 22:38:13</div> </div> </div> <div class="rectangle1"> <div class="rectangle2"> <div class="div43"><a href="https://www.perfcloud.cn/blog/post/82424" class="post-title">如何打造高效便捷的物联网小程序app，解决智能家居控制难题？</a></div> <div class="frame1">2024-08-12 22:38:13</div> </div> </div> </div> <br> <div class="cooperation-partners-frame"> <div class="div31">热门百科</div> <div class="echo-tik"> <div class="frame-parent1"> <button class="frame-button"> <div class="div32"><a href="https://www.perfcloud.cn/blog/tag/123020">mysqldump</a></div> </button> <button class="frame-button"> <div class="div32"><a href="https://www.perfcloud.cn/blog/tag/384">票务核销系统</a></div> </button> <button class="frame-button"> <div class="div32"><a href="https://www.perfcloud.cn/blog/tag/218">景区票务</a></div> </button> </div> <div class="hi-five-sound-plus"> <button class="wrapper3"> <div class="div35"><a href="https://www.perfcloud.cn/kw/54009-data"> MQTT客户端的作用</a></div> </button> <button class="wrapper3"> <div class="div35"><a href="https://www.perfcloud.cn/kw/54008-data"> MQTT客户端远程控制WIFI设备</a></div> </button> <button class="wrapper3"> <div class="div35"><a href="https://www.perfcloud.cn/kw/54007-data"> MQTT客户端设置</a></div> </button> </div> <div class="hi-five-sound-plus1"> <button class="wrapper5"> <div class="div32"><a href="https://www.perfcloud.cn/blog/tag/445">资产管理</a></div> </button> <button class="wrapper5"> <div class="div32"><a href="https://www.perfcloud.cn/blog/tag/122994">国家认证标准</a></div> </button> <button class="wrapper5"> <div class="div32"><a href="https://www.perfcloud.cn/blog/tag/1069">园区管理软件免费版</a></div> </button> </div> </div> </div> <br> <div class="remote-work-community"> <img class="image-1174-icon" loading="eager" alt="" src="https://cdn3.bekaie.com/ewb2024/static/public/image-1174@2x.png" /> <img class="icon3" alt="热推产品-全域低代码平台" src="https://cdn3.bekaie.com/ewb2024/static/public/2474119-1@2x.png" /> <div class="remote-work-community1"> <div class="remote-work-community-child"></div> <h3 class="h32">会Excel就能开发软件</h3> <div class="div52"> 用<b>全域低代码平台</b>，可视化<b>拖拉拽/导入Excel</b>，就可以开发小程序、管理系统、物联网、ERP、CRM等应用 </div> <button class="logo2" style="width:50%"> <div class="div53"><a href="http://www.perfcloud.cn/gindex/30" style="color:#fff">不用就落伍了</a></div> </button> </div> </div> </div> </div> <div class="pagecontent"> </div> </div> </section> <section class="sectionheader"> <div class="parent10"> <h1 class="h12">网页开发初学者必知的十大技巧与工具，你掌握了吗？最新资讯</h1> <h3 class="h33"> 分享关于大数据最新动态，数据分析模板分享，如何使用低代码构建大数据管理平台和低代码平台开发软件 </h3> </div> <div class="subsectiontitle"> <div class="listitem"> <img class="lineseparator-icon" loading="eager" src="https://cdn3.bekaie.com/06e1c0c1-4ae2-490b-b1c0-46f91bda1f73.jpg" alt="'AI Agent 怎么读'？一次解决你的发音困扰！" /> <div class="rowplatforms"> <div class="div54"><a href="https://www.perfcloud.cn/blog/post/83687" class="blog-desc">'AI Agent 怎么读'？一次解决你的发音困扰！</a></div> <div class="div55"> <p>'AI Agent 怎么读'？一次解决你的发音困扰！制作提纲一、引言：为何关注AI Agent的正确发音 1.1 AI Agent在日常与科技领域的重要性在当今这个科技日新月异的时代，AI Age</p>... </div> <div class="parent11"> <div class="div56">2024-08-28 08:43:50</div> <div class="div57"><a href="https://www.perfcloud.cn/blog/post/83687">查看全文</a></div> </div> </div> </div> <div class="listitem"> <img class="lineseparator-icon" loading="eager" src="https://cdn3.bekaie.com/ecd2d870-e590-41da-bc22-49fcdffeb2d6.png" alt="揭秘：图数据如何成为提升RAG质量的秘密武器？" /> <div class="rowplatforms"> <div class="div54"><a href="https://www.perfcloud.cn/blog/post/83697" class="blog-desc">揭秘：图数据如何成为提升RAG质量的秘密武器？</a></div> <div class="div55"> <p>揭秘：图数据如何成为提升RAG质量的秘密武器？一、引言：图数据与RAG质量的关系初探 1.1 RAG质量定义及其重要性 RAG（Red, Amber, Green）质量评估体系广泛应用于项目管理</p>... </div> <div class="parent11"> <div class="div56">2024-08-28 08:43:50</div> <div class="div57"><a href="https://www.perfcloud.cn/blog/post/83697">查看全文</a></div> </div> </div> </div> <div class="listitem"> <img class="lineseparator-icon" loading="eager" src="https://cdn3.bekaie.com/1c5b666c-1f62-467b-bda6-bfaf766430a1.jpg" alt="深度解析：大模型调用时，temperature参数究竟意味着什么？" /> <div class="rowplatforms"> <div class="div54"><a href="https://www.perfcloud.cn/blog/post/83694" class="blog-desc">深度解析：大模型调用时，temperature参数究竟意味着什么？</a></div> <div class="div55"> <p>一、引言：探索大模型调用中的Temperature参数 1.1 Temperature参数的背景介绍 1.1.1 大模型在AI领域的应用概述随着人工智能技术的飞速发展，大模型已成为推动AI领域创新</p>... </div> <div class="parent11"> <div class="div56">2024-08-28 08:43:50</div> <div class="div57"><a href="https://www.perfcloud.cn/blog/post/83694">查看全文</a></div> </div> </div> </div> </div> </section> <script> $(document).ready(function() { var commentsData = [ { name: "评论者昵称", content: "这是一条评论。", replies: [ { name: "回复者昵称", content: "这是一条回复。" } ] } ]; commentsData.forEach(function(comment) { var commentHtml = '<div class="comment-item">' + '<p><strong>' + comment.name + '</strong>: ' + comment.content + '</p>' + '<div class="replies">'; comment.replies.forEach(function(reply) { commentHtml += '<div class="reply-item">' + '<p><strong>' + reply.name + '</strong>: ' + reply.content + '</p>' + '</div>'; }); commentHtml += '</div></div>'; }); }); </script> <section class="framecontacts"> <div class="frame-parent2"> <div class="parent16"> <h1 class="h13">网页开发初学者必知的十大技巧与工具，你掌握了吗？相关资讯</h1> <h3 class="h34"> 与网页开发初学者必知的十大技巧与工具，你掌握了吗？相关资讯，您可以对物联网IOT平台定制了解更多 </h3> </div> <div class="frame-parent3"> <div class="frame-wrapper"> <div class="parent17"> </div> </div> <div class="frame-wrapper1"> <div class="parent18"> </div> </div> </div> </div> </section> <section class="text2"> <div class="line"> <img class="image-1173-icon" alt="" src="https://cdn3.bekaie.com/ewb2024/static/public/image-1173@2x.png" /> <div class="parent19"> <h1 class="h14">速优云</h1> <h1 class="h15">让监测“简单一点”</h1> </div> <button class="logo3"> <div class="div76 zixun-btn">联系了解</div> </button> </div> </section> </div> <div id="zixun-modal" class="zixun-modal hide" style="top: 85%;"> <span class="close">×</span> <div class="info col-6" style="margin: auto 20px;"> <p class="large"> ☺️ 微信聊 --></p> <p class="tel">销售沟通：17190186096(微信同号)</p> <p class="tel">售前电话：15050465281</p> <p class="small">微信聊 --></p> </div> <div class="img-wrapper col-6" style="height: 100%;"> <img src="https://cdn3.bekaie.com/wx.png" alt="速优物联PerfCloud官方微信" class="col-6"> </div> </div> <footer class="frame-parent92"> <div class="image-939-group"> </div> <div class="frame-parent101"> <div class="container1" style=" margin: 0 auto;"> <ul style="width:auto;display:block;"> <li style="display:inline;">友情链接：</li> <li style="display:inline;color: #999;font-weight:300;font-size: 12px;"><a href="https://www.perfcloud.cn/gindex/area/91-114" style="color: #999;font-weight:300;font-size: 12px;">物联网IOT软件定制</a></li> <li style="display:inline;color: #999;font-weight:300;font-size: 12px;"><a href="/choose/city"><span>大数据分析可视化平台</span></a> </li> <li style="display:inline;color: #999;font-weight:300;font-size: 12px;"><a href="https://www.perfcloud.cn/"><span>物联网IOT平台</span></a> </li> 【更新:2024-10-31 12:32:49】 </ul> <p style="text-align: center;">Copyright ©2017-<script>document.write(new Date().getFullYear());</script> 南京速优云信息科技有限公司版权所有 <a href="https://beian.miit.gov.cn" ref="nofollow" target="_blank">苏ICP备20027924号-1</a> Powerd By<a href="/">www.perfcloud.cn</a> </p> </div> </div> </footer> <script> $(window).on("scroll", function() { var scroll = $(window).scrollTop(); if (scroll >= 80) { $("#site-header").addClass("nav-fixed"); } else { $("#site-header").removeClass("nav-fixed"); } }); $(".navbar-toggler").on("click", function() { $("header").toggleClass("active"); }); $(document).on("ready", function() { if ($(window).width() > 991) { $("header").removeClass("active"); } $(window).on("resize", function() { if ($(window).width() > 991) { $("header").removeClass("active"); } }); }); </script> <script> $(function() { $('.navbar-toggler').click(function() { $('body').toggleClass('noscroll'); }) }); </script> <script> (function () { function showModal() { var modal = document.querySelector("#zixun-modal"); modal.setAttribute("class", "zixun-modal"); modal.classList.add("bounce"); modal.addEventListener("animationend", function() { modal.classList.remove("bounce"); }, {once: true}); } function hideModal() { document.querySelector("#zixun-modal").setAttribute("class", "zixun-modal hide"); } var btns = document.querySelectorAll(".zixun-btn"); btns.forEach(function (btn) { btn.addEventListener("click", function () { showModal(); }); }); document .querySelector("#zixun-modal .close") .addEventListener("click", function () { hideModal(); setTimeout(showModal, 15000); }); window.setTimeout(showModal, 5000); })(); </script> <script> (function () { const newsSection = document.querySelector('.news-section'); if (!newsSection) return; const tabs = newsSection.querySelector('.tabs').querySelectorAll('a'); const contents = newsSection.querySelectorAll('.content'); tabs.forEach(function (tab, i) { tab.addEventListener('click', function () { tabs.forEach(function (_tab, j) { if (i === j) { _tab.setAttribute('class', 'active'); } else { _tab.setAttribute('class', ''); } }); contents.forEach(function (content, j) { if (i === j) { content.setAttribute('class', 'content active'); } else { content.setAttribute('class', 'content'); } }); }); }); })(); </script> <script> !function(n){"function"==typeof define&&define.amd?define(n):n()}((function(){"use strict";!function(){const n=document.createElement("style");n.setAttribute("type","text/css");var t=document.createTextNode('\n .web-contact-plugin {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: fixed;\n right: 0;\n bottom: 400px;\n width: auto;\n background-color: #fff;\n border-radius: 8px 0 0 8px;\n box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.5);\n z-index: 10;\n }\n .web-contact-plugin .contact-item {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 60px;\n height: 60px;\n text-align: center;\n cursor: pointer;\n }\n .web-contact-plugin .contact-item > span {\n display: none;\n width: 30px;\n font-size: 12px;\n line-height: 14px;\n text-align: center;\n }\n .web-contact-plugin .contact-item .contact-popover {\n position: absolute;\n left: -16px;\n bottom: 0;\n display: none;\n box-sizing: content-box;\n padding: 6px 10px;\n padding-top: 12px;\n width: 170px;\n transform: translate(-100%, 0);\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0 0 10px 0 rgba(95, 73, 73, 0.5);\n cursor: auto;\n }\n .web-contact-plugin .contact-item .contact-popover::after {\n content: " ";\n position: absolute;\n right: -24px;\n bottom: 0;\n width: 24px;\n height: 60px;\n z-index: 1;\n }\n .web-contact-plugin .contact-item .contact-popover.popover-phone {\n padding: 12px 20px;\n }\n .web-contact-plugin .contact-item .contact-popover.popover-phone p {\n text-align: left;\n }\n .web-contact-plugin .contact-item .contact-popover p {\n margin: 0;\n font-size: 12px;\n text-align: center;\n color: #888;\n }\n .web-contact-plugin .contact-item .contact-popover p.phone {\n margin: 6px 0;\n font-size: 22px;\n color: #305be9;\n }\n .web-contact-plugin .contact-item .contact-popover img {\n width: 100%;\n }\n .web-contact-plugin .contact-item:hover svg {\n display: none;\n }\n .web-contact-plugin .contact-item:hover > span {\n display: block;\n }\n .web-contact-plugin .contact-item:hover .contact-popover {\n display: block;\n }\n \n @keyframes slidedown {\n from {\n opacity: 0;\n transform: translate(-50%, -50px);\n }\n to {\n opacity: 1;\n transform: translate(-50%, 0);\n }\n }\n /* 弹窗的 toast */\n .web-contact-plugin-toast {\n position: fixed;\n top: 20px;\n left: 50%;\n padding: 8px 20px;\n transform: translate(-50%, 0);\n font-size: 14px;\n box-sizing: border-box;\n background-color: #fff;\n border-radius: 4px;\n box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.5);\n animation: slidedown 0.5s;\n z-index: 20;\n }\n /* 弹窗 */\n .web-contact-plugin #web-contact-plugin-contact-modal {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.3);\n }\n .web-contact-plugin #web-contact-plugin-contact-modal.hide {\n display: none;\n }\n .web-contact-plugin .modal-wrapper {\n position: relative;\n padding: 20px 30px;\n width: 680px;\n background-color: #fff;\n border-radius: 10px;\n box-sizing: content-box;\n }\n .web-contact-plugin .modal-wrapper .close {\n position: absolute;\n top: 26px;\n right: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 26px;\n height: 26px;\n font-size: 20px;\n color: #888;\n cursor: pointer;\n }\n .web-contact-plugin .modal-wrapper h4 {\n margin: 0;\n display: block;\n height: 46px;\n line-height: 46px;\n font-size: 16px;\n font-weight: bold;\n border-bottom: 1px solid #ccc;\n }\n .web-contact-plugin .modal-wrapper .row {\n display: flex;\n align-items: center;\n margin: 20px 0;\n }\n .web-contact-plugin .modal-wrapper .form-item {\n flex-shrink: 0;\n margin-right: 20px;\n width: 140px;\n font-size: 14px;\n text-align: right;\n }\n .web-contact-plugin .modal-wrapper .form-content {\n flex-grow: 1;\n margin-right: 50px;\n }\n .web-contact-plugin .modal-wrapper input[type="text"],\n .web-contact-plugin .modal-wrapper textarea {\n padding: 8px 14px;\n width: 100%;\n font-size: 14px;\n box-sizing: border-box;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n .web-contact-plugin .modal-wrapper input[type="text"] {\n }\n .web-contact-plugin .modal-wrapper textarea {\n resize: none;\n }\n .web-contact-plugin .modal-wrapper button {\n padding: 6px 40px;\n cursor: pointer;\n background-color: #3068d6;\n border: 1px solid transparent;\n border-radius: 4px;\n font-size: 14px;\n transition: all 0.3s;\n color: #fff;\n }\n .web-contact-plugin .modal-wrapper button:hover {\n background-color: #fff;\n border-color: #3068d6;\n color: #3068d6;\n } \n');n.appendChild(t);const e=document.createElement("div");function o(n){const t=document.createElement("div");t.setAttribute("class","web-contact-plugin-toast"),t.innerText=n,document.body.appendChild(t),setTimeout((function(){document.body.removeChild(t)}),2500)}e.setAttribute("class","web-contact-plugin"),e.innerHTML='\n<div id="contact-btn" class="contact-item">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M16.1 3a5.023 5.023 0 0 0 0 2H4.511l7.55 6.662 5.049-4.52c.426.527.958.966 1.563 1.285l-6.601 5.911L4 7.216V19h16V8.9a5.023 5.023 0 0 0 2 0V20a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h13.1zM21 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"\n fill="rgba(160,160,160,1)" />\n </svg>\n <span>联系反馈</span>\n</div>\n<div class="contact-item">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M9.366 10.682a10.556 10.556 0 0 0 3.952 3.952l.884-1.238a1 1 0 0 1 1.294-.296 11.422 11.422 0 0 0 4.583 1.364 1 1 0 0 1 .921.997v4.462a1 1 0 0 1-.898.995c-.53.055-1.064.082-1.602.082C9.94 21 3 14.06 3 5.5c0-.538.027-1.072.082-1.602A1 1 0 0 1 4.077 3h4.462a1 1 0 0 1 .997.921A11.422 11.422 0 0 0 10.9 8.504a1 1 0 0 1-.296 1.294l-1.238.884zm-2.522-.657l1.9-1.357A13.41 13.41 0 0 1 7.647 5H5.01c-.006.166-.009.333-.009.5C5 12.956 11.044 19 18.5 19c.167 0 .334-.003.5-.01v-2.637a13.41 13.41 0 0 1-3.668-1.097l-1.357 1.9a12.442 12.442 0 0 1-1.588-.75l-.058-.033a12.556 12.556 0 0 1-4.702-4.702l-.033-.058a12.442 12.442 0 0 1-.75-1.588z"\n fill="rgba(160,160,160,1)" />\n </svg>\n <span>电话咨询</span>\n <div class="contact-popover popover-phone" style="width: 200px">\n <p>您好！</p>\n <p>资讯热线：</p>\n <p class="phone">上海：</p>\n <p class="phone">17190186096</p>\n <p class="phone">南京：</p>\n <p class="phone">15050465281</p>\n </div>\n</div>\n<div class="contact-item">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M8.667 11.511a1.276 1.276 0 0 1-1.285-1.285c0-.718.567-1.286 1.285-1.286.717 0 1.285.568 1.285 1.286 0 .717-.568 1.285-1.285 1.285zm6.666 0a1.276 1.276 0 0 1-1.285-1.285c0-.718.568-1.286 1.285-1.286.718 0 1.285.568 1.285 1.286 0 .717-.567 1.285-1.285 1.285zm-8.51 7.704l.715-.436a4 4 0 0 1 2.705-.536c.212.033.386.059.52.076.406.054.82.081 1.237.081 4.42 0 7.9-3.022 7.9-6.6S16.42 5.2 12 5.2s-7.9 3.022-7.9 6.6c0 1.366.5 2.673 1.432 3.781.048.057.12.137.214.235a4 4 0 0 1 1.101 3.102l-.025.297zm-.63 2.727a1 1 0 0 1-1.527-.93l.188-2.26a2 2 0 0 0-.55-1.551A6.993 6.993 0 0 1 4 16.868C2.806 15.447 2.1 13.695 2.1 11.8c0-4.75 4.432-8.6 9.9-8.6s9.9 3.85 9.9 8.6-4.432 8.6-9.9 8.6c-.51 0-1.01-.033-1.499-.098a23.61 23.61 0 0 1-.569-.084 2 2 0 0 0-1.353.268l-2.387 1.456z"\n fill="rgba(160,160,160,1)" />\n </svg>\n <span>官方微信</span>\n <div class="contact-popover">\n <p>扫描二维码</p>\n <p>添加顾问微信</p>\n <img src="https://cdn3.bekaie.com/%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1WX20220114-201259%402x.png" alt="官方微信" />\n </div>\n</div>\n<div id="web-contact-plugin-contact-modal" class="hide">\n <div class="modal-wrapper">\n <span class="close">×</span>\n\n <h4>意见反馈/联系我们</h4>\n <div class="info">\n <div class="row">\n <div class="form-item">联系方式</div>\n <div class="form-content">\n <input name="contact-phone" type="text" placeholder="留下真实的联系方式 (手机、QQ或者微信)，我们会有专门的顾问联系您" />\n </div>\n </div>\n <div class="row">\n <div class="form-item">留言</div>\n <div class="form-content">\n <textarea name="contact-message" rows="5"\n placeholder="请填写具体内容帮助我们了解您的意见和建议。也可以填写您对我们哪方面的产品功能感兴趣，我们会有专门的顾问联系您"></textarea>\n </div>\n </div>\n <div class="row">\n <div class="form-item"> </div>\n <div class="form-content">\n <button class="submit">提交</button>\n </div>\n </div>\n </div>\n </div>\n</div>\n',document.body.appendChild(n),document.body.appendChild(e);var a=document.querySelector("#web-contact-plugin-contact-modal");document.querySelector("#contact-btn").addEventListener("click",(function(){a.setAttribute("class","")})),a.querySelector(".close").addEventListener("click",(function(){a.setAttribute("class","hide")}));var c=!1;a.querySelector(".submit").addEventListener("click",(function(){var n,t;c||(n=a.querySelector("input[name=contact-phone]").value,t=a.querySelector("textarea[name=contact-message]").value,n?t?async function(n,t,e){const a=new FormData;a.append("phone",n),a.append("text",t);(await fetch("/openapi/feedback/submit?app_id=78&project_id=8",{method:"POST",mode:"cors",body:a,headers:{pragma:"no-cache",accept:"application/json, text/plain, */*"}})).json().then((function(n){if(n&&0!==n.errno)throw n;e()})).catch((function(n){o(n&&n.err_msg||"提交失败")}))}(n,t,(function(){c=!1,a.querySelector("input[name=contact-phone]").value="",a.querySelector("textarea[name=contact-message]").value="",a.setAttribute("class","hide"),o("提交成功")})):o("请将留言填写完整"):o("请将联系方式填写完整"))}))}()})); </script> <script src="https://cdn3.bekaie.com/perfdata20220734/js/bootsnav.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { var mySwiper = new Swiper('.swiper-container', { loop: true, direction: 'horizontal', centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); }); </script> <script> document.addEventListener('DOMContentLoaded', function () { var thumbsSwiper = new Swiper('.main-swiper', { spaceBetween: 6, slidesPerView: 1, }); var mainSwiper = new Swiper('.thumbs-swiper', { spaceBetween: 6, centeredSlides: true, slidesPerView: 'auto', touchRatio: 0.2, slideToClickedSlide: true, thumbs: { swiper: thumbsSwiper, }, }); }); </script> <script src="https://cdn3.bekaie.com/ewb20240423/static/js/jquery.horizontalmenu.js"></script> <script> $(function () { $('.ah-tab-wrapper').horizontalmenu({ itemClick : function(item) { $('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active'); $('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true'); return false; } }); }); </script> <script> !function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.async = !0, p.src = s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []); posthog.init('phc_hQf7QXqC9wqfpSZsFwk86Ws1yMmUGuuXepkcsGSENw7', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' }) </script> <script type="text/javascript" src="https://js.users.51.la/21864521.js"></script> </body> </html>