首页 > 文章 > 前端

HTML文件预览实现方法详解

时间：2025-08-08 19:14:52 206浏览收藏

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 class="brush:html;toolbar:false;"> <iframe src="path/to/your/document.pdf" width="800" height="600" frameborder="0">

这种方式简单直接，对于浏览器原生支持的格式（如PDF、常见图片、纯文本、甚至HTML页面本身），效果通常不错。浏览器会尝试渲染src指向的文件。但它也有局限性，比如对于用户本地选择的文件，直接这样用就不行了，因为src需要一个可访问的URL。另外，如果服务器没有正确设置文件的MIME类型，或者设置了Content-Disposition: attachment，浏览器就可能直接下载而不是预览。

为什么直接在HTML中嵌入文件有时会失败或表现不符预期？

这个问题我深有体会，很多时候我们以为很简单地把文件路径扔给</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 class="brush:html;toolbar:false;"><input type="file" id="imageInput" accept="image/*"> <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;"><input type="file" id="fileInput"> <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:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="FileReader">FileReader</a> <a href="javascript:;" class="aLightGray" title="URL.createObjectURL">URL.createObjectURL</a> <a href="javascript:;" class="aLightGray" title="MIME类型">MIME类型</a> <a href="javascript:;" class="aLightGray" title="HTML文件预览">HTML文件预览</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>   |  1年前  |   <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>   |  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/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> <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年前  |   </div> <div class="tit lineOverflow"><a href="/article/91359.html" title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="91359" 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>   |  1分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280519.html" title="HTML5动画API详解与实战应用" class="aBlack">HTML5动画API详解与实战应用</a></div> <div class="opt"> <span><i class="view"></i>193</span> <span class="collectBtn user_collection" data-id="280519" 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>   |  3分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280517.html" title="事件循环微任务合并优化技巧" class="aBlack">事件循环微任务合并优化技巧</a></div> <div class="opt"> <span><i class="view"></i>149</span> <span class="collectBtn user_collection" data-id="280517" 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分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280511.html" title="JavaScript观察者模式全解析" class="aBlack">JavaScript观察者模式全解析</a></div> <div class="opt"> <span><i class="view"></i>170</span> <span class="collectBtn user_collection" data-id="280511" 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>   |  9分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280509.html" title="JS实现全屏功能的两种方法" class="aBlack">JS实现全屏功能的两种方法</a></div> <div class="opt"> <span><i class="view"></i>388</span> <span class="collectBtn user_collection" data-id="280509" 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>   |  11分钟前  |   <a href="javascript:;" class="aLightGray" title="百分比">百分比</a> <a href="javascript:;" class="aLightGray" title="object-fit">object-fit</a> <a href="javascript:;" class="aLightGray" title="border-radius">border-radius</a> <a href="javascript:;" class="aLightGray" title="clip-path">clip-path</a> <a href="javascript:;" class="aLightGray" title="图片椭圆边框">图片椭圆边框</a> </div> <div class="tit lineOverflow"><a href="/article/280507.html" title="CSS图片椭圆边框怎么实现" class="aBlack">CSS图片椭圆边框怎么实现</a></div> <div class="opt"> <span><i class="view"></i>185</span> <span class="collectBtn user_collection" data-id="280507" 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>   |  13分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280505.html" title="JS获取原型链所有属性名方法" class="aBlack">JS获取原型链所有属性名方法</a></div> <div class="opt"> <span><i class="view"></i>125</span> <span class="collectBtn user_collection" data-id="280505" 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/280497.html" title="JavaScript数组splice删除元素全解析" class="aBlack">JavaScript数组splice删除元素全解析</a></div> <div class="opt"> <span><i class="view"></i>483</span> <span class="collectBtn user_collection" data-id="280497" 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>   |  21分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280495.html" title="JS剪切功能实现方法全解析" class="aBlack">JS剪切功能实现方法全解析</a></div> <div class="opt"> <span><i class="view"></i>469</span> <span class="collectBtn user_collection" data-id="280495" 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>   |  22分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280494.html" title="MongoDB$lookup添加localField方法详解" class="aBlack">MongoDB$lookup添加localField方法详解</a></div> <div class="opt"> <span><i class="view"></i>150</span> <span class="collectBtn user_collection" data-id="280494" 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>   |  22分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280493.html" title="CSS媒体查询：实现跨设备响应式设计" class="aBlack">CSS媒体查询：实现跨设备响应式设计</a></div> <div class="opt"> <span><i class="view"></i>276</span> <span class="collectBtn user_collection" data-id="280493" 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>   |  23分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280492.html" title="HTML按钮样式设置与美化技巧" class="aBlack">HTML按钮样式设置与美化技巧</a></div> <div class="opt"> <span><i class="view"></i>438</span> <span class="collectBtn user_collection" data-id="280492" 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>   |  27分钟前  |   </div> <div class="tit lineOverflow"><a href="/article/280488.html" title="自定义HTML列表样式技巧分享" class="aBlack">自定义HTML列表样式技巧分享</a></div> <div class="opt"> <span><i class="view"></i>183</span> <span class="collectBtn user_collection" data-id="280488" 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>542次学习</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>511次学习</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>498次学习</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>484次学习</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>