当前位置：首页 > 文章列表 > 文章 > 前端 > HTML文件预览实现方法详解
HTML文件预览是前端开发中常见的需求，本文深入探讨了如何利用HTML和JavaScript实现各种文件的预览功能，并针对百度SEO进行了优化。**HTML实现文件预览**的核心在于利用浏览器对图片、PDF、文本等格式的原生支持，通过``标签嵌入或借助JavaScript的FileReader和URL.createObjectURL API动态生成可预览内容。文章详细讲解了如何使用`<iframe>`预览PDF、图片和文本文件，以及使用JavaScript读取本地文件并预览的方法，并分析了预览失败的常见原因，如MIME类型设置错误和跨域问题。此外，还针对不同文件类型，如Office文档和CAD文件，提出了相应的预览策略，强调在技术选型时应优先考虑浏览器原生能力，逐步升级至客户端处理或后端支持，以平衡性能与开发成本，从而提升用户体验和网站的SEO效果。
实现HTML文件预览的核心是利用浏览器对图片、PDF、文本、音视频等格式的原生支持，结合、<img>等标签进行嵌入显示；2. 预览失败常因服务器MIME类型设置错误、Content-Disposition头强制下载、跨域限制或浏览器不支持该文件类型；3. 对于本地文件预览，可使用JavaScript的FileReader读取文件内容为Data URL，或通过URL.createObjectURL创建Blob URL实现高效预览；4. 不同文件类型需采取不同策略：图片和音视频可用原生标签，PDF推荐<iframe>或PDF.js库，文本文件需注意编码读取，Office文档则依赖第三方服务或服务器端转换；5. 复杂文件如CAD或压缩包无法直接预览，通常需提供下载或在服务端解析后转换为可展示格式。最终方案应优先选择浏览器原生能力，再逐步升级至客户端处理或后端支持，以平衡性能与开发成本。</p><p><img src="/uploads/20250808/17546516536895dc0542c80.jpg" alt="HTML如何实现文件预览？怎么在网页查看文件内容？"></p><p>HTML实现文件预览，核心在于利用浏览器自身对特定文件类型的解析能力，或者借助JavaScript在客户端进行处理，常见手段包括使用<code><iframe></code>标签嵌入、<code><a></code>标签的下载属性，以及通过JavaScript的<code>FileReader</code>或<code>URL.createObjectURL</code> API来动态生成可预览的内容。这不像听起来那么简单，很多时候需要根据文件类型和实际需求来选择最合适的方法，甚至要考虑服务器端的配合。</p><p>HTML文件预览的实现，其实是一个分层递进的问题。最基础的，浏览器本身就能处理一些常见格式，比如图片、PDF、纯文本、音频和视频。我们利用这些内置能力，往往能解决大部分简单的预览需求。</p><p>一个常见的方法是利用<code><iframe></code>标签。我记得刚开始接触文件预览时，总觉得一个简单的<code><img></code>标签就能搞定图片，但遇到PDF或者其他文档，就有点懵了。那时候才发现，<code><iframe></code>是个好东西，它可以像一个小窗口一样，把另一个网页或者文档嵌入到当前页面里。</p><pre><!-- 预览PDF文件 --> <iframe src="path/to/your/document.pdf" width="800" height="600" frameborder="0"></iframe> <!-- 预览图片 --> <iframe src="path/to/your/image.jpg" width="600" height="400" frameborder="0"></iframe> <!-- 预览纯文本文件 --> <iframe src="path/to/your/textfile.txt" width="600" height="400" frameborder="0"></iframe></pre><p>这种方式简单直接，对于浏览器原生支持的格式（如PDF、常见图片、纯文本、甚至HTML页面本身），效果通常不错。浏览器会尝试渲染<code>src</code>指向的文件。但它也有局限性，比如对于用户本地选择的文件，直接这样用就不行了，因为<code>src</code>需要一个可访问的URL。另外，如果服务器没有正确设置文件的MIME类型，或者设置了<code>Content-Disposition: attachment</code>，浏览器就可能直接下载而不是预览。</p><h3>为什么直接在HTML中嵌入文件有时会失败或表现不符预期？</h3><p>这个问题我深有体会，很多时候我们以为很简单地把文件路径扔给<code><iframe></code>或<code><img></code>，就能万事大吉，结果却发现文件直接下载了，或者显示一片空白。这背后有几个常见的原因，而且往往是多重因素交织在一起。</p><p>首先，<strong>MIME类型是关键</strong>。浏览器判断一个文件是什么类型，主要看服务器在响应头里发送的<code>Content-Type</code>。如果服务器把一个PDF文件的<code>Content-Type</code>设成了<code>application/octet-stream</code>（通用二进制流），或者干脆不设置，浏览器就不知道该怎么处理它，最保守的做法就是触发下载。所以，确保服务器能正确识别并发送对应的MIME类型（比如PDF是<code>application/pdf</code>，JPEG是<code>image/jpeg</code>）至关重要。</p><p>其次，<strong><code>Content-Disposition</code>头部的影响</strong>。这是另一个让文件直接下载的“元凶”。如果服务器在响应头里包含了<code>Content-Disposition: attachment; filename="yourfile.pdf"</code>，那么无论MIME类型多正确，浏览器都会把它当作一个附件来处理，强制用户下载。要实现预览，通常需要<code>Content-Disposition: inline; filename="yourfile.pdf"</code>，或者干脆不设置<code>Content-Disposition</code>（默认情况下，浏览器会尝试预览）。我在调试后端接口时，就经常因为这个头部设置不对，导致前端预览功能卡壳。</p><p>再来，<strong>浏览器兼容性和安全性策略</strong>。不同浏览器对某些文件类型的内置支持程度有差异。例如，早期的浏览器可能对PDF的支持不如现在这么好。更重要的是，浏览器的安全策略，比如同源策略（Same-Origin Policy），会限制<code><iframe></code>加载不同源的内容，或者限制脚本访问<code><iframe></code>内部的内容。如果你的文件来自不同的域名，可能会遇到CORS（跨域资源共享）问题，需要服务器端进行配置。</p><p>最后，<strong>文件内容本身的复杂性</strong>。对于Office文档（Word, Excel, PowerPoint）或者CAD图纸这类专有格式，浏览器是没办法直接解析和渲染的。这时候，即使MIME类型和<code>Content-Disposition</code>都设置正确，浏览器也只能提供下载选项。要预览这类文件，通常需要借助第三方服务（比如微软的Office Online Viewer、Google Docs Viewer）进行转换，或者在服务器端进行预处理，将其转换为HTML、图片或PDF等浏览器可识别的格式。这涉及到更复杂的后端逻辑和API调用，超出了纯前端HTML的能力范畴。</p><h3>如何使用JavaScript更灵活地实现文件预览，尤其是本地文件？</h3><p>当我们需要预览用户从本地上传的文件时，或者想对预览内容有更精细的控制时，JavaScript就成了不可或缺的工具。这里主要用到两个强大的Web API：<code>FileReader</code>和<code>URL.createObjectURL</code>。</p><p><strong><code>FileReader</code> API</strong> 允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。这对于预览图片、文本文件或者获取文件内容进行进一步处理非常有用。</p><p>比如说，你想让用户选择一张本地图片，然后立即在页面上显示出来，而不需要先上传到服务器：</p><pre>&lt;input type=&quot;file&quot; id=&quot;imageInput&quot; accept=&quot;image/*&quot;&gt; <img id="previewImage" src="#" alt="图片预览" style="max-width: 300px; display: none;"> <script> document.getElementById('imageInput').addEventListener('change', function(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { const imgElement = document.getElementById('previewImage'); imgElement.src = e.target.result; // e.target.result 包含图片的Base64编码 imgElement.style.display = 'block'; }; reader.readAsDataURL(file); // 将文件读取为Data URL (Base64编码) } }); </script></pre><p>这里<code>readAsDataURL</code>会将文件内容编码成Base64字符串，直接嵌入到<code><img></code>标签的<code>src</code>属性中。这种方式对于小文件很方便，但如果文件太大，Base64字符串会非常长，占用内存较多。</p><p>对于纯文本文件，你可以使用<code>reader.readAsText(file, encoding)</code>来读取文件内容，然后将其显示在一个<code><div></code>或<code><pre></code>标签中。</p><p><strong><code>URL.createObjectURL()</code> API</strong> 则提供了另一种更高效的方式来预览本地文件，尤其适合大文件。它会创建一个临时的、唯一的URL，这个URL指向浏览器内存中的一个<code>File</code>或<code>Blob</code>对象。这个URL可以像普通URL一样被用在<code><img></code>、<code><video></code>、<code><audio></code>的<code>src</code>属性，或者<code><iframe></code>的<code>src</code>中。</p><pre class="brush:html;toolbar:false;">&lt;input type=&quot;file&quot; id=&quot;fileInput&quot;&gt; <div id="filePreview"></div> <script> document.getElementById('fileInput').addEventListener('change', function(event) { const file = event.target.files[0]; if (file) { const fileURL = URL.createObjectURL(file); const previewDiv = document.getElementById('filePreview'); previewDiv.innerHTML = ''; // 清空之前的预览 if (file.type.startsWith('image/')) { const img = document.createElement('img'); img.src = fileURL; img.style.maxWidth = '100%'; previewDiv.appendChild(img); } else if (file.type === 'application/pdf') { const iframe = document.createElement('iframe'); iframe.src = fileURL; iframe.width = '100%'; iframe.height = '500px'; iframe.frameborder = '0'; previewDiv.appendChild(iframe); } else if (file.type.startsWith('text/')) { // 对于文本文件，通常还是用FileReader读取内容更直接 const reader = new FileReader(); reader.onload = function(e) { const pre = document.createElement('pre'); pre.textContent = e.target.result; previewDiv.appendChild(pre); }; reader.readAsText(file); } else { // 对于其他不支持直接预览的类型，提供下载链接 const link = document.createElement('a'); link.href = fileURL; link.download = file.name; link.textContent = `点击下载: ${file.name}`; previewDiv.appendChild(link); } // 重要的：在不再需要URL时释放它，以释放内存 // setTimeout(() => URL.revokeObjectURL(fileURL), 1000 * 60); // 比如一分钟后释放 } }); </script></pre><p><code>URL.createObjectURL</code>的优势在于它避免了将整个文件内容编码成Base64，尤其适合处理大文件。但记住，这些URL是临时的，并且只在当前文档的生命周期内有效。一旦不再需要，最好调用<code>URL.revokeObjectURL()</code>来释放内存，避免内存泄漏，尤其是在频繁创建大量对象URL的场景下。</p><h3>处理不同文件类型预览的策略与挑战</h3><p>在实际项目中，文件预览的需求远不止图片和PDF那么简单。面对各种各样的文件类型，我们需要一套更全面的策略，并且要清楚其中的挑战。</p><p><strong>图片 (Image):</strong> 这是最直接的。使用<code><img></code>标签配合<code>src</code>属性，无论是服务器URL还是<code>FileReader</code>生成的Data URL，或者<code>URL.createObjectURL</code>生成的Blob URL，都能轻松搞定。挑战主要在于图片加载性能（大图优化）、裁剪、旋转等高级操作，这些通常需要CSS或JavaScript库来辅助。</p><p><strong>PDF (Portable Document Format):</strong> 浏览器对PDF的内置支持已经相当成熟，<code><iframe></code>标签是首选。如果需要更丰富的交互功能（如搜索、批注、页码跳转），可以考虑引入像PDF.js这样的JavaScript库，它能在客户端渲染PDF，提供更强大的控制能力。不过，PDF.js的包体较大，加载可能需要一些时间。</p><p><strong>纯文本 (Text):</strong> <code>.txt</code>, <code>.log</code>, <code>.csv</code>等纯文本文件，可以直接用<code>FileReader.readAsText()</code>读取内容，然后显示在<code><pre></code>标签中，以保留格式。需要注意的是编码问题，如果文件编码不是UTF-8，可能会出现乱码，这时需要在<code>readAsText</code>时指定正确的编码。</p><p><strong>音频/视频 (Audio/Video):</strong> HTML5的<code><audio></code>和<code><video></code>标签是专门为此设计的。只要浏览器支持对应的媒体格式（MP3, MP4, WebM等），直接将文件的URL赋给<code>src</code>属性即可。</p><pre class="brush:html;toolbar:false;"><video src="path/to/your/video.mp4" controls width="400"></video> <audio src="path/to/your/audio.mp3" controls></audio></pre><p>挑战在于不同浏览器对媒体格式的支持不一，以及流媒体的优化（如HLS, DASH）以提供更好的播放体验，这通常需要服务器端的配合。</p><p><strong>Office文档 (Word, Excel, PowerPoint):</strong> 这是最头疼的一类。浏览器无法直接解析<code>.docx</code>, <code>.xlsx</code>, <code>.pptx</code>这类专有二进制格式。常见的解决方案有：</p><ul><li><strong>在线预览服务:</strong> 利用第三方云服务提供的预览API，如微软的Office Online Viewer、Google Docs Viewer。你需要将文件上传到这些服务，然后它们会返回一个可嵌入的预览URL。这种方式依赖外部服务，有数据隐私和服务稳定性的考量。</li><li><strong>服务器端转换:</strong> 将Office文档在服务器端转换为HTML、PDF或图片。这需要服务器安装相应的转换工具（如LibreOffice, Aspose.Words等库），然后前端再预览转换后的文件。这种方式对服务器资源消耗较大，但能提供完全的控制权。</li><li><strong>WebAssembly/JavaScript库:</strong> 极少数情况下，会有一些复杂的JavaScript库（如OnlyOffice Document Server的Web端组件）尝试在客户端进行解析渲染，但通常非常庞大和复杂，且性能要求高。</li></ul><p><strong>其他复杂文件类型 (CAD, ZIP, RAR等):</strong> 对于CAD图纸、压缩包等，浏览器同样无能为力。通常的做法是：</p><ul><li><strong>下载:</strong> 提供下载链接，让用户在本地使用专业软件打开。</li><li><strong>专业服务/插件:</strong> 对于CAD等，可能需要集成特定的Web-based CAD Viewer SDK或浏览器插件。</li><li><strong>服务器端解压/解析:</strong> 对于压缩包，可以在服务器端解压，然后列出文件列表，再针对内部文件进行预览或下载。</li></ul><p>总的来说，文件预览是一个根据文件类型、来源和所需交互程度来选择不同技术方案的实践。从最简单的<code><iframe></code>到复杂的JavaScript API，再到依赖服务器端转换或第三方服务，每种方案都有其适用场景和局限性。在做技术选型时，我个人会优先考虑浏览器原生支持的能力，然后才是JavaScript客户端处理，最后才是服务器端转换或第三方服务，因为每往后一步，复杂度和维护成本都会显著增加。</p><p>今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~</p> </div> <div class="labsList"> <a href="javascript:;" title="JavaScript">JavaScript</a> <a href="javascript:;" title="FileReader">FileReader</a> <a href="javascript:;" title="URL.createObjectURL">URL.createObjectURL</a> <a href="javascript:;" title="MIME类型">MIME类型</a> <a href="javascript:;" title="HTML文件预览">HTML文件预览</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/280293.html" title="AI生成合规证件照技巧全解析" class="img_box"> <img src="/uploads/20250808/17546516136895dbdd17172.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="AI生成合规证件照技巧全解析">AI生成合规证件照技巧全解析 </a> <dl> <dt class="lineOverflow"><a href="/article/280293.html" title="AI生成合规证件照技巧全解析" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">AI生成合规证件照技巧全解析</dd> </dl> </div> <div class="cateItem"> <a href="/article/280295.html" title="豆包大模型助力亲子活动，提升家庭互动质量" class="img_box"> <img src="/uploads/20250808/17546517286895dc5002514.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="豆包大模型助力亲子活动，提升家庭互动质量"> </a> <dl> <dt class="lineOverflow"><a href="/article/280295.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/280589.html" class="img_box" title="Next.jsAPI路由集成技巧分享"> <img src="/uploads/20250808/17546661286896149083979.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Next.jsAPI路由集成技巧分享"> </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/280589.html" class="aBlack" target="_blank" title="Next.jsAPI路由集成技巧分享">Next.jsAPI路由集成技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>419浏览</span> <span class="collectBtn user_collection" data-id="280589" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280588.html" class="img_box" title="JS实现工具提示效果常用方法有以下几种：1.使用HTMLtitle属性（简单但样式受限）<divtitle="这是一个工具提示">鼠标悬停查看</div>优点：简单易用缺点：样式不可控，仅支持文本2.使用CSS+HTML实现自定义提示框（无需JS）<style>.tooltip{position:relative;display:inline-block;cur"> <img src="/uploads/20250808/1754666073689614598e9f7.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS实现工具提示效果常用方法有以下几种：1.使用HTMLtitle属性（简单但样式受限）<divtitle="这是一个工具提示">鼠标悬停查看</div>优点：简单易用缺点：样式不可控，仅支持文本2.使用CSS+HTML实现自定义提示框（无需JS）<style>.tooltip{position:relative;display:inline-block;cur"> </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/280588.html" class="aBlack" target="_blank" title="JS实现工具提示效果常用方法有以下几种：1.使用HTMLtitle属性（简单但样式受限）<divtitle="这是一个工具提示">鼠标悬停查看</div>优点：简单易用缺点：样式不可控，仅支持文本2.使用CSS+HTML实现自定义提示框（无需JS）<style>.tooltip{position:relative;display:inline-block;cur">JS实现工具提示效果常用方法有以下几种：1.使用HTMLtitle属性（简单但样式受限）<divtitle="这是一个工具提示">鼠标悬停查看</div>优点：简单易用缺点：样式不可控，仅支持文本2.使用CSS+HTML实现自定义提示框（无需JS）<style>.tooltip{position:relative;display:inline-block;cur</a> </dt> <dd class="cont2"> <span><i class="view"></i>127浏览</span> <span class="collectBtn user_collection" data-id="280588" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280587.html" class="img_box" title="CSS表格斑马纹怎么实现"> <img src="/uploads/20250808/17546660136896141d88fc0.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> | 1小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280587.html" class="aBlack" target="_blank" title="CSS表格斑马纹怎么实现">CSS表格斑马纹怎么实现</a> </dt> <dd class="cont2"> <span><i class="view"></i>420浏览</span> <span class="collectBtn user_collection" data-id="280587" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280583.html" class="img_box" title="箭头函数是什么？怎么用？"> <img src="/uploads/20250808/175466581468961356ec96f.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> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280583.html" class="aBlack" target="_blank" title="箭头函数是什么？怎么用？">箭头函数是什么？怎么用？</a> </dt> <dd class="cont2"> <span><i class="view"></i>324浏览</span> <span class="collectBtn user_collection" data-id="280583" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280582.html" class="img_box" title="CSS:focus-within实现表单焦点高亮"> <img src="/uploads/20250808/17546657716896132be4a5c.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS:focus-within实现表单焦点高亮"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="用户体验">用户体验</a> <a href="javascript:;" class="aLightGray" title=":focus">:focus</a> <a href="javascript:;" class="aLightGray" title=":focus-within">:focus-within</a> <a href="javascript:;" class="aLightGray" title="表单高亮">表单高亮</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/280582.html" class="aBlack" target="_blank" title="CSS:focus-within实现表单焦点高亮">CSS:focus-within实现表单焦点高亮</a> </dt> <dd class="cont2"> <span><i class="view"></i>162浏览</span> <span class="collectBtn user_collection" data-id="280582" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280579.html" class="img_box" title="JavaScript闭包如何保存局部变量"> <img src="/uploads/20250808/17546656016896128156365.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="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> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280579.html" class="aBlack" target="_blank" title="JavaScript闭包如何保存局部变量">JavaScript闭包如何保存局部变量</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="280579" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280578.html" class="img_box" title="BOM全屏页面实现方法分享"> <img src="/uploads/20250808/17546655936896127960458.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="BOM全屏页面实现方法分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280578.html" class="aBlack" target="_blank" title="BOM全屏页面实现方法分享">BOM全屏页面实现方法分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>149浏览</span> <span class="collectBtn user_collection" data-id="280578" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280574.html" class="img_box" title="事件循环影响性能，优化从循环入手"> <img src="/uploads/20250808/175466535268961188baf20.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> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280574.html" class="aBlack" target="_blank" title="事件循环影响性能，优化从循环入手">事件循环影响性能，优化从循环入手</a> </dt> <dd class="cont2"> <span><i class="view"></i>344浏览</span> <span class="collectBtn user_collection" data-id="280574" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280573.html" class="img_box" title="JS发送POST请求的几种方式"> <img src="/uploads/20250808/175466528968961149b2b47.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS发送POST请求的几种方式"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280573.html" class="aBlack" target="_blank" title="JS发送POST请求的几种方式">JS发送POST请求的几种方式</a> </dt> <dd class="cont2"> <span><i class="view"></i>328浏览</span> <span class="collectBtn user_collection" data-id="280573" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280572.html" class="img_box" title="HTMLDOM是什么？如何操作DOM对象"> <img src="/uploads/20250808/1754665248689611208ca2e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTMLDOM是什么？如何操作DOM对象"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="虚拟DOM">虚拟DOM</a> <a href="javascript:;" class="aLightGray" title="DOM操作">DOM操作</a> <a href="javascript:;" class="aLightGray" title="DOM树">DOM树</a> <a href="javascript:;" class="aLightGray" title="HTMLDOM">HTMLDOM</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/280572.html" class="aBlack" target="_blank" title="HTMLDOM是什么？如何操作DOM对象">HTMLDOM是什么？如何操作DOM对象</a> </dt> <dd class="cont2"> <span><i class="view"></i>292浏览</span> <span class="collectBtn user_collection" data-id="280572" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280562.html" class="img_box" title="JS获取浏览器信息的技巧分享"> <img src="/uploads/20250808/175466486868960fa4d0956.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS获取浏览器信息的技巧分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280562.html" class="aBlack" target="_blank" title="JS获取浏览器信息的技巧分享">JS获取浏览器信息的技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>343浏览</span> <span class="collectBtn user_collection" data-id="280562" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/280560.html" class="img_box" title="Flex布局详解：justify-content对齐方式全解析"> <img src="/uploads/20250808/175466475968960f37e09fc.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Flex布局详解：justify-content对齐方式全解析"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/280560.html" class="aBlack" target="_blank" title="Flex布局详解：justify-content对齐方式全解析">Flex布局详解：justify-content对齐方式全解析</a> </dt> <dd class="cont2"> <span><i class="view"></i>363浏览</span> <span class="collectBtn user_collection" data-id="280560" 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">542次学习</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">511次学习</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">498次学习</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">484次学习</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/13035.html" target="_blank" title="千音漫语：智能声音创作助手，AI配音、音视频翻译一站搞定！" class="img_box"> <img src="/uploads/20250723/1753258213688098e5ef34b.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/13035.html" class="aBlack" target="_blank" title="千音漫语">千音漫语</a></dt> <dd class="cont1 lineTwoOverflow"> 千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com </dd> <dd class="cont2">127次使用</dd> </dl> </li> <li> <a href="/ai/13034.html" target="_blank" title="MiniWork：智能高效AI工具平台，一站式工作学习效率解决方案" class="img_box"> <img src="/uploads/20250716/17526246026876edda8c2a4.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MiniWork：智能高效AI工具平台，一站式工作学习效率解决方案" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13034.html" class="aBlack" target="_blank" title="MiniWork">MiniWork</a></dt> <dd class="cont1 lineTwoOverflow"> MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。 </dd> <dd class="cont2">124次使用</dd> </dl> </li> <li> <a href="/ai/13033.html" target="_blank" title="NoCode (nocode.cn)：零代码构建应用、网站、管理系统，降低开发门槛" class="img_box"> <img src="https://s0.wp.com/mshots/v1/nocode.cn?w=383&h=328" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="NoCode (nocode.cn)：零代码构建应用、网站、管理系统，降低开发门槛" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13033.html" class="aBlack" target="_blank" title="NoCode">NoCode</a></dt> <dd class="cont1 lineTwoOverflow"> NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。 </dd> <dd class="cont2">137次使用</dd> </dl> </li> <li> <a href="/ai/13032.html" target="_blank" title="达医智影：阿里巴巴达摩院医疗AI影像早筛平台，CT一扫多筛癌症急慢病" class="img_box"> <img src="/uploads/20250716/1752631805687709fd1f103.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="达医智影：阿里巴巴达摩院医疗AI影像早筛平台，CT一扫多筛癌症急慢病" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13032.html" class="aBlack" target="_blank" title="达医智影">达医智影</a></dt> <dd class="cont1 lineTwoOverflow"> 达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。 </dd> <dd class="cont2">134次使用</dd> </dl> </li> <li> <a href="/ai/13031.html" target="_blank" title="智慧芽Eureka：更懂技术创新的AI Agent平台，助力研发效率飞跃" class="img_box"> <img src="https://s0.wp.com/mshots/v1/eureka.zhihuiya.com?w=383&h=328" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="智慧芽Eureka：更懂技术创新的AI Agent平台，助力研发效率飞跃" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13031.html" class="aBlack" target="_blank" title="智慧芽Eureka">智慧芽Eureka</a></dt> <dd class="cont1 lineTwoOverflow"> 智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。 </dd> <dd class="cont2">135次使用</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/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> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/91359.html" class="aBlack" title="UI设计中为何选择绝对定位的智慧之道">UI设计中为何选择绝对定位的智慧之道</a></dt> <dd> <span class="left">2024-02-03</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 class="refreshBox"> <p>二维码失效</p> <button type="button" class="create_wxqrcode">刷新1111</button> </div> --> </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/280294.html"/> <input type="hidden" name="__token__" value="51a697871d6ff370ee3ec22655fd5208" /> <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/280294.html"/> <input type="hidden" name="__token__" value="51a697871d6ff370ee3ec22655fd5208" /> <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>
