当前位置：首页 > 文章列表 > 文章 > 前端 > contenteditable属性怎么用

contenteditable属性怎么用

2025-08-05 22:25:04 0浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《contenteditable属性用于使HTML元素变为可编辑状态，允许用户直接在页面上修改内容。设置可编辑区域只需在HTML标签中添加contenteditable="true"即可。例如：

这是一个可编辑区域

这样用户就可以在该区域内进行文本输入和编辑操作。》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

contenteditable属性的作用是让任意HTML元素变为可编辑状态，实现类似文本框的输入功能。1. 它是一个全局布尔属性，可应用于div、span、p等几乎所有元素；2. 其值包括true（可编辑）、false（不可编辑）和inherit（继承父元素），默认为inherit；3. 用户可直接修改内容并支持富文本粘贴与格式化；4. 可通过CSS控制外观，如去除outline或自定义焦点样式；5. 配合document.execCommand()可实现加粗、斜体等基础富文本操作；6. 面临跨浏览器兼容性问题，不同浏览器对标签生成和样式处理不一致；7. 光标与选区管理复杂，回车键行为在不同浏览器中可能生成div、p或br；8. 输入法（IME）下input事件频繁触发，需区分输入中与确认后状态；9. 存在XSS风险，必须对粘贴的HTML内容进行清洗和白名单过滤；10. 大量内容时性能下降，需优化渲染机制；11. 现代富文本编辑器（如Slate、Quill）基于contenteditable封装，解决兼容性、状态管理与安全性问题，提供插件化扩展能力。因此，简单场景可直接使用contenteditable，复杂需求应选用专业框架以保障稳定性与功能完整性。

contenteditable属性的作用是什么？可编辑区域怎么设置？

contenteditable属性的作用，简单来说，就是让任何HTML元素变得像一个文本输入框一样，可以直接在浏览器里编辑它的内容。你不需要用 </code> 或 <code><input></code> 标签，只需要在你想让用户编辑的元素上加上 <code>contenteditable="true"</code> 就可以了。设置起来非常直接，就是这么一个布尔属性。</p><img src="/uploads/20250805/17544038506892140a3a24e.png" alt="contenteditable属性的作用是什么？可编辑区域怎么设置？"><h3>解决方案</h3><p><code>contenteditable</code> 属性是个全局属性，意味着它能被应用到几乎所有HTML元素上，比如 <code><div></code>, <code><span></code>, <code><p></code>, 甚至 <code><ul></code> 和 <code><li></code>。当一个元素被设置为 <code>contenteditable="true"</code> 时，它的内容就变成了可编辑的。用户可以点击进去，像在文本编辑器里一样修改文字、插入图片（如果浏览器支持拖拽），甚至粘贴富文本内容。</p><p>这个属性有三个可能的值：</p><img src="/uploads/20250805/17544038506892140a3c4c8.png" alt="contenteditable属性的作用是什么？可编辑区域怎么设置？"><ul><li><code>true</code>：元素内容可编辑。</li><li><code>false</code>：元素内容不可编辑。</li><li><code>inherit</code>：元素会继承其父元素的 <code>contenteditable</code> 状态。这是默认值，所以如果你在 <code><body></code> 上设置了 <code>contenteditable="true"</code>，那么所有子元素除非被明确设置为 <code>false</code>，否则都将可编辑。</li></ul><p>实际应用中，我们通常会在一个特定的容器上设置它，比如：</p><pre class="brush:language-html;toolbar:false;"><div id="editableDiv" contenteditable="true" style="max-width:100%"> <p>这是一段可编辑的文字。试试点击这里修改它。</p> <ul> <li>项目一</li> <li>项目二</li> </ul> </div> <script> const editableDiv = document.getElementById('editableDiv'); // 你可以监听输入事件来获取用户修改后的内容 editableDiv.addEventListener('input', function() { console.log('内容已更新:', this.innerHTML); // 实际应用中，你可能需要将内容发送到服务器保存 }); // 当用户点击外部时，可以保存内容 editableDiv.addEventListener('blur', function() { console.log('失去焦点，内容最终版本:', this.innerHTML); // 这里是保存内容的理想时机 }); </script></pre><p>我个人觉得，<code>contenteditable</code> 最酷的地方在于它提供了一种非常直接、原生的方式来实现“所见即所得”的编辑体验。很多时候，我们不需要一个完整的富文本编辑器，只是想让用户能快速修改页面上的某个文本块，这时候 <code>contenteditable</code> 就派上用场了。它把浏览器本身变成了编辑工具，省去了很多自定义UI的麻烦。</p><img src="/uploads/20250805/17544038506892140a3e743.png" alt="contenteditable属性的作用是什么？可编辑区域怎么设置？"><h3>如何控制<code>contenteditable</code>区域的内容和样式？</h3><p>控制 <code>contenteditable</code> 区域的内容和样式，这可不是一件小事，里面学问大了去了。最直接的，你当然可以用CSS来控制它的外观，比如边框、背景、字体颜色等等。就像普通的HTML元素一样，<code>outline: none;</code> 经常被用来移除编辑时出现的蓝色或黑色边框，让界面看起来更清爽。</p><pre class="brush:language-css;toolbar:false;">[contenteditable="true"]:focus { outline: 2px solid dodgerblue; /* 聚焦时给个好看的边框 */ box-shadow: 0 0 5px rgba(30, 144, 255, 0.5); }</pre><p>但说到内容本身的控制，事情就复杂起来了。浏览器提供了 <code>document.execCommand()</code> 这个API，它可以执行一些基本的富文本操作，比如加粗（<code>bold</code>）、斜体（<code>italic</code>）、创建链接（<code>createLink</code>）等等。</p><pre class="brush:language-javascript;toolbar:false;">// 假设你有一个按钮，点击后加粗选中的文本 document.getElementById('boldButton').addEventListener('click', function() { document.execCommand('bold', false, null); }); // 插入链接 document.getElementById('linkButton').addEventListener('click', function() { const url = prompt('请输入链接地址:'); if (url) { document.execCommand('createLink', false, url); } });</pre><p>然而，<code>execCommand</code> 的兼容性问题一直是个老大难，不同浏览器对它的实现细节有差异，行为不尽相同。这导致很多开发者，包括我自己在内，在使用它的时候都得小心翼翼，甚至最后不得不放弃，转而自己手动操作DOM。</p><p>更重要的是，用户粘贴进来的内容是个大挑战。他们可能从Word、网页或者其他地方复制富文本，这些内容往往带着一大堆乱七八糟的HTML标签和内联样式。如果你不处理，直接把这些内容存起来，轻则污染数据，重则可能引入XSS漏洞。所以，对粘贴事件（<code>paste</code>）进行监听，然后对粘贴内容进行清洗（sanitization），只保留你需要的标签和属性，这是非常关键的一步。这通常涉及到解析HTML，然后过滤掉不安全的或不需要的标签和属性。</p><pre class="brush:language-javascript;toolbar:false;">editableDiv.addEventListener('paste', function(event) { event.preventDefault(); // 阻止默认的粘贴行为 const text = (event.clipboardData || window.clipboardData).getData('text/plain'); // 只获取纯文本 document.execCommand('insertText', false, text); // 插入纯文本 // 如果需要保留部分格式，就得更复杂地处理 event.clipboardData.getData('text/html') });</pre><p>说实话，每次处理粘贴内容，我都觉得像在玩一场猫鼠游戏，你永远不知道用户会粘贴什么奇葩的东西进来。所以，一个严格的白名单机制是必须的。</p><h3><code>contenteditable</code>使用中常见的坑和挑战有哪些？</h3><p><code>contenteditable</code> 确实方便，但它背后藏着不少“坑”，踩进去的开发者不在少数。我个人对这些挑战深有体会。</p><p>首先，<strong>跨浏览器兼容性</strong>是最大的痛点。前面提到了 <code>document.execCommand()</code>，它的行为在Chrome、Firefox、Safari之间就是不一样。比如，同样是加粗，有的浏览器可能用 <code><strong></code> 标签，有的用 <code><b></code>，甚至有的会直接加 <code>font-weight: bold;</code> 的内联样式。这让你想生成一致的HTML结构变得异常困难。</p><p>其次，<strong>光标（Caret）和选区（Selection）的管理</strong>是个噩梦。当你需要精确控制用户光标的位置，或者在特定位置插入内容时，你会发现浏览器原生的API（<code>window.getSelection()</code>）虽然强大，但操作起来非常繁琐，而且在复杂DOM结构下，光标的定位可能会出乎意料。比如，用户按Enter键，有的浏览器会插入 <code><div></code>，有的会插入 <code><p></code>，还有的只是插入 <code><br></code>。这直接影响了你对内容结构的预期。</p><p>再来，<strong>输入法（IME）的处理</strong>。特别是对于中文、日文、韩文这类需要输入法合成的语言，<code>input</code> 事件会在字符还未最终确定时触发多次，这给实时内容同步带来了挑战。你得区分是输入法正在输入，还是用户已经确定了输入内容。</p><p><strong>安全性问题</strong>也不容忽视。如果你的 <code>contenteditable</code> 区域允许用户粘贴HTML，那么未经处理的HTML可能包含恶意脚本（XSS攻击）。一个简单的 <code><script>alert('hack!')</script></code> 就能让你的页面崩溃或者数据泄露。所以，严格的服务器端和客户端内容过滤是必不可少的。</p><p>最后，<strong>性能问题</strong>。当 <code>contenteditable</code> 区域内容非常庞大时，特别是包含大量图片或复杂DOM结构时，编辑操作可能会变得卡顿。浏览器在每次内容变化时都需要重新渲染，这会消耗大量资源。优化这类场景，通常需要自己实现虚拟DOM或者局部更新机制，这已经超出了 <code>contenteditable</code> 本身的能力范畴了。</p><p>我感觉，<code>contenteditable</code> 就像一个强大的，但有点野性的工具，它给你了极大的自由，但也把很多底层复杂性暴露给了开发者。</p><h3><code>contenteditable</code>与现代富文本编辑器框架的关系？</h3><p>说到 <code>contenteditable</code> 和现代富文本编辑器框架的关系，我总喜欢把它比作是“原材料”和“精加工产品”。<code>contenteditable</code> 是浏览器提供的最基础、最原始的编辑能力，它就像一块未经雕琢的石头。而像 ProseMirror、Slate.js、Draft.js、Quill 这样的现代富文本编辑器框架，它们就是那些经验丰富的雕塑家，利用这块石头，雕刻出精美、稳定、功能强大的艺术品。</p><p>这些框架并没有抛弃 <code>contenteditable</code>，恰恰相反，它们是<strong>构建在 <code>contenteditable</code> 之上</strong>的。它们的工作，就是驯服 <code>contenteditable</code> 的“野性”，解决我前面提到的那些兼容性、光标管理、事件处理、安全性等一系列痛点。</p><p>它们通常会做以下几件事：</p><ol><li><strong>抽象DOM操作：</strong> 它们不再直接依赖 <code>document.execCommand()</code>，而是自己管理内容的DOM结构。当用户在 <code>contenteditable</code> 区域进行操作时，框架会拦截这些操作，然后根据自己的内部数据模型（通常是JSON或自定义的数据结构）来更新DOM。这确保了无论用户在哪个浏览器上操作，生成的HTML结构都是一致且可控的。</li><li><strong>状态管理：</strong> 现代编辑器框架都有自己的内部状态管理机制。每一次用户的输入、删除、格式化操作，都会被转换成对这个内部状态的修改。然后，框架再根据这个状态来渲染 <code>contenteditable</code> 区域的内容。这使得撤销/重做、协同编辑等高级功能成为可能。</li><li><strong>插件系统：</strong> 它们通常提供强大的插件系统，允许开发者扩展编辑器的功能，比如自定义工具栏、表情符号、代码块、图片上传等等。这些插件可以深度集成到编辑器的核心逻辑中，而不需要开发者去直接操作底层的 <code>contenteditable</code> 行为。</li><li><strong>规范化输入：</strong> 它们会处理各种复杂的输入情况，包括粘贴（对内容进行清洗和转换）、拖放、以及不同输入法下的表现，确保最终输入的内容符合预设的规范。</li></ol><p>所以，如果你只是想让一小段文本变得可编辑，<code>contenteditable</code> 属性本身就足够了。但如果你需要一个功能丰富、稳定可靠、跨浏览器一致的富文本编辑体验，那么投入时间去学习和使用一个成熟的富文本编辑器框架，绝对是明智的选择。它们把 <code>contenteditable</code> 带来的大部分麻烦都封装起来了，让你能专注于上层业务逻辑的实现。毕竟，谁也不想把宝贵的时间都花在调试 <code>execCommand</code> 在IE里的奇怪行为上，对吧？</p><p>好了，本文到此结束，带大家了解了《contenteditable属性怎么用》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！</p> </div> <div class="labsList"> <a href="javascript:;" title="兼容性">兼容性</a> <a href="javascript:;" title="富文本编辑器">富文本编辑器</a> <a href="javascript:;" title="可编辑">可编辑</a> <a href="javascript:;" title="HTML属性">HTML属性</a> <a href="javascript:;" title="contenteditable">contenteditable</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/277022.html" title="HTML获取地理位置方法及GeolocationAPI使用教程" class="img_box"> <img src="/uploads/20250805/17544038686892141c9cf6b.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="HTML获取地理位置方法及GeolocationAPI使用教程">HTML获取地理位置方法及GeolocationAPI使用教程 </a> <dl> <dt class="lineOverflow"><a href="/article/277022.html" title="HTML获取地理位置方法及GeolocationAPI使用教程" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">HTML获取地理位置方法及GeolocationAPI使用教程</dd> </dl> </div> <div class="cateItem"> <a href="/article/277024.html" title="Python搭建日志系统：ELK集成教程" class="img_box"> <img src="/uploads/20250805/17544039836892148f96cab.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Python搭建日志系统：ELK集成教程"> </a> <dl> <dt class="lineOverflow"><a href="/article/277024.html" class="aBlack" title="Python搭建日志系统：ELK集成教程">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Python搭建日志系统：ELK集成教程</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/620039.html" class="img_box" title="前端 CORS 预检失败排查流程：从请求头到网关响应"> <img src="/uploads/20260618/1781767364-frontend-cors-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 CORS 预检失败排查流程：从请求头到网关响应"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4720_new_0_1.html" class="aLightGray" title="cors">cors</a> · <a href="/articletag/39980_new_0_1.html" class="aLightGray" title="跨域排查">跨域排查</a> · <a href="/articletag/39981_new_0_1.html" class="aLightGray" title="浏览器网络">浏览器网络</a> · <a href="/articletag/39982_new_0_1.html" class="aLightGray" title="接口联调">接口联调</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="cors">cors</a> <a href="javascript:;" class="aLightGray" title="请求头">请求头</a> <a href="javascript:;" class="aLightGray" title="跨域">跨域</a> <a href="javascript:;" class="aLightGray" title="预检请求">预检请求</a> <a href="javascript:;" class="aLightGray" title="Options">Options</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620039.html" class="aBlack" target="_blank" title="前端 CORS 预检失败排查流程：从请求头到网关响应">前端 CORS 预检失败排查流程：从请求头到网关响应</a> </dt> <dd class="cont2"> <span><i class="view"></i>422浏览</span> <span class="collectBtn user_collection" data-id="620039" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620035.html" class="img_box" title="前端 position sticky 不生效排查：从滚动容器到 overflow 限制"> <img src="/uploads/20260618/1781761300-frontend-sticky-check-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 position sticky 不生效排查：从滚动容器到 overflow 限制"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/9935_new_0_1.html" class="aLightGray" title="sticky">sticky</a> · <a href="/articletag/39972_new_0_1.html" class="aLightGray" title="布局排查">布局排查</a> · <a href="/articletag/39973_new_0_1.html" class="aLightGray" title="滚动容器">滚动容器</a> · <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="Overflow">Overflow</a> <a href="javascript:;" class="aLightGray" title="position sticky">position sticky</a> <a href="javascript:;" class="aLightGray" title="滚动容器">滚动容器</a> <a href="javascript:;" class="aLightGray" title="吸顶失效">吸顶失效</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620035.html" class="aBlack" target="_blank" title="前端 position sticky 不生效排查：从滚动容器到 overflow 限制">前端 position sticky 不生效排查：从滚动容器到 overflow 限制</a> </dt> <dd class="cont2"> <span><i class="view"></i>449浏览</span> <span class="collectBtn user_collection" data-id="620035" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620015.html" class="img_box" title="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程"> <img src="/uploads/20260617/1781673768-frontend-image-lazyload-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/39948_new_0_1.html" class="aLightGray" title="图片加载">图片加载</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="图片懒加载">图片懒加载</a> <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> <a href="javascript:;" class="aLightGray" title="LCP">LCP</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620015.html" class="aBlack" target="_blank" title="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程">前端图片懒加载实战：首屏 LCP 与滚动加载完整流程</a> </dt> <dd class="cont2"> <span><i class="view"></i>105浏览</span> <span class="collectBtn user_collection" data-id="620015" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620013.html" class="img_box" title="前端表单联动校验失效排查：旧状态、重复提交和提交锁"> <img src="/uploads/20260617/1781671884-frontend-form-bug-flow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端表单联动校验失效排查：旧状态、重复提交和提交锁"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/39947_new_0_1.html" class="aLightGray" title="表单校验">表单校验</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="表单校验">表单校验</a> <a href="javascript:;" class="aLightGray" title="重复提交">重复提交</a> <a href="javascript:;" class="aLightGray" title="提交锁">提交锁</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620013.html" class="aBlack" target="_blank" title="前端表单联动校验失效排查：旧状态、重复提交和提交锁">前端表单联动校验失效排查：旧状态、重复提交和提交锁</a> </dt> <dd class="cont2"> <span><i class="view"></i>285浏览</span> <span class="collectBtn user_collection" data-id="620013" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/620012.html" class="img_box" title="前端长列表虚拟滚动实战：从可视区计算到滚动流畅"> <img src="/uploads/20260617/1781670928-frontend-virtual-list-before-after.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端长列表虚拟滚动实战：从可视区计算到滚动流畅"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 3天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/39783_new_0_1.html" class="aLightGray" title="虚拟列表">虚拟列表</a> · <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="虚拟滚动">虚拟滚动</a> <a href="javascript:;" class="aLightGray" title="长列表优化">长列表优化</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/620012.html" class="aBlack" target="_blank" title="前端长列表虚拟滚动实战：从可视区计算到滚动流畅">前端长列表虚拟滚动实战：从可视区计算到滚动流畅</a> </dt> <dd class="cont2"> <span><i class="view"></i>111浏览</span> <span class="collectBtn user_collection" data-id="620012" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619999.html" class="img_box" title="前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查"> <img src="/uploads/20260616/1781600013-frontend-polling-cleanup-solution.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4天前 | <a href="/articletag/215_new_0_1.html" class="aLightGray" title="定时器">定时器</a> · <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/39721_new_0_1.html" class="aLightGray" title="性能排查">性能排查</a> · <a href="/articletag/39918_new_0_1.html" class="aLightGray" title="接口请求">接口请求</a> · <a href="/articletag/39934_new_0_1.html" class="aLightGray" title="轮询">轮询</a> · <a href="/articletag/39935_new_0_1.html" class="aLightGray" title="setInterval">setInterval</a> · <a href="javascript:;" class="aLightGray" title="setInterval">setInterval</a> <a href="javascript:;" class="aLightGray" title="页面可见性">页面可见性</a> <a href="javascript:;" class="aLightGray" title="clearInterval">clearInterval</a> <a href="javascript:;" class="aLightGray" title="前端轮询">前端轮询</a> <a href="javascript:;" class="aLightGray" title="请求堆积">请求堆积</a> <a href="javascript:;" class="aLightGray" title="定时器清理">定时器清理</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619999.html" class="aBlack" target="_blank" title="前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查">前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查</a> </dt> <dd class="cont2"> <span><i class="view"></i>490浏览</span> <span class="collectBtn user_collection" data-id="619999" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619992.html" class="img_box" title="前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key"> <img src="/uploads/20260616/1781592762-form-submit-idempotent-key.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/39919_new_0_1.html" class="aLightGray" title="状态管理">状态管理</a> · <a href="/articletag/39920_new_0_1.html" class="aLightGray" title="表单提交">表单提交</a> · <a href="/articletag/39921_new_0_1.html" class="aLightGray" title="防重复提交">防重复提交</a> · <a href="/articletag/39922_new_0_1.html" class="aLightGray" title="接口幂等">接口幂等</a> · <a href="javascript:;" class="aLightGray" title="重复提交">重复提交</a> <a href="javascript:;" class="aLightGray" title="前端表单">前端表单</a> <a href="javascript:;" class="aLightGray" title="请求去重">请求去重</a> <a href="javascript:;" class="aLightGray" title="按钮锁定">按钮锁定</a> <a href="javascript:;" class="aLightGray" title="幂等key">幂等key</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619992.html" class="aBlack" target="_blank" title="前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key">前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key</a> </dt> <dd class="cont2"> <span><i class="view"></i>253浏览</span> <span class="collectBtn user_collection" data-id="619992" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619990.html" class="img_box" title="前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底"> <img src="/uploads/20260616/1781590765-frontend-search-race-fix.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/39916_new_0_1.html" class="aLightGray" title="搜索框">搜索框</a> · <a href="/articletag/39917_new_0_1.html" class="aLightGray" title="AbortController">AbortController</a> · <a href="/articletag/39918_new_0_1.html" class="aLightGray" title="接口请求">接口请求</a> · <a href="/articletag/39919_new_0_1.html" class="aLightGray" title="状态管理">状态管理</a> · <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a> <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="前端搜索">前端搜索</a> <a href="javascript:;" class="aLightGray" title="请求乱序">请求乱序</a> <a href="javascript:;" class="aLightGray" title="旧响应覆盖">旧响应覆盖</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619990.html" class="aBlack" target="_blank" title="前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底">前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底</a> </dt> <dd class="cont2"> <span><i class="view"></i>295浏览</span> <span class="collectBtn user_collection" data-id="619990" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619979.html" class="img_box" title="前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查"> <img src="/uploads/20260616/1781579104-frontend-lazy-cls-overview.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> · <a href="/articletag/34073_new_0_1.html" class="aLightGray" title="cls">cls</a> · <a href="/articletag/39909_new_0_1.html" class="aLightGray" title="懒加载">懒加载</a> · <a href="/articletag/39910_new_0_1.html" class="aLightGray" title="Core Web Vitals">Core Web Vitals</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="图片懒加载">图片懒加载</a> <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a> <a href="javascript:;" class="aLightGray" title="CLS">CLS</a> <a href="javascript:;" class="aLightGray" title="布局稳定">布局稳定</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619979.html" class="aBlack" target="_blank" title="前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查">前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查</a> </dt> <dd class="cont2"> <span><i class="view"></i>128浏览</span> <span class="collectBtn user_collection" data-id="619979" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619973.html" class="img_box" title="前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发"> <img src="/uploads/20260616/1781541472-frontend-websocket-message-queue.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 4天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/277_new_0_1.html" class="aLightGray" title="消息队列">消息队列</a> · <a href="/articletag/1017_new_0_1.html" class="aLightGray" title="websocket">websocket</a> · <a href="/articletag/39899_new_0_1.html" class="aLightGray" title="实时通信">实时通信</a> · <a href="/articletag/39900_new_0_1.html" class="aLightGray" title="断线重连">断线重连</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="websocket">websocket</a> <a href="javascript:;" class="aLightGray" title="心跳检测">心跳检测</a> <a href="javascript:;" class="aLightGray" title="断线重连">断线重连</a> <a href="javascript:;" class="aLightGray" title="消息补发">消息补发</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619973.html" class="aBlack" target="_blank" title="前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发">前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发</a> </dt> <dd class="cont2"> <span><i class="view"></i>365浏览</span> <span class="collectBtn user_collection" data-id="619973" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619962.html" class="img_box" title="前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范"> <img src="/uploads/20260615/1781506972-modal-layer-workflow.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5天前 | <a href="/articletag/228_new_0_1.html" class="aLightGray" title="工程化">工程化</a> · <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/39876_new_0_1.html" class="aLightGray" title="弹窗">弹窗</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="z-index">z-index</a> <a href="javascript:;" class="aLightGray" title="遮罩层">遮罩层</a> <a href="javascript:;" class="aLightGray" title="stacking context">stacking context</a> <a href="javascript:;" class="aLightGray" title="Portal">Portal</a> <a href="javascript:;" class="aLightGray" title="弹窗层级">弹窗层级</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619962.html" class="aBlack" target="_blank" title="前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范">前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范</a> </dt> <dd class="cont2"> <span><i class="view"></i>350浏览</span> <span class="collectBtn user_collection" data-id="619962" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619961.html" class="img_box" title="前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查"> <img src="/uploads/20260615/1781505934-filter-refresh-lost.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/39873_new_0_1.html" class="aLightGray" title="URL参数">URL参数</a> · <a href="/articletag/39874_new_0_1.html" class="aLightGray" title="列表筛选">列表筛选</a> · <a href="/articletag/39875_new_0_1.html" class="aLightGray" title="页面状态">页面状态</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="筛选条件">筛选条件</a> <a href="javascript:;" class="aLightGray" title="列表页">列表页</a> <a href="javascript:;" class="aLightGray" title="history.replaceState">history.replaceState</a> <a href="javascript:;" class="aLightGray" title="URLSearchParams">URLSearchParams</a> <a href="javascript:;" class="aLightGray" title="刷新还原">刷新还原</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619961.html" class="aBlack" target="_blank" title="前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查">前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查</a> </dt> <dd class="cont2"> <span><i class="view"></i>348浏览</span> <span class="collectBtn user_collection" data-id="619961" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13109.html" target="_blank" title="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" class="img_box"> <img src="/uploads/ai/20260616/ljg-skills-icon-8bbe1468e5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ljg-skills - "Prompt之神"李继刚开源的 AI 技能集" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13109.html" class="aBlack" target="_blank" title="ljg-skills">ljg-skills</a></dt> <dd class="cont1 lineTwoOverflow"> ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。 </dd> <dd class="cont2">1125次使用</dd> </dl> </li> <li> <a href="/ai/13108.html" target="_blank" title="MELO音乐 - AI 音乐生成平台，支持多模态创作能力" class="img_box"> <img src="/uploads/ai/20260616/melo-icon-10bf590762.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MELO音乐 - AI 音乐生成平台，支持多模态创作能力" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13108.html" class="aBlack" target="_blank" title="MELO音乐">MELO音乐</a></dt> <dd class="cont1 lineTwoOverflow"> MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！ </dd> <dd class="cont2">1079次使用</dd> </dl> </li> <li> <a href="/ai/13107.html" target="_blank" title="UniScribe - AI 免费在线音视频转文字平台" class="img_box"> <img src="/uploads/ai/20260616/uniscribe-icon-3c88366a15.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="UniScribe - AI 免费在线音视频转文字平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13107.html" class="aBlack" target="_blank" title="UniScribe">UniScribe</a></dt> <dd class="cont1 lineTwoOverflow"> UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。 </dd> <dd class="cont2">1015次使用</dd> </dl> </li> <li> <a href="/ai/13106.html" target="_blank" title="剧云 - 免费 AI 智能中文剧本创作平台" class="img_box"> <img src="/uploads/ai/20260615/d36c7176-icon-2b0cd581ce.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="剧云 - 免费 AI 智能中文剧本创作平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13106.html" class="aBlack" target="_blank" title="剧云">剧云</a></dt> <dd class="cont1 lineTwoOverflow"> 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。 </dd> <dd class="cont2">1206次使用</dd> </dl> </li> <li> <a href="/ai/13105.html" target="_blank" title="万象有声 - AI 一站式有声内容创作平台" class="img_box"> <img src="/uploads/ai/20260615/50267bac-icon-c146b001b5.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="万象有声 - AI 一站式有声内容创作平台" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13105.html" class="aBlack" target="_blank" title="万象有声">万象有声</a></dt> <dd class="cont1 lineTwoOverflow"> 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！ </dd> <dd class="cont2">1196次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/277023.html"/> <input type="hidden" name="__token__" value="d02f0df8eea44688bcdfa41f3e0b2f03" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/277023.html"/> <input type="hidden" name="__token__" value="d02f0df8eea44688bcdfa41f3e0b2f03" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; hm.async = true; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/frontend/common.js"></script> </body> </html>