当前位置：首页 > 文章列表 > 文章 > 前端 > HTML视频嵌入三种方法全解析
编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《HTML视频嵌入的3种方法详解》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。
推荐使用HTML5的标签嵌入视频，因为它无需插件、兼容性好且提供强大控制功能；2. 对于YouTube或Bilibili等平台视频，应使用其提供的嵌入代码，以便直接调用平台播放器；3. 解决兼容性问题需提供MP4和WebM双格式源文件，优化性能可设置preload="none"、使用poster预览图，并通过CSS实现响应式布局，同时谨慎使用autoplay并添加muted属性以提升用户体验，最终确保视频在各类设备和浏览器中稳定播放且具备良好可访问性。</p><p><img src="/uploads/20250801/1754053689688cbc39c1d5a.png" alt="怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式"></p><p>在HTML中嵌入视频主要有三种方式，最核心和现代的方法是使用HTML5的<code><video></code>标签，它能直接在浏览器中播放视频而无需插件。此外，对于YouTube、Bilibili等第三方视频平台，通常会使用<code><iframe></code>标签来嵌入它们提供的播放器。还有一些老旧或特定场景下可能会用到的<code><embed></code>或<code><object></code>标签，但它们现在已经很少被推荐了。</p><img src="/uploads/20250801/1754053689688cbc39c3778.png" alt="怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式"><h3>解决方案</h3><p>要将视频嵌入网页，我个人最推荐且最常用的就是HTML5的<code><video></code>标签。它功能强大，兼容性好，而且给了开发者很大的控制权。</p><p>一个基本的<code><video></code>标签用法是这样的：</p><img src="/uploads/20250801/1754053689688cbc39c4f0d.png" alt="怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式"><pre><video controls width="640" style="max-width:100%" poster="your-video-poster.jpg"> <source src="your-video.mp4" type="video/mp4"> <source src="your-video.webm" type="video/webm"> <p>您的浏览器不支持HTML5视频播放。</p> </video></pre><p>这里面有几个关键点：</p><ul><li><code>controls</code> 属性：加上它，用户就能看到播放、暂停、音量调节、全屏等控制按钮。如果没有这个，视频会播放但用户无法操作，体验会很糟糕。</li><li><code>width</code> 和 <code>height</code>：定义视频播放器的尺寸。当然，你也可以用CSS来控制，甚至让它响应式。</li><li><code>poster</code>：在视频加载完成或播放前，显示一张预览图。这对于用户体验来说非常重要，能让他们对视频内容有个初步了解。</li><li><code><source></code> 标签：这是处理视频格式兼容性的关键。不同的浏览器对视频格式的支持程度不一样（比如Safari偏爱MP4，Firefox和Chrome对WebM支持很好）。所以，提供多种格式的视频源，浏览器会选择它支持的第一个来播放。这就像给浏览器一个备选清单，总能找到一个合适的。</li><li><code><p></code> 标签里的内容：这是当浏览器完全不支持<code><video></code>标签时的备用内容，虽然现在很少见，但总归是个好习惯。</li></ul><p>除了这些，还有一些常用的属性，比如<code>autoplay</code>（自动播放，但现在很多浏览器会限制，除非视频静音），<code>loop</code>（循环播放），<code>muted</code>（静音播放）。我个人建议，如果非要自动播放，请务必加上<code>muted</code>，不然突然的声响会吓到用户，体验极差。</p><img src="/uploads/20250801/1754053689688cbc39c663e.png" alt="怎样在HTML中嵌入视频？ HTML视频嵌入的3种方式"><h3>为什么推荐使用HTML5的<code><video></code>标签？</h3><p>说实话，用HTML5的<code><video></code>标签来嵌入视频，对我来说简直是福音。想想以前Flash时代，为了在网页上播个视频，得装插件、考虑兼容性，各种头疼。现在，<code><video></code>标签直接原生支持，这意味着用户不需要安装任何额外的软件，视频就能流畅播放。这不仅仅是方便，更是大大提升了用户体验。</p><p>它最大的优势在于其“无插件”特性。浏览器直接解析和渲染视频，这不仅让加载速度更快，也减少了潜在的安全风险。而且，它对移动设备的支持简直是太友好了。在手机和平板上，HTML5视频能自动适应屏幕大小，触控操作也更自然，这在响应式设计越来越重要的今天，简直是标配。</p><p>另外，<code><video></code>标签还提供了丰富的API接口，允许开发者用JavaScript来控制视频的播放、暂停、音量、进度等，甚至可以自定义播放器界面。这种灵活性是老旧方法望尘莫及的。从可访问性角度看，它也支持<code><track></code>标签来添加字幕或描述音轨，这对于有听力或视力障碍的用户来说，是非常重要的功能。综合来看，无论从性能、兼容性、用户体验还是开发灵活性上，HTML5的<code><video></code>标签都是当之无愧的首选。</p><h3>如何嵌入来自YouTube或Bilibili的视频？</h3><p>当我们想嵌入YouTube或Bilibili这类第三方平台的视频时，情况就有点不一样了。我们通常不会直接下载他们的视频文件然后用<code><video></code>标签播放（这也不符合版权规定）。这些平台会提供一个“嵌入代码”，而这个代码的核心就是<code><iframe></code>标签。</p><p><code><iframe></code>，说白了，就是在你的网页里开辟一个独立的“窗口”，这个窗口里加载的是另一个网页的内容。对于视频平台来说，这个“另一个网页”就是他们的视频播放器页面。</p><p>比如，在YouTube上，你找到一个视频，点击“分享”->“嵌入”，它会给你一段类似这样的代码：</p><pre><iframe width="560" style="max-width:100%" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></pre><p>Bilibili也类似，在视频播放页下方找到“分享”->“嵌入代码”：</p><pre><iframe src="//player.bilibili.com/player.html?aid=XXXXXX&bvid=XXXXXX&cid=XXXXXX&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></pre><p>这里面几个重要的属性：</p><ul><li><code>src</code>：这是最重要的，它指向视频播放器的URL。</li><li><code>width</code> 和 <code>height</code>：定义播放器的尺寸。</li><li><code>frameborder="0"</code>：通常用来移除<code><iframe></code>默认的边框，让播放器看起来更融合。</li><li><code>allowfullscreen</code>：允许用户将视频全屏播放。</li><li><code>allow</code>：这是一个比较新的属性，用来控制<code><iframe></code>内部允许执行哪些特性，比如<code>autoplay</code>（自动播放）、<code>picture-in-picture</code>（画中画）等。</li></ul><p>使用<code><iframe></code>嵌入外部视频的好处是显而易见的：你不需要关心视频的托管、格式转换、播放器开发等复杂问题，一切都由第三方平台搞定。但也有它的局限性，比如你对播放器的样式和功能控制就非常有限，而且加载外部内容可能会有性能和安全上的考量。我个人在使用时，会特别注意<code><iframe></code>的尺寸设置，确保它在不同设备上也能良好显示，可能需要配合CSS做一些响应式处理。</p><h3>视频嵌入时有哪些常见的兼容性问题和优化技巧？</h3><p>在实际操作中，视频嵌入并非总是那么一帆风顺，总会遇到一些兼容性问题和需要优化的地方。</p><p>首先，<strong>视频格式的兼容性</strong>是老生常谈的问题。尽管MP4（H.264编码）现在是主流，几乎所有浏览器都支持，但为了最大限度地覆盖用户，我通常还是会提供WebM格式作为备选。WebM通常有更好的压缩效率，而且是开放标准。我的经验是，使用<code><source></code>标签提供多个格式，这几乎能解决99%的格式兼容性问题。</p><pre><video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> 您的浏览器不支持视频播放。 </video></pre><p>其次是<strong>性能优化</strong>。视频文件通常很大，直接加载会拖慢网页速度。</p><ul><li><code>preload</code> 属性就显得尤为重要：<ul><li><code>none</code>：不预加载任何数据，只在用户点击播放时才开始下载。这是我个人最推荐的设置，尤其对于非核心内容。</li><li><code>metadata</code>：只预加载视频的元数据（如时长、尺寸等），不会下载视频内容。</li><li><code>auto</code>：浏览器自行决定是否预加载整个视频。除非视频是页面的核心内容，否则我很少用这个。</li></ul></li><li><code>poster</code> 属性：前面提过，它能显示一张预览图。这张图应该尽可能小，但质量要够用，避免加载大图导致页面卡顿。</li><li><strong>响应式设计</strong>：视频在移动设备上经常会超出屏幕。最简单的CSS解决方案是让视频元素或其容器<code>max-width: 100%; height: auto;</code>。如果需要保持特定的宽高比（比如16:9），可以利用<code>padding-bottom</code>结合<code>position: relative/absolute</code>的技巧，这能让视频在不同屏幕尺寸下保持正确的比例。</li></ul><pre>.video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */ height: 0; overflow: hidden; } .video-container video, .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</pre><p>最后，<strong>用户体验和可访问性</strong>。</p><ul><li><code>autoplay</code> 的使用要非常谨慎，现代浏览器大多会限制自动播放，除非视频是静音的。如果一定要自动播放，加上<code>muted</code>属性是基本礼仪。</li><li><code>loop</code> 属性：循环播放，适用于背景视频或短片段。</li><li>字幕和描述：使用<code><track></code>标签为视频添加字幕（<code>kind="subtitles"</code>）、标题（<code>kind="captions"</code>）或描述（<code>kind="descriptions"</code>）。这不仅对听障用户有帮助，也能提升SEO。</li></ul><pre><video controls src="video.mp4"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"> <track kind="subtitles" src="subtitles_zh.vtt" srclang="zh" label="中文"> </video></pre><p>这些细节看似琐碎，但它们共同构成了用户友好的视频播放体验，并且能有效避免一些常见的坑。</p><p>今天关于《HTML视频嵌入三种方法全解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于兼容性,性能优化,<iframe>,HTML5视频,<video>标签的内容请关注golang学习网公众号！</p> </div> <div class="labsList"> <a href="javascript:;" title="兼容性">兼容性</a> <a href="javascript:;" title="性能优化">性能优化</a> <a href="javascript:;" title="<iframe>"><iframe></a> <a href="javascript:;" title="HTML5视频">HTML5视频</a> <a href="javascript:;" title="<video>标签"><video>标签</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/272114.html" title="Golangexpvar指标暴露与Prometheus集成方案" class="img_box"> <img src="/uploads/20250801/1754053662688cbc1e32eab.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Golangexpvar指标暴露与Prometheus集成方案">Golangexpvar指标暴露与Prometheus集成方案 </a> <dl> <dt class="lineOverflow"><a href="/article/272114.html" title="Golangexpvar指标暴露与Prometheus集成方案" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">Golangexpvar指标暴露与Prometheus集成方案</dd> </dl> </div> <div class="cateItem"> <a href="/article/272116.html" title="Go语言：快速哈希对象技巧" class="img_box"> <img src="/uploads/20250801/1754053768688cbc88906cc.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Go语言：快速哈希对象技巧"> </a> <dl> <dt class="lineOverflow"><a href="/article/272116.html" class="aBlack" title="Go语言：快速哈希对象技巧">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Go语言：快速哈希对象技巧</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/310302.html" class="img_box" title="JS缓存接口数据的几种方法"> <img src="/uploads/20250909/175742079568c01cfbcbd04.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/310302.html" class="aBlack" target="_blank" title="JS缓存接口数据的几种方法">JS缓存接口数据的几种方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>434浏览</span> <span class="collectBtn user_collection" data-id="310302" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310292.html" class="img_box" title="HTML滑动侧边栏实现方法详解"> <img src="/uploads/20250909/175741995068c019ae59956.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML滑动侧边栏实现方法详解"> </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> | 16分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310292.html" class="aBlack" target="_blank" title="HTML滑动侧边栏实现方法详解">HTML滑动侧边栏实现方法详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>143浏览</span> <span class="collectBtn user_collection" data-id="310292" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310280.html" class="img_box" title="Jest测试中AWS凭证管理技巧"> <img src="/uploads/20250909/175741860768c0146f3163d.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Jest测试中AWS凭证管理技巧"> </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> | 38分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310280.html" class="aBlack" target="_blank" title="Jest测试中AWS凭证管理技巧">Jest测试中AWS凭证管理技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>128浏览</span> <span class="collectBtn user_collection" data-id="310280" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310276.html" class="img_box" title="HTML滑块控件使用教程及样式优化"> <img src="/uploads/20250909/175741835468c01372ad2bf.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML滑块控件使用教程及样式优化"> </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> | 43分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310276.html" class="aBlack" target="_blank" title="HTML滑块控件使用教程及样式优化">HTML滑块控件使用教程及样式优化</a> </dt> <dd class="cont2"> <span><i class="view"></i>428浏览</span> <span class="collectBtn user_collection" data-id="310276" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310270.html" class="img_box" title="async/await如何影响事件循环？"> <img src="/uploads/20250909/175741789368c011a5e7732.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="async/await如何影响事件循环？"> </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> | 50分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310270.html" class="aBlack" target="_blank" title="async/await如何影响事件循环？">async/await如何影响事件循环？</a> </dt> <dd class="cont2"> <span><i class="view"></i>200浏览</span> <span class="collectBtn user_collection" data-id="310270" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310269.html" class="img_box" title="网页元素变形解决方法及响应式教程"> <img src="/uploads/20250909/175741782568c01161633ab.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> | 51分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310269.html" class="aBlack" target="_blank" title="网页元素变形解决方法及响应式教程">网页元素变形解决方法及响应式教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>363浏览</span> <span class="collectBtn user_collection" data-id="310269" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310267.html" class="img_box" title="JS本地存储与会话存储操作详解"> <img src="/uploads/20250909/175741776768c011277a6af.png" 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> | 52分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310267.html" class="aBlack" target="_blank" title="JS本地存储与会话存储操作详解">JS本地存储与会话存储操作详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>239浏览</span> <span class="collectBtn user_collection" data-id="310267" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310265.html" class="img_box" title="HTML表单跨域提交与CORS解决方法"> <img src="/uploads/20250909/175741750368c0101f19ca0.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML表单跨域提交与CORS解决方法"> </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> | 57分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/310265.html" class="aBlack" target="_blank" title="HTML表单跨域提交与CORS解决方法">HTML表单跨域提交与CORS解决方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>189浏览</span> <span class="collectBtn user_collection" data-id="310265" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310260.html" class="img_box" title="纯CSS实现数据图表技巧解析"> <img src="/uploads/20250909/175741706368c00e6784a22.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/310260.html" class="aBlack" target="_blank" title="纯CSS实现数据图表技巧解析">纯CSS实现数据图表技巧解析</a> </dt> <dd class="cont2"> <span><i class="view"></i>160浏览</span> <span class="collectBtn user_collection" data-id="310260" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310252.html" class="img_box" title="FontAwesome图标切换失败解决方法"> <img src="/uploads/20250909/175741628568c00b5da4cde.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="FontAwesome图标切换失败解决方法"> </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/310252.html" class="aBlack" target="_blank" title="FontAwesome图标切换失败解决方法">FontAwesome图标切换失败解决方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>270浏览</span> <span class="collectBtn user_collection" data-id="310252" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310250.html" class="img_box" title="Kerberos表单认证怎么用？网络协议集成教程"> <img src="/uploads/20250909/175741591768c009ed83a4a.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="Kerberos表单认证怎么用？网络协议集成教程"> </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/310250.html" class="aBlack" target="_blank" title="Kerberos表单认证怎么用？网络协议集成教程">Kerberos表单认证怎么用？网络协议集成教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>204浏览</span> <span class="collectBtn user_collection" data-id="310250" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/310247.html" class="img_box" title="HTML语义化：元素作用与使用技巧"> <img src="/uploads/20250909/175741565068c008e24d72b.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML语义化：元素作用与使用技巧"> </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/310247.html" class="aBlack" target="_blank" title="HTML语义化：元素作用与使用技巧">HTML语义化：元素作用与使用技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>232浏览</span> <span class="collectBtn user_collection" data-id="310247" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight"> <!-- 右侧广告位banner --> <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">514次学习</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">499次学习</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/13073.html" target="_blank" title="SEO AI Mermaid 流程图：自然语言生成，文本驱动可视化创作" class="img_box"> <img src="/uploads/20250909/175739760268bfc262225d4.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="SEO AI Mermaid 流程图：自然语言生成，文本驱动可视化创作" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13073.html" class="aBlack" target="_blank" title="AI Mermaid流程图">AI Mermaid流程图</a></dt> <dd class="cont1 lineTwoOverflow"> SEO AI Mermaid 流程图工具：基于 Mermaid 语法，AI 辅助，自然语言生成流程图，提升可视化创作效率，适用于开发者、产品经理、教育工作者。 </dd> <dd class="cont2">27次使用</dd> </dl> </li> <li> <a href="/ai/13071.html" target="_blank" title="iTerms：一站式法律AI工作台，智能合同审查起草与法律问答专家" class="img_box"> <img src="/uploads/20250909/175738226468bf86788705c.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="iTerms：一站式法律AI工作台，智能合同审查起草与法律问答专家" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13071.html" class="aBlack" target="_blank" title="iTerms">iTerms</a></dt> <dd class="cont1 lineTwoOverflow"> iTerms是一款专业的一站式法律AI工作台，提供AI合同审查、AI合同起草及AI法律问答服务。通过智能问答、深度思考与联网检索，助您高效检索法律法规与司法判例，告别传统模板，实现合同一键起草与在线编辑，大幅提升法律事务处理效率。 </dd> <dd class="cont2">35次使用</dd> </dl> </li> <li> <a href="/ai/13069.html" target="_blank" title="迅捷AIPPT：AI智能PPT生成器，高效制作专业演示文稿" class="img_box"> <img src="/uploads/20250909/175739880268bfc71211053.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="迅捷AIPPT：AI智能PPT生成器，高效制作专业演示文稿" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13069.html" class="aBlack" target="_blank" title="迅捷AIPPT">迅捷AIPPT</a></dt> <dd class="cont1 lineTwoOverflow"> 迅捷AIPPT是一款高效AI智能PPT生成软件，一键智能生成精美演示文稿。内置海量专业模板、多样风格，支持自定义大纲，助您轻松制作高质量PPT，大幅节省时间。 </dd> <dd class="cont2">22次使用</dd> </dl> </li> <li> <a href="/ai/13068.html" target="_blank" title="迅捷AI写作软件：AI智能创作专家，赋能高效文本处理" class="img_box"> <img src="/uploads/20250909/175741920168c016c1c9f75.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/13068.html" class="aBlack" target="_blank" title="迅捷AI写作">迅捷AI写作</a></dt> <dd class="cont1 lineTwoOverflow"> 迅捷AI写作，您的智能AI写作助手！快速生成各类文稿，涵盖新媒体、工作汇报。更兼具文字识别、语音转换、格式转换等实用功能，一站式解决文本处理难题，显著提升工作效率。 </dd> <dd class="cont2">5次使用</dd> </dl> </li> <li> <a href="/ai/13067.html" target="_blank" title="小图钉Excel：AI大模型智能助手，自然语言对话，本地文件安全高效处理" class="img_box"> <img src="/uploads/20250909/175742040268c01b72c2826.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="小图钉Excel：AI大模型智能助手，自然语言对话，本地文件安全高效处理" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13067.html" class="aBlack" target="_blank" title="小图钉Excel">小图钉Excel</a></dt> <dd class="cont1 lineTwoOverflow"> 小图钉Excel：AI大模型驱动的智能助手，通过自然语言对话，自动解决Excel复杂操作，如写函数、整理格式。支持本地文件修改，数据严格保密，助您告别Excel烦恼，高效提升工作效率。 </dd> <dd class="cont2">1次使用</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/272115.html"/> <input type="hidden" name="__token__" value="4905652db593bce92936fe3e46cc6332" /> <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/272115.html"/> <input type="hidden" name="__token__" value="4905652db593bce92936fe3e46cc6332" /> <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>
