HTML键盘导航与焦点管理教程

哈喽！今天心血来潮给大家带来了《HTML键盘导航实现方法\_焦点管理教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

键盘导航是确保网页可访问性的关键，通过语义化HTML、合理使用tabindex、JavaScript焦点管理及清晰的视觉反馈，使所有用户（包括残障人士）都能高效操作页面，提升整体用户体验和合规性。

键盘导航，说白了，就是让用户只用键盘就能顺畅地浏览和操作你的网页内容。核心在于管理好用户界面的焦点，确保每个可交互元素都能被Tab键选中，并且按键操作能按预期响应。这不仅仅是为了那些不能使用鼠标的用户，也是提升网站整体可用性和专业度的关键一环。在我看来，这是构建一个真正“好用”的网站不可或缺的基础。

解决方案

实现HTML键盘导航，首先要依赖语义化的HTML结构，这是所有无障碍性的基石。浏览器天生就知道如何处理 、、、 等元素的键盘焦点和交互。当你用

来模拟一个按钮时，你就需要额外做很多工作。

具体来说，你需要关注以下几个方面：

1. 语义化HTML元素优先： 尽可能使用浏览器原生支持键盘导航的元素。比如，一个点击后有行为的文本，就应该用 而不是 加 onclick。链接用 ，表单控件用对应的

、</code>、<code><select></code>。这能省去你大部分的焦点管理工作。</p></li><li><p><strong><code>tabindex</code> 属性的合理使用：</strong></p><ul><li><code>tabindex="0"</code>：当你有一个非原生可聚焦的元素（比如一个 <code>div</code>），但你希望它能被Tab键选中时，可以给它设置 <code>tabindex="0"</code>。它会按照文档流的顺序进入Tab序列。这在创建自定义组件时很常用。</li><li><code>tabindex="-1"</code>：这个值意味着元素不能通过Tab键被选中，但可以通过JavaScript的 <code>element.focus()</code> 方法编程性地获得焦点。这对于在特定情况下需要将焦点移动到某个元素（比如错误信息、模态框内部的特定元素）非常有用，而又不希望它干扰常规的Tab顺序。</li><li><code>tabindex="正整数"</code>：我个人建议尽量避免使用 <code>tabindex="1"</code>、<code>tabindex="2"</code> 这样的正整数值。它们会强制改变Tab键的默认顺序，一旦页面结构发生变化，维护起来简直是噩梦，而且很容易让用户感到困惑。除非你对自己的设计有绝对的把握，并且组件结构非常稳定，否则还是老老实实地让浏览器决定顺序吧。</li></ul></li><li><p><strong>JavaScript进行高级焦点管理：</strong> 对于复杂的组件，比如模态框、下拉菜单、选项卡（Tabs）、轮播图等，光靠HTML和CSS是不够的。你需要用JavaScript来：</p><ul><li><strong>捕获焦点（Focus Trapping）：</strong> 在模态框打开时，确保焦点只在模态框内部循环，而不是跳到模态框后面的页面元素上。</li><li><strong>管理内部导航：</strong> 在自定义下拉菜单中，可能需要用上下箭头键来选择列表项。</li><li><strong>恢复焦点：</strong> 当模态框关闭后，将焦点返回到触发模态框打开的那个元素上，这样用户就不会“迷失”在页面中。</li><li><strong>处理键盘事件：</strong> 监听 <code>keydown</code>、<code>keyup</code> 事件，根据按键（比如 <code>Escape</code> 键关闭模态框，<code>Enter</code> 键触发按钮）执行相应的操作。</li></ul></li><li><p><strong>清晰的视觉焦点指示：</strong> 用户需要明确知道当前哪个元素被选中了。浏览器默认会给可聚焦元素添加一个轮廓（outline），但有时候设计师会为了“美观”而移除它 (<code>outline: none;</code>)。这是个非常糟糕的做法！如果你真的不喜欢默认样式，请务必提供一个自定义的、清晰可见的 <code>:focus</code> 样式，比如改变背景色、添加边框或阴影。</p></li></ol><h3>为什么键盘导航对网站无障碍性如此重要？</h3><p>键盘导航的重要性，远不止我们通常想象的那么简单。它不仅仅是为那些无法使用鼠标的用户提供便利，更是构建一个包容性、高可用性网站的基石。</p><p>首先，<strong>法律合规性</strong>是一个绕不开的话题。全球很多国家和地区都有相关的无障碍性法律法规，比如美国的ADA（Americans with Disabilities Act）和WCAG（Web Content Accessibility Guidelines）。WCAG明确要求所有可交互功能都必须能通过键盘访问。如果你的网站不能满足这些要求，理论上是可能面临法律风险的。</p><p>其次，从用户体验的角度来看，键盘导航服务了<strong>广泛的用户群体</strong>。</p><ul><li><strong>运动障碍用户：</strong> 这是最显而易见的一类。手部颤抖、肌肉萎缩、脊髓损伤等原因可能导致他们无法精确操作鼠标。键盘是他们与电脑交互的主要方式。</li><li><strong>暂时性障碍用户：</strong> 比如手腕受伤、鼠标失灵、或者在不方便使用鼠标的环境下（例如在公共交通工具上，空间狭小），键盘就成了唯一的选择。</li><li><strong>屏幕阅读器用户：</strong> 盲人或弱视用户依赖屏幕阅读器来朗读页面内容。屏幕阅读器通常通过模拟Tab键来导航可聚焦元素，如果你的网站不能良好地支持键盘导航，那么屏幕阅读器用户将寸步难行。</li><li><strong>效率追求者/高级用户：</strong> 很多程序员、数据录入员或者其他对效率有高要求的用户，更喜欢使用键盘快捷键来快速操作，因为这比鼠标点击要快得多。一个支持良好键盘导航的网站，能大大提升他们的工作效率和满意度。</li></ul><p>最后，键盘导航也直接关系到<strong>网站的鲁棒性</strong>。一个能够通过键盘完整操作的网站，通常意味着其底层结构更合理、语义化更好，也更容易被搜索引擎抓取和理解。这虽然不是直接的SEO因素，但间接提升了网站的质量。在我看来，忽视键盘导航，就像是只为一部分人开放了大门，而把另一部分人挡在了外面，这在数字时代是说不过去的。</p><h3>如何正确使用 <code>tabindex</code> 属性来控制焦点顺序？</h3><p><code>tabindex</code> 属性是控制键盘焦点顺序的一个强大工具，但它也是一把双刃剑，用不好反而会适得其反。我的经验告诉我，对待 <code>tabindex</code>，要抱着一种“能不用就不用，非用不可再小心翼翼地用”的态度。</p><p><strong>1. <code>tabindex="0"</code>：让非原生元素可聚焦</strong></p><p>这是 <code>tabindex</code> 最常用且最安全的用法之一。当你有一个 <code><div></code> 或 <code><span></code> 元素，它在视觉上看起来像一个按钮或链接，并且你需要它能接收键盘焦点时，就可以给它加上 <code>tabindex="0"</code>。</p><pre class="brush:language-html;toolbar:false;"><div role="button" tabindex="0" aria-label="点击下载文件"> <img src="download.svg" alt=""> 下载 </div></pre><p>这里 <code>role="button"</code> 和 <code>aria-label</code> 也很重要，它们告诉辅助技术这个 <code>div</code> 的真实作用。设置 <code>tabindex="0"</code> 后，这个 <code>div</code> 就会按照它在文档中的自然顺序被Tab键选中。这对于构建自定义组件（比如一个可展开/折叠的面板头部）非常有用。</p><p><strong>2. <code>tabindex="-1"</code>：编程性聚焦，但不参与Tab顺序</strong></p><p><code>tabindex="-1"</code> 意味着这个元素不能通过Tab键直接选中，但你可以用JavaScript的 <code>element.focus()</code> 方法来强制将焦点设置到它上面。</p><pre class="brush:language-html;toolbar:false;"><div id="error-message" tabindex="-1" role="alert" style="color: red;"> 请输入有效的邮箱地址。 </div> <button onclick="submitForm()">提交</button></pre><p>当用户提交表单失败时，你可能希望将焦点直接跳到错误信息上，这样屏幕阅读器用户就能立即听到错误内容。</p><pre class="brush:language-javascript;toolbar:false;">function submitForm() { // 假设表单验证失败 const errorMessage = document.getElementById('error-message'); errorMessage.focus(); // 编程性地将焦点设置到错误信息上 }</pre><p>这种用法非常适合处理动态内容更新、错误提示、模态框打开后的首个可交互元素，或者将焦点返回到之前的位置。它不会打乱用户的Tab键导航流程，只在特定逻辑下进行焦点转移。</p><p><strong>3. 避免使用 <code>tabindex="正整数"</code> (如 <code>tabindex="1"</code>, <code>tabindex="2"</code>)</strong></p><p>说实话，这是我最不推荐的用法。当你给元素设置 <code>tabindex="1"</code>、<code>tabindex="2"</code> 等正整数时，它们会脱离文档流的自然顺序，按照数值从小到大的顺序优先获得焦点。</p><pre class="brush:language-html;toolbar:false;"><!-- 糟糕的实践！ --> <button tabindex="2">第二个按钮</button> <input type="text" tabindex="1"> <a href="#" tabindex="3">第三个链接</a></pre><p>这样做会带来几个严重的问题：</p><ul><li><strong>维护困难：</strong> 页面结构一旦调整，你可能需要重新编号所有的 <code>tabindex</code>，这简直是灾难。</li><li><strong>用户困惑：</strong> 用户习惯了Tab键按照视觉顺序或文档流顺序前进，这种跳跃式的焦点顺序会让他们感到非常困惑，不知道下一个焦点会出现在哪里。</li><li><strong>无障碍性问题：</strong> 屏幕阅读器通常会按照文档流顺序来朗读内容，而焦点却在乱跳，这会严重破坏用户体验。</li></ul><p>如果你的设计需要一个非标准的焦点顺序，那通常意味着你的HTML结构本身可能就不够语义化，或者你的UI设计存在缺陷。我的建议是，先尝试调整HTML元素的物理顺序，让它们在文档流中就符合逻辑上的焦点顺序。如果实在无法通过调整HTML结构来达到目的，再考虑使用JavaScript进行更精细的焦点管理，而不是滥用 <code>tabindex</code> 的正整数值。保持Tab键的自然流动，对用户来说才是最友好的。</p><h3>在复杂组件中，如何通过 JavaScript 管理键盘焦点？</h3><p>在构建像模态框、下拉菜单、选项卡（Tabs）、自动完成输入框或自定义日期选择器这类复杂组件时，光靠HTML和CSS往往无法满足无障碍性要求。这时，JavaScript就成了管理键盘焦点的核心工具，它能帮助我们实现更精细、更符合用户预期的交互行为。</p><p><strong>1. 模态框（Modal Dialogs）的焦点管理</strong></p><p>模态框是键盘焦点管理中最经典的场景之一。</p><ul><li><p><strong>打开时聚焦：</strong> 当模态框打开时，焦点应该立即转移到模态框内部的第一个可交互元素（比如一个关闭按钮或表单输入框）。</p><pre class="brush:language-javascript;toolbar:false;">function openModal() { const modal = document.getElementById('myModal'); modal.style.display = 'block'; const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex="0"]'); if (firstFocusableElement) { firstFocusableElement.focus(); } // 存储触发模态框打开的元素，以便关闭时恢复焦点 document.body.dataset.previousFocus = document.activeElement.id || ''; }</pre></li><li><p><strong>焦点捕获（Focus Trapping）：</strong> 确保当模态框打开时，Tab键的焦点不会跳到模态框后面的页面内容上。这意味着焦点必须在模态框内部循环。这通常需要监听模态框内部的 <code>keydown</code> 事件，特别是 <code>Tab</code> 键。</p><pre class="brush:language-javascript;toolbar:false;">modal.addEventListener('keydown', function(e) { if (e.key === 'Tab') { const focusableElements = Array.from(modal.querySelectorAll('button, [href], input, select, textarea, [tabindex="0"], [tabindex="-1"]')) .filter(el => el.tabIndex !== -1); // 排除tabindex="-1"的元素 const firstFocusable = focusableElements[0]; const lastFocusable = focusableElements[focusableElements.length - 1]; if (e.shiftKey) { // Shift + Tab if (document.activeElement === firstFocusable) { lastFocusable.focus(); e.preventDefault(); } } else { // Tab if (document.activeElement === lastFocusable) { firstFocusable.focus(); e.preventDefault(); } } } if (e.key === 'Escape') { // Esc键关闭模态框 closeModal(); } });</pre></li><li><p><strong>关闭时恢复焦点：</strong> 当模态框关闭时，焦点应该返回到打开模态框的那个元素上。</p><pre class="brush:language-javascript;toolbar:false;">function closeModal() { const modal = document.getElementById('myModal'); modal.style.display = 'none'; const previousFocusElementId = document.body.dataset.previousFocus; if (previousFocusElementId) { const previousFocusElement = document.getElementById(previousFocusElementId); if (previousFocusElement) { previousFocusElement.focus(); } } }</pre></li></ul><p><strong>2. 自定义组件内部导航（例如下拉菜单、选项卡）</strong></p><p>对于自定义的下拉菜单或选项卡组件，用户可能期望使用方向键（上、下、左、右）来导航内部选项，而不是仅仅依靠Tab键。</p><ul><li><p><strong>下拉菜单/列表：</strong></p><pre class="brush:language-javascript;toolbar:false;">const dropdownList = document.getElementById('myDropdownList'); let currentSelectedIndex = -1; // 跟踪当前选中项 dropdownList.addEventListener('keydown', function(e) { const items = Array.from(this.children); // 假设子元素是列表项 if (e.key === 'ArrowDown') { currentSelectedIndex = (currentSelectedIndex + 1) % items.length; items[currentSelectedIndex].focus(); e.preventDefault(); // 阻止页面滚动 } else if (e.key === 'ArrowUp') { currentSelectedIndex = (currentSelectedIndex - 1 + items.length) % items.length; items[currentSelectedIndex].focus(); e.preventDefault(); } else if (e.key === 'Enter') { // 模拟点击当前选中项 items[currentSelectedIndex].click(); e.preventDefault(); } });</pre><p>这里，每个列表项可能需要 <code>tabindex="-1"</code> 才能被编程性聚焦，而整个下拉列表容器可能需要 <code>tabindex="0"</code> 来接收初始焦点。</p></li><li><p><strong>选项卡（Tabs）：</strong> 使用 <code>ArrowLeft</code> 和 <code>ArrowRight</code> 键在选项卡之间切换。</p><pre class="brush:language-html;toolbar:false;"><div role="tablist"> <button role="tab" id="tab1" aria-controls="panel1" tabindex="0">Tab 1</button> <button role="tab" id="tab2" aria-controls="panel2" tabindex="-1">Tab 2</button> <button role="tab" id="tab3" aria-controls="panel3" tabindex="-1">Tab 3</button> </div> <div id="panel1" role="tabpanel" aria-labelledby="tab1">...</div> <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>...</div> <div id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>...</div></pre><p>JavaScript会监听 <code>keydown</code> 事件，当用户按下左右箭头时，切换 <code>tabindex</code> 和 <code>aria-selected</code> 属性，并调用 <code>focus()</code> 方法。</p></li></ul><p><strong>3. <code>element.focus()</code> 和 <code>event.preventDefault()</code></strong></p><ul><li><strong><code>element.focus()</code>：</strong> 这是JavaScript中用于将焦点设置到特定元素上的核心方法。确保目标元素是可聚焦的（要么是原生可聚焦，要么设置了 <code>tabindex="0"</code> 或 <code>tabindex="-1"</code>）。</li><li><strong><code>event.preventDefault()</code>：</strong> 在处理键盘事件时，如果你的自定义行为与浏览器默认行为冲突（例如，按下 <code>Tab</code> 键时，你希望焦点停留在模态框内而不是跳出），一定要调用 <code>e.preventDefault()</code> 来阻止浏览器的默认行为。</li></ul><p><strong>4. ARIA属性辅助</strong></p><p>除了焦点管理，ARIA（Accessible Rich Internet Applications）属性也至关重要，它们为辅助技术提供了组件的语义信息。</p><ul><li><code>role="dialog"</code>、<code>role="tablist"</code>、<code>role="tab"</code>、<code>role="tabpanel"</code>：定义组件类型。</li><li><code>aria-labelledby</code>、<code>aria-describedby</code>：将元素与可读文本关联起来。</li><li><code>aria-expanded</code>：表示一个可折叠/展开的元素当前的状态。</li><li><code>aria-hidden="true"</code>：当元素不可见或不应被辅助技术访问时使用。</li></ul><p>总的来说，JavaScript在复杂组件中的焦点管理是一个细致活。它要求开发者深入理解用户行为、键盘交互模式，并结合ARIA属性，才能构建出既功能强大又无障碍的交互体验。这可能需要一些额外的开发成本，但从长远来看，它大大提升了产品的可用性和用户覆盖面。</p><p>今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~</p> </div> <div class="labsList"> <a href="javascript:;" title="HTML可访问性">HTML可访问性</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/428530.html" title="360手机卫士备份联系人步骤详解" class="img_box"> <img src="/uploads/20251220/17662361876946a01bafb06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="360手机卫士备份联系人步骤详解">360手机卫士备份联系人步骤详解 </a> <dl> <dt class="lineOverflow"><a href="/article/428530.html" title="360手机卫士备份联系人步骤详解" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">360手机卫士备份联系人步骤详解</dd> </dl> </div> <div class="cateItem"> <a href="/article/428532.html" title="VK怎么加好友？手把手教程详解" class="img_box"> <img src="/uploads/20251220/17662361786946a01275b5b.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="VK怎么加好友？手把手教程详解"> </a> <dl> <dt class="lineOverflow"><a href="/article/428532.html" class="aBlack" title="VK怎么加好友？手把手教程详解">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">VK怎么加好友？手把手教程详解</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/632150.html" class="img_box" title="ARIA live 怎样播报异步状态变化"> <img src="/uploads/20261015/1792017626-2e5731e907-406472b09a-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="ARIA live 怎样播报异步状态变化"> </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天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/632150.html" class="aBlack" target="_blank" title="ARIA live 怎样播报异步状态变化">ARIA live 怎样播报异步状态变化</a> </dt> <dd class="cont2"> <span><i class="view"></i>261浏览</span> <span class="collectBtn user_collection" data-id="632150" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632149.html" class="img_box" title="HTML inert 怎样暂时禁用背景区域交互"> <img src="/uploads/20261015/1792017580-3fc69fb2e1-ea33366d93-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML inert 怎样暂时禁用背景区域交互"> </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/240_new_0_1.html" class="aLightGray" title="html">html</a> · <a href="javascript:;" class="aLightGray" title="可访问性">可访问性</a> <a href="javascript:;" class="aLightGray" title="焦点管理">焦点管理</a> <a href="javascript:;" class="aLightGray" title="HTML inert">HTML inert</a> <a href="javascript:;" class="aLightGray" title="模态框背景禁用">模态框背景禁用</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/632149.html" class="aBlack" target="_blank" title="HTML inert 怎样暂时禁用背景区域交互">HTML inert 怎样暂时禁用背景区域交互</a> </dt> <dd class="cont2"> <span><i class="view"></i>153浏览</span> <span class="collectBtn user_collection" data-id="632149" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632148.html" class="img_box" title="CSS field-sizing 怎样让文本框高度随内容变化"> <img src="/uploads/20261015/1792017059-11dea2649b-92eb95b195-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS field-sizing 怎样让文本框高度随内容变化"> </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/4729_new_0_1.html" class="aLightGray" title="css">css</a> · <a href="/articletag/39796_new_0_1.html" class="aLightGray" title="表单">表单</a> · <a href="javascript:;" class="aLightGray" title="表单布局">表单布局</a> <a href="javascript:;" class="aLightGray" title="CSS field-sizing">CSS field-sizing</a> <a href="javascript:;" class="aLightGray" title="文本框自适应">文本框自适应</a> <a href="javascript:;" class="aLightGray" title="textarea 自动高度">textarea 自动高度</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/632148.html" class="aBlack" target="_blank" title="CSS field-sizing 怎样让文本框高度随内容变化">CSS field-sizing 怎样让文本框高度随内容变化</a> </dt> <dd class="cont2"> <span><i class="view"></i>328浏览</span> <span class="collectBtn user_collection" data-id="632148" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632147.html" class="img_box" title="CSS 容器查询怎样按组件宽度切换布局"> <img src="/uploads/20261015/1792016870-98e1cbf312-68ff73b5b7-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS 容器查询怎样按组件宽度切换布局"> </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/4729_new_0_1.html" class="aLightGray" title="css">css</a> · </span> </dd> <dt class="lineOverflow"> <a href="/article/632147.html" class="aBlack" target="_blank" title="CSS 容器查询怎样按组件宽度切换布局">CSS 容器查询怎样按组件宽度切换布局</a> </dt> <dd class="cont2"> <span><i class="view"></i>330浏览</span> <span class="collectBtn user_collection" data-id="632147" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632146.html" class="img_box" title="Service Worker 更新怎样控制接管时机"> <img src="/uploads/20261015/1792016782-9dc6fe17b8-44445c2a89-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Service Worker 更新怎样控制接管时机"> </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天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/632146.html" class="aBlack" target="_blank" title="Service Worker 更新怎样控制接管时机">Service Worker 更新怎样控制接管时机</a> </dt> <dd class="cont2"> <span><i class="view"></i>486浏览</span> <span class="collectBtn user_collection" data-id="632146" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632145.html" class="img_box" title="Cache API 怎样用完整请求区分缓存条目"> <img src="/uploads/20261015/1792016548-b1ab5620cc-ee9b512ca6-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Cache API 怎样用完整请求区分缓存条目"> </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/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="request">request</a> <a href="javascript:;" class="aLightGray" title="Cache API">Cache API</a> <a href="javascript:;" class="aLightGray" title="Cache.match">Cache.match</a> <a href="javascript:;" class="aLightGray" title="Vary">Vary</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/632145.html" class="aBlack" target="_blank" title="Cache API 怎样用完整请求区分缓存条目">Cache API 怎样用完整请求区分缓存条目</a> </dt> <dd class="cont2"> <span><i class="view"></i>432浏览</span> <span class="collectBtn user_collection" data-id="632145" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632144.html" class="img_box" title="IndexedDB 数据库升级怎样处理版本变更"> <img src="/uploads/20261015/1792016486-36316b1235-651f971b3f-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="IndexedDB 数据库升级怎样处理版本变更"> </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天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/632144.html" class="aBlack" target="_blank" title="IndexedDB 数据库升级怎样处理版本变更">IndexedDB 数据库升级怎样处理版本变更</a> </dt> <dd class="cont2"> <span><i class="view"></i>483浏览</span> <span class="collectBtn user_collection" data-id="632144" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632143.html" class="img_box" title="Web Worker 怎样转移 ArrayBuffer 避免复制"> <img src="/uploads/20261015/1792016446-b2f57447c2-cfb8a10ade-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web Worker 怎样转移 ArrayBuffer 避免复制"> </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天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/632143.html" class="aBlack" target="_blank" title="Web Worker 怎样转移 ArrayBuffer 避免复制">Web Worker 怎样转移 ArrayBuffer 避免复制</a> </dt> <dd class="cont2"> <span><i class="view"></i>408浏览</span> <span class="collectBtn user_collection" data-id="632143" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632142.html" class="img_box" title="ReadableStream 取消后怎样释放请求"> <img src="/uploads/20261015/1792016221-6b4558bc7d-bec292409c-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="ReadableStream 取消后怎样释放请求"> </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/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a> <a href="javascript:;" class="aLightGray" title="ReadableStream">ReadableStream</a> <a href="javascript:;" class="aLightGray" title="Streams API">Streams API</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/632142.html" class="aBlack" target="_blank" title="ReadableStream 取消后怎样释放请求">ReadableStream 取消后怎样释放请求</a> </dt> <dd class="cont2"> <span><i class="view"></i>203浏览</span> <span class="collectBtn user_collection" data-id="632142" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632141.html" class="img_box" title="ReadableStream 怎样用 TransformStream 转换数据"> <img src="/uploads/20261015/1792016078-3d0f4d59e4-4065766987-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="ReadableStream 怎样用 TransformStream 转换数据"> </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/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> · <a href="/articletag/39953_new_0_1.html" class="aLightGray" title="前端工程">前端工程</a> · <a href="javascript:;" class="aLightGray" title="ReadableStream">ReadableStream</a> <a href="javascript:;" class="aLightGray" title="流式响应">流式响应</a> <a href="javascript:;" class="aLightGray" title="TransformStream">TransformStream</a> <a href="javascript:;" class="aLightGray" title="pipeThrough">pipeThrough</a> <a href="javascript:;" class="aLightGray" title="Streams API">Streams API</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/632141.html" class="aBlack" target="_blank" title="ReadableStream 怎样用 TransformStream 转换数据">ReadableStream 怎样用 TransformStream 转换数据</a> </dt> <dd class="cont2"> <span><i class="view"></i>151浏览</span> <span class="collectBtn user_collection" data-id="632141" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632140.html" class="img_box" title="Fetch 怎样用 AbortSignal.timeout 设置请求超时"> <img src="/uploads/20261015/1792016059-fbeaedbb6e-2c18e449bb-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Fetch 怎样用 AbortSignal.timeout 设置请求超时"> </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天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/632140.html" class="aBlack" target="_blank" title="Fetch 怎样用 AbortSignal.timeout 设置请求超时">Fetch 怎样用 AbortSignal.timeout 设置请求超时</a> </dt> <dd class="cont2"> <span><i class="view"></i>166浏览</span> <span class="collectBtn user_collection" data-id="632140" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/632139.html" class="img_box" title="Fetch keepalive 适合发送哪些小请求"> <img src="/uploads/20261015/1792015931-f462a88ae1-5f6d0f9c16-cover-640.webp" onerror="this.src='/assets/images/moren/morentu.png'" alt="Fetch keepalive 适合发送哪些小请求"> </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天前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/632139.html" class="aBlack" target="_blank" title="Fetch keepalive 适合发送哪些小请求">Fetch keepalive 适合发送哪些小请求</a> </dt> <dd class="cont2"> <span><i class="view"></i>397浏览</span> <span class="collectBtn user_collection" data-id="632139" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight"> <!-- 右侧广告位banner --> <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/13900.html" target="_blank" title="PubMedQA数据集详解：生物医学问答基准、功能与应用指南" class="img_box"> <img src="/uploads/20260908/6a9f83280940e7.65575695.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="PubMedQA数据集详解：生物医学问答基准、功能与应用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13900.html" class="aBlack" target="_blank" title="PubMedQA">PubMedQA</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。 </dd> <dd class="cont2">492次使用</dd> </dl> </li> <li> <a href="/ai/13899.html" target="_blank" title="H2O EvalGPT：开源LLM大模型评估与排行榜工具" class="img_box"> <img src="/uploads/20260908/17887986376a9ee6adaf3f5.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="H2O EvalGPT：开源LLM大模型评估与排行榜工具" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13899.html" class="aBlack" target="_blank" title="H2O EvalGPT">H2O EvalGPT</a></dt> <dd class="cont1 lineTwoOverflow"> H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。 </dd> <dd class="cont2">548次使用</dd> </dl> </li> <li> <a href="/ai/13898.html" target="_blank" title="LMArena是什么？伯克利AI模型评估平台使用指南与功能解析" class="img_box"> <img src="/uploads/20260908/6a9f862dbcfec7.27385604.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="LMArena是什么？伯克利AI模型评估平台使用指南与功能解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13898.html" class="aBlack" target="_blank" title="LMArena">LMArena</a></dt> <dd class="cont1 lineTwoOverflow"> LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。 </dd> <dd class="cont2">575次使用</dd> </dl> </li> <li> <a href="/ai/13897.html" target="_blank" title="斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解" class="img_box"> <img src="/uploads/20260908/6a9f86b31ed789.06773114.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13897.html" class="aBlack" target="_blank" title="HELM">HELM</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。 </dd> <dd class="cont2">529次使用</dd> </dl> </li> <li> <a href="/ai/13896.html" target="_blank" title="MMBench详解：多模态大模型基准测试、功能特点与使用指南" class="img_box"> <img src="/uploads/20260908/6a9f86d3eed3e7.18564236.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MMBench详解：多模态大模型基准测试、功能特点与使用指南" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13896.html" class="aBlack" target="_blank" title="MMBench">MMBench</a></dt> <dd class="cont1 lineTwoOverflow"> MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。 </dd> <dd class="cont2">341次使用</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/621422.html" class="aBlack" title="智能体安全引领产业升级——国内AI安全产品市场深度分析">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></dt> <dd> <span class="left">2026-08-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/619053.html" class="aBlack" title="CSS变量简化按钮悬停效果技巧">CSS变量简化按钮悬停效果技巧</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/618916.html" class="aBlack" title="JavaScript符号类型详解与应用">JavaScript符号类型详解与应用</a></dt> <dd> <span class="left">2026-05-31</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/612539.html" class="aBlack" title="HTML剪贴板复制粘贴怎么用">HTML剪贴板复制粘贴怎么用</a></dt> <dd> <span class="left">2026-05-26</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <script src="/assets/js/frontend/common.js"></script> </body> </html>