首页 > 文章 > 前端

HTML可访问性优化技巧分享

时间：2025-10-20 10:02:58 159浏览收藏

HTML框架可访问性优化是提升网站用户体验的关键环节，尤其对于依赖屏幕阅读器的用户至关重要。本文聚焦于``元素的`title`属性，强调其在提供清晰框架内容描述上的核心作用。一个好的`title`属性应简洁、准确，避免缺失或使用泛化的描述，如“内容”或“框架”。此外，文章还探讨了结合`sandbox`属性增强安全性，利用`loading="lazy"`提升性能，以及使用`aria-labelledby`提供更灵活上下文信息的方法。同时，强调了框架内部内容本身的可访问性标准，并提供了手动屏幕阅读器测试、开发者工具检查以及自动化工具排查等多种测试方法，帮助开发者避免常见的可访问性错误，构建真正包容的嵌入式交互体验。

优化HTML框架可访问性需以的title属性为核心，确保其内容对屏幕阅读器用户清晰可辨。首先，title应简洁准确描述功能，如“嵌入YouTube视频：Rick Astley - Never Gonna Give You Up”，避免缺失或泛化为“内容”“框架”。其次，结合sandbox增强安全性，防止第三方内容干扰；使用loading="lazy"提升性能与体验流畅度。对于复杂场景，可用aria-labelledby关联外部标题元素，提供更灵活的上下文信息，同时确保内部内容本身符合可访问性标准，包括表单标签、键盘导航等。测试时应结合手动屏幕阅读器（如NVDA、VoiceOver）验证焦点进入与内容播报，利用开发者工具检查可访问名称，并通过Lighthouse、axe等自动化工具排查缺失或无效title。常见错误包括title缺失、空值、不匹配实际内容及忽略内部可访问性，这些都会导致用户体验断裂。综上，通过语义化title、多属性协同、内外内容一致及系统化测试，构建真正包容的嵌入式交互体验。</p></p></blockquote><p><img src="/uploads/20251020/176092572868f59820bf791.png" alt="HTML框架可访问性怎么优化_框架标题可访问性设置"></p><p>优化HTML框架的可访问性，特别是其标题设置，核心在于确保所有用户，尤其是依赖屏幕阅读器的用户，能够清晰理解每个框架（通常是<code><iframe></code>）的内容和用途。这远不止是添加一个<code>title</code>属性那么简单，它关乎提供有意义、准确的上下文信息，让用户能高效地导航和理解页面结构。</p><p>解决方案</p><p>要全面优化HTML框架的可访问性，尤其是其标题设置，我们首先要聚焦于<code><iframe></code>元素，因为它在现代Web开发中几乎完全取代了旧的<code><frame></code>和<code><frameset></code>。关键在于充分利用<code><iframe></code>的<code>title</code>属性，并结合其他策略来提供必要的上下文和交互支持。</p><p>一个有效的<code><iframe></code> <code>title</code>属性应该简洁、准确地描述框架的内容或功能。想象一下，如果一个屏幕阅读器用户遇到一个没有<code>title</code>的<code><iframe></code>，他们听到的可能只是“框架”或“无标题框架”，这让他们无从判断这个区域是做什么的，是否值得互动。而一个描述性强的<code>title</code>，比如“嵌入的YouTube视频：[视频名称]”或者“交互式地图显示[地点]”，则能立即提供关键信息。</p><p>具体来说，在处理嵌入的第三方内容（如视频播放器、地图、社交媒体插件）时，务必检查这些嵌入代码是否已经包含了有意义的<code>title</code>。如果发现缺失或过于泛泛（如<code>title="frame"</code>），我们应该主动修改或联系提供方。对于我们自己创建的<code><iframe></code>，更是要从一开始就规划好其<code>title</code>。</p><pre> <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="嵌入的YouTube视频：Rick Astley - Never Gonna Give You Up (Official Music Video)" width="560" height="315" frameborder="0" allowfullscreen> </iframe>  <iframe src="/my-internal-app" width="800" height="600"></iframe>  <iframe src="/my-internal-widget" title="内容" width="400" height="300"></iframe> </pre><p>除了<code>title</code>属性，还要考虑到框架内容的焦点管理。用户需要能够顺利地将焦点移入框架内部进行互动，并在完成后移出。这通常由浏览器默认处理，但如果框架内有复杂的交互，可能需要额外的JavaScript来确保焦点管理符合预期。</p><p>为什么iframe的title属性如此重要，以及如何撰写有效的标题？</p><p><code><iframe></code>的<code>title</code>属性对于可访问性来说，重要性怎么强调都不为过。它不仅仅是一个元数据标签，更是屏幕阅读器用户理解页面结构和内容的关键线索。试想一下，如果你是视力受损的用户，通过屏幕阅读器浏览网页，当遇到一个<code><iframe></code>时，如果没有<code>title</code>，你可能只会听到“框架”或者“内联框架”。这就像在现实生活中，你走进一个房间，却不知道它是厨房、卧室还是办公室，完全失去了方向感。</p><p><code>title</code>属性的作用在于：</p><ul><li><strong>提供上下文：</strong> 它能告诉用户这个框架里装的是什么，比如“评论区”、“在线聊天窗口”或者“嵌入的地图”。</li><li><strong>辅助导航：</strong> 许多屏幕阅读器允许用户直接跳到页面上的特定框架。一个有意义的<code>title</code>能让用户快速定位到他们感兴趣的内容区域。</li><li><strong>减少认知负荷：</strong> 用户无需猜测框架的用途，直接获得信息，从而提高浏览效率和满意度。</li></ul><p>那么，如何撰写一个有效的<code><iframe></code>标题呢？这需要一点思考和策略：</p><ol><li><strong>具体而简洁：</strong> 标题应明确指出框架的内容或功能，但不要冗长。例如，不要写“这是一个显示我们公司最新产品信息的框架”，而是“最新产品展示”。</li><li><strong>独一无二：</strong> 如果页面上有多个<code><iframe></code>，每个<code>title</code>都应该有所区别，以便用户能够区分它们。比如，如果有两个视频播放器，可以分别命名为“产品介绍视频”和“客户案例视频”。</li><li><strong>避免冗余信息：</strong> 标题本身就说明了是框架内容，所以不必在标题中重复“框架”、“内容”这样的词。</li><li><strong>反映当前状态（如果适用）：</strong> 对于动态内容，如果可能，<code>title</code>可以随着内容的变化而更新，例如一个实时聊天窗口的<code>title</code>可以包含“当前有X条新消息”。当然，这通常需要JavaScript的配合。</li><li><strong>考虑用户预期：</strong> 设想用户会希望从这个框架中获得什么信息或执行什么操作。</li></ol><pre> <iframe src="https://maps.google.com/embed?pb=!1m18!1m12!1m3!1d2890.347570216654!2d-79.3872580845778!3d43.64256617912161!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89d4cb7331d2a6a1%3A0x86c2d1b0d2a4a7a!2sCN%20Tower!5e0!3m2!1sen!2sca!4v1614782019973!5m2!1sen!2sca" title="多伦多CN塔的交互式地图" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"> </iframe>  <iframe src="https://example.com/login" title="登录" width="300" height="200"></iframe> </pre><p>一个好的<code>title</code>是可访问性工作的基石，它让页面不再是信息的孤岛，而是互联互通的体验。</p><p>除了title，还有哪些属性或技术可以增强iframe的可访问性？</p><p>虽然<code>title</code>属性是<code><iframe></code>可访问性的核心，但它并非唯一的工具。要构建一个真正包容性的用户体验，我们还需要考虑其他属性和技术，它们从不同维度提升框架的可用性和安全性。</p><ol><li><p><strong><code>sandbox</code> 属性：</strong> 这个属性主要用于增强安全性，但它间接影响了可访问性，因为它限制了<code><iframe></code>中内容的行为。通过限制脚本执行、表单提交、弹出窗口等，<code>sandbox</code>可以防止恶意或不规范的第三方内容干扰主页面的功能或可访问性。例如，一个被沙盒化的框架，即使其内部有JavaScript错误，也不会影响到主页面的屏幕阅读器交互。</p><pre><iframe src="untrusted-content.html" sandbox="allow-scripts allow-forms" title="受限的第三方内容展示"></iframe></pre><p>这里<code>allow-scripts</code>和<code>allow-forms</code>是根据需求开放的权限，如果没有这些，框架内部的脚本和表单将无法运行。</p></li><li><p><strong><code>loading="lazy"</code> 属性：</strong> 虽然这主要是性能优化，但它对可访问性也有积极影响。延迟加载不在视口内的<code><iframe></code>可以加快页面首次加载时间，减少用户等待。对于依赖屏幕阅读器或有认知障碍的用户来说，更快的加载速度意味着更流畅、更少的挫败感。</p><pre><iframe src="large-image-gallery.html" loading="lazy" title="产品图片画廊"></iframe></pre></li><li><p><strong><code>aria-labelledby</code> 和 <code>aria-describedby</code>：</strong> 在某些复杂场景下，如果仅仅一个<code>title</code>不足以提供所有必要的上下文，或者框架的标题实际上是由页面上的其他元素提供的，我们可以使用这些ARIA属性。</p><ul><li><code>aria-labelledby</code> 可以引用页面上一个或多个元素的ID，将它们的内容作为<code><iframe></code>的“可访问名称”。这比<code>title</code>更灵活，因为它可以聚合多个文本源。</li><li><code>aria-describedby</code> 则用于提供更详细的描述性信息，通常是当<code>title</code>已经提供了主要名称，但还需要额外说明时。</li></ul><pre><h2 id="chat-heading">在线客服</h2> <iframe src="chat-widget.html" aria-labelledby="chat-heading" title="在线客服聊天窗口"></iframe> </pre><p>请注意，<code>title</code>和<code>aria-labelledby</code>/<code>aria-label</code>同时存在时，ARIA属性通常会覆盖<code>title</code>作为可访问名称。所以，使用时要确保它们不冲突，或者ARIA属性提供的信息更准确。</p></li><li><p><strong>内容内部的可访问性：</strong> 最重要的一点是，<code><iframe></code>内部加载的内容本身必须是可访问的。一个完美的<code><iframe></code> <code>title</code>也无法弥补内部内容的可访问性缺陷。这意味着，如果你的<code><iframe></code>加载了一个表单，这个表单本身需要有正确的标签、错误提示和键盘导航支持。这超出了<code><iframe></code>属性的范畴，但却是整体可访问性策略中不可或缺的一部分。我们必须确保框架内部的HTML文档遵循所有可访问性最佳实践。</p></li></ol><p>这些属性和技术共同构成了<code><iframe></code>可访问性的多层次保障，让所有用户都能更顺畅地与嵌入内容互动。</p><p>如何测试iframe的可访问性，以及常见的错误有哪些？</p><p>测试<code><iframe></code>的可访问性是确保用户体验的关键一步。仅仅依赖自动化工具是不够的，因为它们往往无法捕捉到所有细微的用户体验问题。我们需要结合多种方法。</p><p><strong>测试方法：</strong></p><ol><li><p><strong>手动屏幕阅读器测试：</strong> 这是最直接、最有效的方法。</p><ul><li><strong>工具：</strong> Windows上的NVDA（免费）或JAWS（付费），macOS上的VoiceOver（内置），iOS上的VoiceOver，Android上的TalkBack。</li><li><strong>步骤：</strong><ul><li>打开屏幕阅读器，然后加载你的网页。</li><li>使用Tab键和屏幕阅读器的导航快捷键（例如，NVDA的<code>D</code>键跳到地标，<code>F</code>键跳到表单控件，<code>I</code>键跳到图片，或者<code>Ctrl+Alt+Arrows</code>进行对象导航）在页面上移动。</li><li>当焦点进入或接近<code><iframe></code>时，听屏幕阅读器如何宣布它。它是否读出了你期望的<code>title</code>？<code>title</code>是否清晰地传达了框架的内容或目的？</li><li>尝试使用屏幕阅读器的元素列表功能（例如，NVDA的<code>Insert+F7</code>，JAWS的<code>Insert+F5</code>）查看框架列表，检查<code>title</code>是否正确显示。</li><li>尝试将焦点移入<code><iframe></code>内部，并确保可以与内部元素进行交互（例如，填写表单、点击按钮），然后顺利地将焦点移出。</li></ul></li></ul></li><li><p><strong>浏览器开发者工具的辅助功能面板：</strong> 现代浏览器的开发者工具都包含了辅助功能（Accessibility）面板。</p><ul><li><strong>步骤：</strong><ul><li>在Chrome、Firefox或Edge中打开开发者工具。</li><li>选择“元素”（Elements）或“检查器”（Inspector）面板。</li><li>找到你的<code><iframe></code>元素。</li><li>切换到“辅助功能”（Accessibility）选项卡（可能在“样式”、“计算”等旁边）。</li><li>在这里，你可以看到元素的“可访问名称”（Accessible Name），它通常就是<code>title</code>属性的值，或者是由<code>aria-labelledby</code>等属性计算出来的。同时，你还可以检查元素的“角色”（Role）和其他ARIA属性。</li></ul></li></ul></li><li><p><strong>自动化测试工具：</strong> 这些工具可以快速发现一些显而易见的、符合WCAG（Web内容可访问性指南）规范的错误。</p><ul><li><strong>工具：</strong> Google Lighthouse、axe-core（通过浏览器扩展或集成到CI/CD）、WAVE Web Accessibility Tool。</li><li><strong>步骤：</strong> 运行这些工具对页面进行扫描，它们会报告<code><iframe></code>是否缺少<code>title</code>属性，或者<code>title</code>是否过于通用。</li></ul></li></ol><p><strong>常见的错误：</strong></p><ol><li><p><strong><code>title</code>属性缺失或为空：</strong> 这是最常见的错误。屏幕阅读器将无法为用户提供任何关于框架内容的信息。</p><pre><iframe src="content.html" width="300" height="200"></iframe>  <iframe src="content.html" title="" width="300" height="200"></iframe> </pre></li><li><p><strong><code>title</code>属性过于通用或无意义：</strong> 例如<code>title="Frame"</code>、<code>title="Content"</code>、<code>title="Untitled"</code>。这些标题虽然存在，但未能提供任何有用的上下文信息，和没有<code>title</code>的效果差不多。</p></li><li><p><strong><code>title</code>属性与框架实际内容不符：</strong> 这种情况虽然少见，但如果发生，会严重误导屏幕阅读器用户。例如，一个<code>title="联系我们表单"</code>的框架里实际上是一个嵌入的视频播放器。</p></li><li><p><strong>未考虑框架内部的可访问性：</strong> 即使<code><iframe></code>本身有完美的<code>title</code>，如果其内部加载的文档（例如<code>iframe.html</code>）本身不符合可访问性标准（例如，内部的图片没有<code>alt</code>文本，表单控件没有关联的<code><label></code>），那么整个用户体验仍然是不可访问的。这就像给一个黑盒子贴上漂亮的标签，但盒子里面却是空的或混乱的。</p></li><li><p><strong>键盘焦点管理问题：</strong> 用户可能无法通过Tab键将焦点顺利地移入<code><iframe></code>内部进行交互，或者在交互完成后无法将焦点移出。这通常发生在自定义的JavaScript交互或复杂的嵌套结构中。</p></li><li><p><strong>滥用<code>role="application"</code>：</strong> 有些开发者可能会尝试给<code><iframe></code>添加<code>role="application"</code>。虽然在某些非常特定的、完全模拟桌面应用的场景下这可能是合适的，但通常不建议对<code><iframe></code>使用，因为它会改变屏幕阅读器的默认导航行为，可能导致用户无法使用标准的文档导航命令。</p></li></ol><p>通过结合上述测试方法并警惕这些常见错误，我们能够系统性地提升<code><iframe></code>的可访问性，为所有用户创造更公平、更高效的浏览体验。</p><p>以上就是《HTML可访问性优化技巧分享》的详细内容，更多关于iframe,可访问性,title属性,屏幕阅读器,ARIA属性的资料请关注golang学习网公众号！</p> </div> <div class="labsList"> <a href="javascript:;" class="aLightGray" title="iframe">iframe</a> <a href="javascript:;" class="aLightGray" title="可访问性">可访问性</a> <a href="javascript:;" class="aLightGray" title="title属性">title属性</a> <a href="javascript:;" class="aLightGray" title="屏幕阅读器">屏幕阅读器</a> <a href="javascript:;" class="aLightGray" title="ARIA属性">ARIA属性</a> </div> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  6个月前  |   <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="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="优化">优化</a> <a href="javascript:;" class="aLightGray" title="体验">体验</a> </div> <div class="tit lineOverflow"><a href="/article/72840.html" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a> <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a> <a href="javascript:;" class="aLightGray" title="特效">特效</a> </div> <div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a> <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a> <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a> </div> <div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="团队合作">团队合作</a> <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a> <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a> </div> <div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <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="javascript:;" class="aLightGray" title="grid-template-columns">grid-template-columns</a> <a href="javascript:;" class="aLightGray" title="CSSGrid">CSSGrid</a> <a href="javascript:;" class="aLightGray" title="minmax()">minmax()</a> <a href="javascript:;" class="aLightGray" title="repeat()">repeat()</a> <a href="javascript:;" class="aLightGray" title="响应式图片列表">响应式图片列表</a> </div> <div class="tit lineOverflow"><a href="/article/407018.html" title="响应式图片列表制作技巧分享" class="aBlack">响应式图片列表制作技巧分享</a></div> <div class="opt"> <span><i class="view"></i>175</span> <span class="collectBtn user_collection" data-id="407018" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  7分钟前  |   <a href="javascript:;" class="aLightGray" title="缓存策略">缓存策略</a> <a href="javascript:;" class="aLightGray" title="ServiceWorker">ServiceWorker</a> <a href="javascript:;" class="aLightGray" title="PWA">PWA</a> <a href="javascript:;" class="aLightGray" title="Workbox">Workbox</a> <a href="javascript:;" class="aLightGray" title="离线可用性">离线可用性</a> </div> <div class="tit lineOverflow"><a href="/article/407017.html" title="PWA缓存策略：ServiceWorker使用技巧" class="aBlack">PWA缓存策略：ServiceWorker使用技巧</a></div> <div class="opt"> <span><i class="view"></i>407</span> <span class="collectBtn user_collection" data-id="407017" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  10分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/407012.html" title="CSS盒模型与Grid布局实战技巧" class="aBlack">CSS盒模型与Grid布局实战技巧</a></div> <div class="opt"> <span><i class="view"></i>157</span> <span class="collectBtn user_collection" data-id="407012" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  19分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/407001.html" title="CSS相对定位偏移详解与应用" class="aBlack">CSS相对定位偏移详解与应用</a></div> <div class="opt"> <span><i class="view"></i>105</span> <span class="collectBtn user_collection" data-id="407001" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  31分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/406984.html" title="Python爬虫进阶：动态网站抓取技巧分享" class="aBlack">Python爬虫进阶：动态网站抓取技巧分享</a></div> <div class="opt"> <span><i class="view"></i>281</span> <span class="collectBtn user_collection" data-id="406984" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  37分钟前  |   <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="DOM操作">DOM操作</a> <a href="javascript:;" class="aLightGray" title="HTML5模板">HTML5模板</a> <a href="javascript:;" class="aLightGray" title="可复用模板">可复用模板</a> </div> <div class="tit lineOverflow"><a href="/article/406977.html" title="HTML5标签使用教程与实战解析" class="aBlack">HTML5标签使用教程与实战解析</a></div> <div class="opt"> <span><i class="view"></i>281</span> <span class="collectBtn user_collection" data-id="406977" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  40分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/406974.html" title="Python分页数据抓取技巧分享" class="aBlack">Python分页数据抓取技巧分享</a></div> <div class="opt"> <span><i class="view"></i>481</span> <span class="collectBtn user_collection" data-id="406974" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  44分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/406968.html" title="JavaScript操作Canvas绘图详解" class="aBlack">JavaScript操作Canvas绘图详解</a></div> <div class="opt"> <span><i class="view"></i>156</span> <span class="collectBtn user_collection" data-id="406968" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  50分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/406960.html" title="ESModule加载方式有哪些？详解ESModule用法" class="aBlack">ESModule加载方式有哪些？详解ESModule用法</a></div> <div class="opt"> <span><i class="view"></i>434</span> <span class="collectBtn user_collection" data-id="406960" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  52分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/406957.html" title="WebGL与Three.js打造3D网页沉浸体验" class="aBlack">WebGL与Three.js打造3D网页沉浸体验</a></div> <div class="opt"> <span><i class="view"></i>343</span> <span class="collectBtn user_collection" data-id="406957" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  53分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/406956.html" title="CSS图标旋转实现技巧与教程" class="aBlack">CSS图标旋转实现技巧与教程</a></div> <div class="opt"> <span><i class="view"></i>348</span> <span class="collectBtn user_collection" data-id="406956" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  55分钟前  |   <a href="javascript:;" class="aLightGray" title="FLEXBOX">FLEXBOX</a> <a href="javascript:;" class="aLightGray" title="CSSGrid">CSSGrid</a> <a href="javascript:;" class="aLightGray" title="CSS清除浮动">CSS清除浮动</a> <a href="javascript:;" class="aLightGray" title="浮动塌陷">浮动塌陷</a> <a href="javascript:;" class="aLightGray" title=":after伪类">:after伪类</a> </div> <div class="tit lineOverflow"><a href="/article/406953.html" title="CSS浮动清除与父容器自适应高度详解" class="aBlack">CSS浮动清除与父容器自适应高度详解</a></div> <div class="opt"> <span><i class="view"></i>332</span> <span class="collectBtn user_collection" data-id="406953" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div>  <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>