当前位置：首页 > 文章列表 > 文章 > 前端 > HTML可访问性优化技巧分享

HTML可访问性优化技巧分享

2025-10-20 10:02:58 0浏览收藏

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:;" title="iframe">iframe</a> <a href="javascript:;" title="可访问性">可访问性</a> <a href="javascript:;" title="title属性">title属性</a> <a href="javascript:;" title="屏幕阅读器">屏幕阅读器</a> <a href="javascript:;" title="ARIA属性">ARIA属性</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/353317.html" title="中信证券身份证更新步骤详解" class="img_box"> <img src="/uploads/20251020/176092563368f597c188831.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="中信证券身份证更新步骤详解">中信证券身份证更新步骤详解 </a> <dl> <dt class="lineOverflow"><a href="/article/353317.html" title="中信证券身份证更新步骤详解" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">中信证券身份证更新步骤详解</dd> </dl> </div> <div class="cateItem"> <a href="/article/353319.html" title="完美世界灵巧任务通关攻略" class="img_box"> <img src="/uploads/20251020/176092581368f598754d00f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="完美世界灵巧任务通关攻略"> </a> <dl> <dt class="lineOverflow"><a href="/article/353319.html" class="aBlack" title="完美世界灵巧任务通关攻略">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">完美世界灵巧任务通关攻略</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/406897.html" class="img_box" title="Next.js404路由错误解决方法"> <img src="/uploads/20251203/176476486469302cc029586.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Next.js404路由错误解决方法"> </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分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406897.html" class="aBlack" target="_blank" title="Next.js404路由错误解决方法">Next.js404路由错误解决方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>276浏览</span> <span class="collectBtn user_collection" data-id="406897" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406895.html" class="img_box" title="表单自动化怎么实现？Zapier连接教程"> <img src="/uploads/20251203/176476478969302c75159ba.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="表单自动化怎么实现？Zapier连接教程"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  5分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406895.html" class="aBlack" target="_blank" title="表单自动化怎么实现？Zapier连接教程">表单自动化怎么实现？Zapier连接教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>342浏览</span> <span class="collectBtn user_collection" data-id="406895" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406883.html" class="img_box" title="CSS设置border-box包含padding和border的方法"> <img src="/uploads/20251203/176476431669302a9c91d97.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS设置border-box包含padding和border的方法"> </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>   |  13分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406883.html" class="aBlack" target="_blank" title="CSS设置border-box包含padding和border的方法">CSS设置border-box包含padding和border的方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>308浏览</span> <span class="collectBtn user_collection" data-id="406883" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406878.html" class="img_box" title="CSS导航菜单滑动动画实现教程"> <img src="/uploads/20251203/1764764070693029a698497.jpg" 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>   |  17分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406878.html" class="aBlack" target="_blank" title="CSS导航菜单滑动动画实现教程">CSS导航菜单滑动动画实现教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>488浏览</span> <span class="collectBtn user_collection" data-id="406878" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406874.html" class="img_box" title="Cookie与LocalStorage选择指南"> <img src="/uploads/20251203/1764763897693028f958574.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Cookie与LocalStorage选择指南"> </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>   |  20分钟前  |   <a href="javascript:;" class="aLightGray" title="cookie">cookie</a> <a href="javascript:;" class="aLightGray" title="安全性">安全性</a> <a href="javascript:;" class="aLightGray" title="localStorage">localStorage</a> <a href="javascript:;" class="aLightGray" title="浏览器存储">浏览器存储</a> <a href="javascript:;" class="aLightGray" title="数据用途">数据用途</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406874.html" class="aBlack" target="_blank" title="Cookie与LocalStorage选择指南">Cookie与LocalStorage选择指南</a> </dt> <dd class="cont2"> <span><i class="view"></i>396浏览</span> <span class="collectBtn user_collection" data-id="406874" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406873.html" class="img_box" title="JavaScript性能优化：WebWorkers处理密集任务"> <img src="/uploads/20251203/1764763832693028b80c537.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript性能优化：WebWorkers处理密集任务"> </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>   |  21分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406873.html" class="aBlack" target="_blank" title="JavaScript性能优化：WebWorkers处理密集任务">JavaScript性能优化：WebWorkers处理密集任务</a> </dt> <dd class="cont2"> <span><i class="view"></i>170浏览</span> <span class="collectBtn user_collection" data-id="406873" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406870.html" class="img_box" title="CSS过渡实现元素优雅隐藏显示"> <img src="/uploads/20251203/176476377969302883d8c4b.jpg" 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>   |  22分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406870.html" class="aBlack" target="_blank" title="CSS过渡实现元素优雅隐藏显示">CSS过渡实现元素优雅隐藏显示</a> </dt> <dd class="cont2"> <span><i class="view"></i>172浏览</span> <span class="collectBtn user_collection" data-id="406870" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406837.html" class="img_box" title="XSS与CSRF防御指南：JavaScript安全必读"> <img src="/uploads/20251203/17647619786930217ae493f.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="XSS与CSRF防御指南：JavaScript安全必读"> </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>   |  52分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406837.html" class="aBlack" target="_blank" title="XSS与CSRF防御指南：JavaScript安全必读">XSS与CSRF防御指南：JavaScript安全必读</a> </dt> <dd class="cont2"> <span><i class="view"></i>250浏览</span> <span class="collectBtn user_collection" data-id="406837" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406831.html" class="img_box" title="CSS控制数据顺序方法解析"> <img src="/uploads/20251203/17647616186930201219623.jpg" 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>   |  58分钟前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406831.html" class="aBlack" target="_blank" title="CSS控制数据顺序方法解析">CSS控制数据顺序方法解析</a> </dt> <dd class="cont2"> <span><i class="view"></i>415浏览</span> <span class="collectBtn user_collection" data-id="406831" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406809.html" class="img_box" title="滚动条优化技巧与实现代码"> <img src="/uploads/20251203/176476054269301bde9e689.png" 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>   |  1小时前  |   <a href="javascript:;" class="aLightGray" title="平滑滚动">平滑滚动</a> <a href="javascript:;" class="aLightGray" title="CSS自定义">CSS自定义</a> <a href="javascript:;" class="aLightGray" title="JavaScript控制">JavaScript控制</a> <a href="javascript:;" class="aLightGray" title="布局抖动">布局抖动</a> <a href="javascript:;" class="aLightGray" title="网页滚动条优化">网页滚动条优化</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406809.html" class="aBlack" target="_blank" title="滚动条优化技巧与实现代码">滚动条优化技巧与实现代码</a> </dt> <dd class="cont2"> <span><i class="view"></i>387浏览</span> <span class="collectBtn user_collection" data-id="406809" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406802.html" class="img_box" title="HTML和JS无法直接运行PHP文件，因为PHP是服务器端语言，而HTML和JS是客户端语言。要运行PHP文件，需要通过Web服务器（如Apache或Nginx）来解析PHP代码。以下是详细步骤：1.安装Web服务器Apache：在Windows上可以使用XAMPP或WAMP；在Linux上可以使用apt-getinstallapache2。Nginx：适用于更高效的静态资源处理，但配置相对复杂。"> <img src="/uploads/20251203/176476019369301a817b52a.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML和JS无法直接运行PHP文件，因为PHP是服务器端语言，而HTML和JS是客户端语言。要运行PHP文件，需要通过Web服务器（如Apache或Nginx）来解析PHP代码。以下是详细步骤：1.安装Web服务器Apache：在Windows上可以使用XAMPP或WAMP；在Linux上可以使用apt-getinstallapache2。Nginx：适用于更高效的静态资源处理，但配置相对复杂。"> </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="javascript:;" class="aLightGray" title="php">php</a> <a href="javascript:;" class="aLightGray" title="html">html</a> <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="表单提交">表单提交</a> <a href="javascript:;" class="aLightGray" title="ajax">ajax</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406802.html" class="aBlack" target="_blank" title="HTML和JS无法直接运行PHP文件，因为PHP是服务器端语言，而HTML和JS是客户端语言。要运行PHP文件，需要通过Web服务器（如Apache或Nginx）来解析PHP代码。以下是详细步骤：1.安装Web服务器Apache：在Windows上可以使用XAMPP或WAMP；在Linux上可以使用apt-getinstallapache2。Nginx：适用于更高效的静态资源处理，但配置相对复杂。">HTML和JS无法直接运行PHP文件，因为PHP是服务器端语言，而HTML和JS是客户端语言。要运行PHP文件，需要通过Web服务器（如Apache或Nginx）来解析PHP代码。以下是详细步骤：1.安装Web服务器Apache：在Windows上可以使用XAMPP或WAMP；在Linux上可以使用apt-getinstallapache2。Nginx：适用于更高效的静态资源处理，但配置相对复杂。</a> </dt> <dd class="cont2"> <span><i class="view"></i>280浏览</span> <span class="collectBtn user_collection" data-id="406802" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406801.html" class="img_box" title="悬停显示提示图标怎么实现"> <img src="/uploads/20251203/176476018069301a747f3af.jpg" 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>   |  1小时前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/406801.html" class="aBlack" target="_blank" title="悬停显示提示图标怎么实现">悬停显示提示图标怎么实现</a> </dt> <dd class="cont2"> <span><i class="view"></i>460浏览</span> <span class="collectBtn user_collection" data-id="406801" 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/13100.html" target="_blank" title="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" class="img_box"> <img src="/uploads/20251027/176155320368ff2b3345c06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13100.html" class="aBlack" target="_blank" title="ChatExcel酷表">ChatExcel酷表</a></dt> <dd class="cont1 lineTwoOverflow"> ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 </dd> <dd class="cont2">3186次使用</dd> </dl> </li> <li> <a href="/ai/13099.html" target="_blank" title="Any绘本：开源免费AI绘本创作工具深度解析" class="img_box"> <img src="/uploads/20251023/176120760368f9e5333da5f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Any绘本：开源免费AI绘本创作工具深度解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13099.html" class="aBlack" target="_blank" title="Any绘本">Any绘本</a></dt> <dd class="cont1 lineTwoOverflow"> 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 </dd> <dd class="cont2">3397次使用</dd> </dl> </li> <li> <a href="/ai/13098.html" target="_blank" title="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" class="img_box"> <img src="/uploads/20251021/176103600268f746e238bb8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13098.html" class="aBlack" target="_blank" title="可赞AI">可赞AI</a></dt> <dd class="cont1 lineTwoOverflow"> 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 </dd> <dd class="cont2">3429次使用</dd> </dl> </li> <li> <a href="/ai/13097.html" target="_blank" title="星月写作：AI网文创作神器，助力爆款小说速成" class="img_box"> <img src="/uploads/20251014/176043000368ee07b3159d6.jpg" 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/13097.html" class="aBlack" target="_blank" title="星月写作">星月写作</a></dt> <dd class="cont1 lineTwoOverflow"> 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 </dd> <dd class="cont2">4535次使用</dd> </dl> </li> <li> <a href="/ai/13096.html" target="_blank" title="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" class="img_box"> <img src="/uploads/20251014/176040000268ed9282edf80.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13096.html" class="aBlack" target="_blank" title="MagicLight">MagicLight</a></dt> <dd class="cont1 lineTwoOverflow"> MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 </dd> <dd class="cont2">3807次使用</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> </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/353318.html"/> <input type="hidden" name="__token__" value="c67cdf4005ced10f756f85bf04ffdb91" /> <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/353318.html"/> <input type="hidden" name="__token__" value="c67cdf4005ced10f756f85bf04ffdb91" /> <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> 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> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> </body> </html>