当前位置：首页 > 文章列表 > 文章 > 前端 > HTML表格数据复制粘贴方法大全

HTML表格数据复制粘贴方法大全

2025-07-30 22:33:33 0浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《HTML表格数据复制粘贴技巧分享》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

直接复制HTML表格数据常常不尽如意的原因是浏览器默认行为仅复制可见文本而非结构化数据。1. 浏览器默认只提取选中区域的文本内容，忽略表格的行列结构；2. HTML表格标签不自动转换为电子表格可识别的格式（如TSV或CSV）；3. 合并单元格（rowspan/colspan）导致粘贴后列对齐混乱；4. 隐藏内容或复杂样式可能干扰复制结果；5. 用户期望与实际效果存在落差。要实现结构化复制，需通过JavaScript手动提取表格数据并格式化为TSV或CSV。1. 获取表格引用并遍历每一行和单元格；2. 使用制表符分隔单元格内容，换行符分隔行数据；3. 通过隐藏的元素配合document.execCommand('copy')实现兼容性较好的复制；4. 或使用现代Clipboard API的navigator.clipboard.writeText()方法，更安全且符合异步模式，但需HTTPS和用户手势触发。此外，还需处理特殊字符、合并单元格逻辑、隐藏行列及性能优化等问题，并提供用户反馈机制确保良好体验。</p><p><img src="/uploads/20250730/1753885988688a2d24dde90.png" alt="HTML表格如何实现数据的复制粘贴？有哪些技巧？"></p><p>HTML表格本身在浏览器中进行数据复制粘贴时，默认行为是复制可见的文本内容，而非结构化的表格数据。这意味着，如果你直接选中表格区域并粘贴到Excel或Google Sheets，结果往往是一堆混乱的文本，而非整齐的行列。要实现真正意义上的“结构化”复制粘贴，尤其是像Excel那样能保持行列对齐的，我们通常需要借助JavaScript来介入，编程性地提取数据并将其格式化为可识别的文本格式（如制表符分隔值，TSV）。</p><img src="/uploads/20250730/1753885988688a2d24df54d.png" alt="HTML表格如何实现数据的复制粘贴？有哪些技巧？"><h3>解决方案</h3><p>要实现HTML表格数据的结构化复制粘贴，核心思路是利用JavaScript将表格内容转换为适合粘贴到电子表格软件的格式（通常是TSV或CSV），然后通过编程方式将其写入用户的剪贴板。</p><p>一种常见且相对兼容性较好的方法是：</p><img src="/uploads/20250730/1753885988688a2d24e0ac6.png" alt="HTML表格如何实现数据的复制粘贴？有哪些技巧？"><ol><li><strong>获取表格数据：</strong> 遍历HTML表格（<code><table></code>）的每一行（<code><tr></code>）和每个单元格（<code><td></code>或<code><th></code>）。</li><li><strong>构建字符串：</strong> 将每个单元格的内容提取出来，同一行内的单元格之间用制表符（<code>\t</code>）分隔，不同行之间用换行符（<code>\n</code>）分隔，构建成一个大的字符串。</li><li><strong>写入剪贴板：</strong><ul><li><strong>传统方法（兼容性广）：</strong> 创建一个临时的、隐藏的<code><textarea></code>元素，将构建好的字符串赋值给它的<code>value</code>属性，然后选中这个<code>textarea</code>的内容，并执行<code>document.execCommand('copy')</code>命令。操作完成后，移除这个临时的<code>textarea</code>。</li><li><strong>现代方法（推荐，但需HTTPS和用户手势）：</strong> 使用<code>navigator.clipboard.writeText()</code> API，直接将构建好的字符串写入剪贴板。这种方法更安全、更异步，但需要浏览器支持，且通常要求在安全上下文（HTTPS）中，并由用户手势（如点击按钮）触发。</li></ul></li></ol><pre class="brush:language-javascript;toolbar:false;">// 示例：使用隐藏textarea实现表格复制 function copyTableToClipboard(tableId) { const table = document.getElementById(tableId); if (!table) { console.error('Table not found with ID:', tableId); return; } let data = ''; const rows = table.querySelectorAll('tr'); rows.forEach(row => { const cols = row.querySelectorAll('td, th'); const rowData = []; cols.forEach(col => { // 简单处理，获取文本内容，去除多余空白 rowData.push(col.innerText.trim().replace(/\s+/g, ' ')); }); data += rowData.join('\t') + '\n'; }); // 创建一个临时的textarea元素 const tempTextArea = document.createElement('textarea'); tempTextArea.value = data; // 隐藏textarea，防止它影响页面布局和用户体验 tempTextArea.style.position = 'absolute'; tempTextArea.style.left = '-9999px'; document.body.appendChild(tempTextArea); // 选中textarea内容并执行复制命令 tempTextArea.select(); try { const successful = document.execCommand('copy'); const msg = successful ? '表格数据已复制！' : '复制失败，请手动复制。'; console.log(msg); // 可以在这里给用户一个短暂的提示 alert(msg); } catch (err) { console.error('复制命令执行失败:', err); alert('复制失败，您的浏览器可能不支持此操作，请手动复制。'); } finally { // 复制完成后移除textarea document.body.removeChild(tempTextArea); } } // 示例：使用Clipboard API (更现代) async function copyTableToClipboardModern(tableId) { const table = document.getElementById(tableId); if (!table) { console.error('Table not found with ID:', tableId); return; } let data = ''; const rows = table.querySelectorAll('tr'); rows.forEach(row => { const cols = row.querySelectorAll('td, th'); const rowData = []; cols.forEach(col => { rowData.push(col.innerText.trim().replace(/\s+/g, ' ')); }); data += rowData.join('\t') + '\n'; }); try { await navigator.clipboard.writeText(data); console.log('表格数据已通过Clipboard API复制！'); alert('表格数据已复制！'); } catch (err) { console.error('Clipboard API 复制失败:', err); alert('复制失败，您的浏览器可能不支持或权限不足。请确保在HTTPS环境下且有用户手势触发。'); } } // 假设你的HTML表格ID是 'myTable' // <table id="myTable">...</table> // <button onclick="copyTableToClipboard('myTable')">复制表格数据 (兼容)</button> // <button onclick="copyTableToClipboardModern('myTable')">复制表格数据 (现代)</button></pre><h3>为什么直接复制HTML表格数据常常不尽如人意？</h3><p>说实话，这几乎是前端开发中一个老生常谈的问题了。我们期望在网页上看到一个表格，选中后能像Excel里那样，直接粘贴到另一个电子表格软件里，行是行，列是列。但现实往往是骨感的，直接复制HTML表格，尤其是那些结构稍微复杂一点的，粘贴出来的效果通常不尽如人意。</p><p>我个人觉得，这主要有几个原因：</p><img src="/uploads/20250730/1753885988688a2d24e2097.png" alt="HTML表格如何实现数据的复制粘贴？有哪些技巧？"><ol><li><strong>浏览器默认行为的局限性：</strong> 浏览器在处理<code>Ctrl+C</code>或<code>Cmd+C</code>时，它主要关注的是“可见的文本内容”。它会尝试将你选中的区域内的文本提取出来，并按照其在DOM树中的顺序和视觉布局，加上一些换行符。它并不理解表格的“结构”——比如哪个是行，哪个是列，哪个单元格是合并的。所以，你粘贴出来的往往是一串带有很多不必要换行符的纯文本，列与列之间没有明确的分隔符。</li><li><strong>HTML的灵活性与语义化不足：</strong> HTML表格设计之初是为了展示数据，而不是为了方便数据交换。<code><table></code>、<code><tr></code>、<code><td></code>这些标签虽然定义了结构，但浏览器在复制时并不会自动将其转换为电子表格软件能理解的“制表符分隔”或“逗号分隔”的格式。</li><li><strong>合并单元格（<code>rowspan</code>/<code>colspan</code>）的挑战：</strong> 这是个大坑。如果你的表格有合并单元格，浏览器在复制时就更懵了。它不知道该在合并的单元格位置填充空值，还是直接跳过，这会导致粘贴后的列对齐完全错乱。比如一个<code>colspan="2"</code>的单元格，在Excel里可能就需要占据两列，但浏览器复制时可能只把它当成一列的文本。</li><li><strong>隐藏内容与样式：</strong> 表格中可能存在一些通过CSS隐藏的内容，或者某些单元格有复杂的样式（如背景色、字体大小）。浏览器复制时可能只关心文本，或者在某些情况下，这些样式信息也会被部分复制，导致粘贴到纯文本环境时出现乱码或格式混乱。</li><li><strong>用户期望与实际效果的落差：</strong> 用户习惯了Excel、Google Sheets等软件的强大复制粘贴功能，自然会把这种期望带到网页上。当网页表格无法提供类似体验时，就会觉得“不满意”。</li></ol><p>所以，要解决这个问题，我们必须跳出浏览器默认行为的框架，通过JavaScript手动“翻译”表格结构，将其变成电子表格软件能理解的语言。</p><h3>如何通过JavaScript实现表格数据的结构化复制？</h3><p>实现表格数据的结构化复制，本质上就是将HTML表格的二维结构“扁平化”为一种文本格式，这种格式在粘贴到电子表格软件时能够被正确解析。我通常会考虑两种主要的JavaScript实现策略，各有优缺点，选择哪种取决于你的项目需求和对浏览器兼容性的考量。</p><p><strong>方法一：利用隐藏的<code><textarea></code>元素（兼容性更广）</strong></p><p>这是我个人在面对需要广泛浏览器支持时，首选的“老派”但非常有效的方法。它的核心思想是：浏览器对于<code><textarea></code>元素的<code>select()</code>和<code>document.execCommand('copy')</code>操作是相当成熟和稳定的。</p><p><strong>实现步骤和考量：</strong></p><ol><li><strong>数据提取与格式化：</strong><ul><li>首先，你需要获取到目标HTML表格的引用（通常通过ID或类名）。</li><li>然后，遍历表格的每一行（<code><tr></code>），再遍历每一行中的每一个单元格（<code><td></code>或<code><th></code>）。</li><li>对于每个单元格，提取其文本内容（<code>innerText</code>通常是最好的选择，因为它只获取可见文本，忽略HTML标签）。</li><li><strong>关键点：</strong> 在同一行内，单元格内容之间用制表符（<code>\t</code>）连接。行与行之间用换行符（<code>\n</code>）连接。这种“制表符分隔值”（TSV）格式是电子表格软件最容易识别和解析的格式之一。</li><li><strong>处理特殊情况：</strong><ul><li>如果单元格内容本身包含换行符或制表符，需要决定如何处理。通常，我会选择简单地替换掉内部的换行符或多余的空格，保持单行文本，或者如果需要保留，则可能需要更复杂的CSV引用规则。</li><li><code>rowspan</code>和<code>colspan</code>：这是一个比较复杂的点。简单的实现可能不会完美处理。如果表格有合并单元格，你需要在数据提取逻辑中模拟这些合并，例如，对于一个<code>colspan="2"</code>的单元格，你可能需要在其后面添加一个空的制表符，以确保后续列的对齐。这通常需要维护一个二维数组来表示表格的“逻辑”结构，而不是简单地遍历DOM。</li></ul></li></ul></li><li><strong>创建和操作临时<code><textarea></code>：</strong><ul><li>动态创建一个<code><textarea></code>元素。</li><li>将其样式设置为不可见（例如<code>position: absolute; left: -9999px;</code>）并添加到<code>document.body</code>中。这样做是为了不干扰用户界面，但又让它在DOM中可供操作。</li><li>将格式化好的TSV字符串赋值给<code>textarea.value</code>。</li><li>调用<code>textarea.select()</code>来选中其所有内容。</li><li>执行<code>document.execCommand('copy')</code>。这个命令会尝试将当前选中的内容复制到剪贴板。</li><li>最后，记得将这个临时的<code>textarea</code>从DOM中移除，保持页面的整洁。</li></ul></li><li><strong>用户反馈：</strong> 复制操作是无声的，用户可能不知道是否成功。所以，提供一个简单的视觉反馈（如一个短暂的“已复制！”提示或修改按钮文本）是非常重要的。</li></ol><p><strong>代码示例（已在解决方案部分提供，这里不再重复）</strong></p><p><strong>方法二：使用Clipboard API（更现代、推荐）</strong></p><p>这是Web标准发展的新方向，提供了更强大、更安全的剪贴板操作能力。</p><p><strong>实现步骤和考量：</strong></p><ol><li><strong>数据提取与格式化：</strong> 这一步与方法一完全相同，你仍然需要将表格数据格式化为TSV字符串。</li><li><strong>使用<code>navigator.clipboard.writeText()</code>：</strong><ul><li>一旦你有了格式化好的字符串，可以直接调用<code>navigator.clipboard.writeText(yourFormattedString)</code>。</li><li>这是一个Promise-based的API，所以你需要使用<code>async/await</code>或<code>.then().catch()</code>来处理成功和失败。</li></ul></li><li><strong>安全性与用户手势：</strong><ul><li><code>navigator.clipboard</code>接口通常只在安全上下文（HTTPS）中可用。如果你在HTTP页面上尝试使用，它可能会失败。</li><li>为了防止恶意网站随意读写剪贴板，现代浏览器要求<code>writeText</code>操作必须由用户手势（如点击按钮）直接触发。如果你尝试在没有用户手势的情况下调用它，它可能会抛出错误或被拒绝。</li></ul></li><li><strong>浏览器兼容性：</strong> 虽然现代浏览器支持良好，但对于一些老旧的浏览器，可能仍然需要回退到<code>document.execCommand</code>方法。因此，一个健壮的解决方案通常会先尝试Clipboard API，失败后再回退。</li></ol><p><strong>代码示例（已在解决方案部分提供，这里不再重复）</strong></p><p>我个人在实际项目中，如果不是对老旧浏览器有强烈的兼容性要求，我更倾向于优先使用<code>navigator.clipboard.writeText()</code>。它更符合现代Web开发的异步模式，也更安全。但如果兼容性是首要任务，那么隐藏<code>textarea</code>的方法依然是你的好朋友。</p><h3>复制粘贴功能的用户体验优化与常见陷阱</h3><p>实现表格数据的复制粘贴功能，不只是写几行代码把数据扔到剪贴板那么简单。真正的挑战在于如何让这个功能既好用又稳定，同时避免一些常见的坑。</p><p><strong>用户体验优化：</strong></p><ol><li><strong>明确的触发机制：</strong> 不要让用户去猜测如何复制。提供一个清晰的“复制表格”或“复制数据”按钮。图标加文字是最好的，比如一个复制图标旁边写着“复制到剪贴板”。</li><li><strong>视觉反馈不可或缺：</strong> 用户点击复制按钮后，通常会没有任何反应，这会让他们感到困惑：“到底复制成功了没？”。所以，在复制成功后，务必给出一个短暂的视觉反馈。<ul><li><strong>最简单：</strong> <code>alert('数据已复制！')</code>（虽然有点粗暴，但有效）。</li><li><strong>更好：</strong> 在按钮旁边显示一个短暂的“已复制！”文本，或者按钮本身在几秒内变成“已复制”状态，然后恢复。</li><li><strong>最佳：</strong> 使用Toast通知或Snackbar，在屏幕底部或顶部弹出小提示，几秒后自动消失。</li></ul></li><li><strong>错误处理与提示：</strong> 如果复制失败（比如浏览器不支持、非HTTPS环境、权限问题等），也要及时告知用户。例如：“复制失败，您的浏览器可能不支持此功能。”或者引导他们手动复制。</li><li><strong>考虑数据量：</strong> 如果表格数据量非常大，复制操作可能会有延迟。在处理大型表格时，可以在复制过程中显示一个加载指示器，避免用户以为页面卡死。</li><li><strong>自定义复制范围：</strong> 有时候用户可能只想复制表格的某一部分（例如，只复制选中的行）。如果业务场景允许，可以考虑实现更高级的“选择性复制”功能，比如允许用户多选行，然后只复制这些行的数据。</li><li><strong>"复制为CSV"或"复制为Excel"：</strong> 如果你的应用场景非常明确，用户最终会把数据导入到Excel，那么直接提供一个“复制为CSV”或“下载CSV”的选项，可能比单纯的剪贴板复制更直接，因为CSV文件可以更好地处理复杂数据类型和格式。</li></ol><p><strong>常见陷阱：</strong></p><ol><li><strong>浏览器兼容性问题：</strong><ul><li><code>document.execCommand('copy')</code>：虽然兼容性广，但它在某些浏览器（尤其是移动端浏览器）或特定安全上下文下可能受限或表现不一致。它也即将被废弃，尽管目前仍广泛使用。</li><li><code>navigator.clipboard.writeText()</code>：这是未来方向，但它要求在HTTPS环境下，并且必须由用户手势触发（不能在页面加载时自动复制）。在某些旧版浏览器中可能不支持。</li><li><strong>解决方案：</strong> 实现一个优雅的降级策略。先尝试<code>navigator.clipboard.writeText()</code>，如果失败（Promise被reject），则回退到<code>document.execCommand('copy')</code>。如果两者都失败，则提示用户手动复制。</li></ul></li><li><strong>数据格式化问题：</strong><ul><li><strong>制表符/换行符冲突：</strong> 如果单元格内容本身包含制表符或换行符，直接用<code>\t</code>和<code>\n</code>分隔会导致粘贴混乱。你需要决定如何处理这些内部的特殊字符，例如将其替换为空格，或者使用CSV的引号包裹规则（但这就需要更复杂的CSV解析器）。</li><li><strong>数字和日期格式：</strong> 粘贴到Excel时，数字（如<code>1,234.56</code>）和日期（如<code>2023-10-26</code>）的格式可能与Excel的默认设置不匹配，导致被识别为文本而非数值或日期。如果需要精确控制，可能需要根据目标Excel的区域设置来格式化这些数据。</li><li><strong>空单元格：</strong> 确保空单元格在TSV中表现为空字符串，这样粘贴到Excel时才能正确显示为空白单元格。</li></ul></li><li><strong>复杂表格结构：</strong><ul><li><strong><code>rowspan</code>和<code>colspan</code>：</strong> 这是最大的难点。简单的遍历DOM无法正确处理合并单元格。你需要一个更复杂的算法来构建一个虚拟的二维网格，填充合并单元格留下的“空白”，确保每一行的列数在逻辑上是统一的，这样粘贴时才能对齐。</li><li><strong>隐藏列/行：</strong> 如果表格中有通过CSS隐藏的列或行，你需要决定是否要复制它们。通常，用户期望只复制可见数据。</li></ul></li><li><strong>性能问题：</strong> 对于包含数千行甚至更多数据的超大型表格，在JavaScript中遍历DOM并构建一个巨大的字符串可能会导致页面暂时卡顿。<ul><li><strong>解决方案：</strong> 考虑分页加载数据，或者在复制前进行性能优化，例如使用Web Workers来在后台线程处理数据格式化，避免阻塞主线程。</li></ul></li><li><strong>焦点与选择：</strong> 在使用<code>document.execCommand('copy')</code>时，需要确保<code>textarea</code>被正确地选中。如果元素没有被添加到DOM或者没有正确聚焦，复制可能会失败。</li></ol><p>总的来说，实现一个健壮且用户友好的表格复制粘贴功能，需要你对JavaScript的剪贴板API、DOM操作以及数据格式化有深入的理解，并且要细心处理各种边缘情况和用户体验细节。</p><p>本篇关于《HTML表格数据复制粘贴方法大全》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/269878.html" title="通义千问B站口播技巧全解析" class="img_box"> <img src="/uploads/20250730/1753885917688a2cddc06bb.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="通义千问B站口播技巧全解析">通义千问B站口播技巧全解析 </a> <dl> <dt class="lineOverflow"><a href="/article/269878.html" title="通义千问B站口播技巧全解析" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">通义千问B站口播技巧全解析</dd> </dl> </div> <div class="cateItem"> <a href="/article/269880.html" title="Python异常检测在边缘计算中的应用" class="img_box"> <img src="/uploads/20250730/1753886013688a2d3d5431f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Python异常检测在边缘计算中的应用"> </a> <dl> <dt class="lineOverflow"><a href="/article/269880.html" class="aBlack" title="Python异常检测在边缘计算中的应用">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Python异常检测在边缘计算中的应用</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> | 1天前 | <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> | 1天前 | <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> | 2天前 | <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> | 2天前 | <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> | 2天前 | <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> | 3天前 | <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> | 3天前 | <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> | 3天前 | <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> | 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/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> | 4天前 | <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> | 4天前 | <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">946次使用</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">914次使用</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">847次使用</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">1043次使用</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">1017次使用</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/269879.html"/> <input type="hidden" name="__token__" value="fe0a45c3732a80fe8b41add42bb0a9db" /> <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/269879.html"/> <input type="hidden" name="__token__" value="fe0a45c3732a80fe8b41add42bb0a9db" /> <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>