当前位置：首页 > 文章列表 > 文章 > 前端 > HTML媒体嵌入教程：代码与应用详解
今天golang学习网给大家带来了《HTML媒体嵌入教程：结构与实战详解》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~
答案：HTML5通过、和标签嵌入媒体，支持多种格式兼容、外部内容嵌入及性能优化。使用<source>可解决浏览器格式差异，<iframe>嵌入YouTube等外部视频需注意安全与响应式设计，结合JavaScript可自定义播放器，配合preload、loading="lazy"等属性提升加载效率与用户体验。</p></blockquote><p><img src="/uploads/20251022/176109660968f833a19553d.png" alt="HTML文档媒体怎么嵌入_HTML媒体嵌入结构教程"></p><p>HTML文档中嵌入媒体，核心在于利用HTML5提供的语义化标签，如<code><audio></code>用于音频，<code><video></code>用于视频，以及<code><iframe></code>用于嵌入外部内容（比如来自YouTube的视频或地图）。这些标签让浏览器能够原生处理多媒体内容，无需依赖过时的插件，极大地提升了用户体验和开发效率。说白了，就是用一套标准化的“盒子”把各种媒体装进网页里。</p><h3>解决方案</h3><p>要将媒体嵌入HTML，我们主要围绕<code><audio></code>、<code><video></code>和<code><iframe></code>这几个核心标签展开。它们各自有其独特的属性，能够精细控制媒体的播放行为和显示方式。</p><p>对于<strong>音频文件</strong>，我们使用<code><audio></code>标签。最基础的用法就是指定<code>src</code>属性指向音频文件路径，再配上<code>controls</code>属性，浏览器就会自动提供播放、暂停、音量调节等标准控件。</p><pre><audio src="path/to/your/audio.mp3" controls> 您的浏览器不支持音频播放。 </audio></pre><p>而<strong>视频文件</strong>则使用<code><video></code>标签，原理和<code><audio></code>类似，但多了<code>width</code>、<code>height</code>来控制尺寸，以及<code>poster</code>属性来指定视频加载前的封面图片。</p><pre><video src="path/to/your/video.mp4" controls width="640" height="360" poster="path/to/your/poster.jpg"> 您的浏览器不支持视频播放。 </video></pre><p>值得一提的是，<code><audio></code>和<code><video></code>标签内部可以嵌套<code><source></code>标签。这玩意儿可太重要了，它允许你提供多种格式的媒体文件，浏览器会根据自身支持情况，选择第一个能播放的源。这完美解决了不同浏览器对媒体格式支持不一的问题。</p><pre><video controls width="640" height="360" poster="path/to/your/poster.jpg"> <source src="path/to/your/video.mp4" type="video/mp4"> <source src="path/to/your/video.webm" type="video/webm"> <source src="path/to/your/video.ogg" type="video/ogg"> 您的浏览器不支持视频播放。请尝试更新您的浏览器。 </video></pre><p>至于<strong>嵌入外部内容</strong>，比如YouTube上的视频、Google地图或者其他网页，<code><iframe></code>标签就是你的不二之选。它相当于在你的网页里开了一个“窗口”，显示另一个网页的内容。</p><pre><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe></pre><p>这里<code>frameborder="0"</code>是移除边框，<code>allow</code>属性则赋予了嵌入内容一些特定的权限，比如全屏、自动播放等，这在安全和功能性上都是需要注意的。</p><h3>为什么我的视频或音频在某些浏览器里无法播放？——理解HTML媒体格式兼容性与<code><source></code>标签的妙用</h3><p>这其实是个挺有意思的现象，也是前端开发者经常会遇到的一个“坑”。你可能在Chrome里播放得好好的视频，换到Safari或者Firefox里就“罢工”了。这背后隐藏着一个浏览器对媒体编码格式支持度的老大难问题。</p><p>说白了，不同的浏览器厂商，出于各种原因（包括专利、技术偏好、开源社区标准等），对视频和音频的编解码器支持情况并不完全一致。比如，H.264（通常封装在MP4里）是主流，但WebM（VP8/VP9视频编码，Opus/Vorbis音频编码）在开源社区里也很受欢迎，Ogg（Theora视频编码，Vorbis音频编码）也有其一席之地。音频方面，MP3、AAC、WAV、Ogg Vorbis也各有拥趸。</p><p>所以，如果你的<code><video></code>或<code><audio></code>标签只提供了一个<code>src</code>，而这个<code>src</code>指向的媒体格式恰好不被当前浏览器支持，那它就只能干瞪眼了。用户看到的就是一个空白的播放器或者一段提示文字。</p><p>为了解决这个兼容性难题，HTML5引入了<code><source></code>标签，这简直是神来之笔。它的作用就是让你可以为同一个媒体内容提供多个不同的格式版本。当浏览器解析到<code><video></code>或<code><audio></code>标签时，它会从上到下逐个检查<code><source></code>标签，一旦找到它自己支持的格式，就会立即加载并播放这个源，而忽略后面的<code><source></code>。如果所有的<code><source></code>都不支持，它才会显示<code><video></code>或<code><audio></code>标签内部的备用内容。</p><p>我个人觉得，这种设计非常优雅，它把兼容性的复杂性从开发者转移到了浏览器本身，开发者只需要准备好不同格式的文件，然后按优先级排列好就行。</p><p>举个例子：</p><pre><audio controls> <source src="my-audio.mp3" type="audio/mpeg"> <!-- 优先尝试MP3 --> <source src="my-audio.ogg" type="audio/ogg"> <!-- 如果不支持MP3，尝试Ogg --> <p>您的浏览器不支持音频播放。</p> <!-- 都不能播，显示这段文字 --> </audio> <video controls width="640" height="360" poster="poster.jpg"> <source src="my-video.mp4" type="video/mp4"> <!-- 优先尝试MP4 (H.264) --> <source src="my-video.webm" type="video/webm"> <!-- 如果不支持MP4，尝试WebM (VP8/VP9) --> <p>您的浏览器不支持视频播放。</p> </video></pre><p>这里的<code>type</code>属性也非常关键，它告诉浏览器这个<code>source</code>标签指向的媒体文件是什么类型（MIME Type），浏览器可以根据这个信息提前判断是否支持，避免不必要的下载。这样一来，你的媒体内容就能在绝大多数现代浏览器上“畅通无阻”了。</p><h3>除了本地文件，如何高效地嵌入YouTube或Bilibili上的视频？——<code><iframe></code>的深度应用与安全考量</h3><p>当我们谈到嵌入视频，尤其是来自YouTube、Bilibili这类大型视频平台的视频时，直接上传到自己的服务器显然不是最经济高效的方式。这些平台有专业的CDN（内容分发网络），能保证视频加载速度和播放流畅度，而且还提供了强大的播放器功能和社交互动。这时候，<code><iframe></code>就成了我们的“救星”。</p><p><code><iframe></code>标签允许你在当前HTML文档中嵌入另一个HTML文档。对于视频平台而言，它们通常会提供一段现成的<code><iframe></code>代码，你只需要复制粘贴到你的网页里就行。</p><p>比如，在YouTube上，点击视频下方的“分享”按钮，然后选择“嵌入”，你就能得到一段类似这样的代码：</p><pre><iframe width="560" height="315" src="https://www.youtube.com/embed/your_video_id?controls=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe></pre><p>Bilibili也类似，在视频播放页点击“分享”图标，选择“嵌入代码”，同样会得到<code><iframe></code>：</p><pre><iframe src="//player.bilibili.com/player.html?aid=xxxxxxxx&bvid=xxxxxxxx&cid=xxxxxxxx&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></pre><p>这些<code><iframe></code>代码通常已经包含了平台推荐的各种参数和属性。</p><p><strong>深度应用方面：</strong></p><ul><li><strong>URL参数控制：</strong> 观察<code>src</code>属性，你会发现URL后面跟着一串问号开头的参数（<code>?controls=0&autoplay=1</code>）。这些是视频平台提供的API，用于控制播放器的行为，比如是否显示播放控件、是否自动播放、是否循环播放等等。熟练掌握这些参数，可以让你更好地定制嵌入视频的体验。</li><li><strong>响应式设计：</strong> 直接设置<code>width</code>和<code>height</code>通常是固定尺寸。为了让嵌入视频在不同设备上都能良好显示，我们通常会结合CSS来做响应式处理。一个常见的技巧是使用一个父容器，并设置<code>padding-bottom</code>来保持宽高比，然后将<code><iframe></code>设置为绝对定位并充满容器。</li></ul><pre>.video-container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 宽高比 (9 / 16 * 100%) */ height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</pre><pre><div class="video-container"> <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe> </div></pre><p><strong>安全考量：</strong></p><p><code><iframe></code>虽然方便，但它本质上是在你的页面里加载了别人的内容，这自然会带来一些安全风险。</p><ul><li><strong>跨站脚本攻击 (XSS)：</strong> 如果你嵌入的页面不安全，它可能会尝试执行恶意脚本，窃取用户数据。</li><li><strong>点击劫持 (Clickjacking)：</strong> 恶意网站可能通过透明的<code><iframe></code>覆盖你的页面，诱导用户点击。</li><li><strong>性能影响：</strong> 嵌入过多<code><iframe></code>或者<code><iframe></code>加载的内容过大，会显著拖慢你的页面加载速度。</li></ul><p>为了应对这些风险，HTML5提供了<code>sandbox</code>属性。当你给<code><iframe></code>加上<code>sandbox</code>属性时，它会启用一系列限制，比如禁止脚本执行、禁止表单提交、禁止弹出窗口等，大大增强了安全性。你可以通过指定值来放宽某些限制，例如<code>sandbox="allow-scripts allow-same-origin"</code>。</p><pre><iframe src="https://untrusted-source.com/some-content.html" sandbox width="500" height="300"></iframe></pre><p>另外，对于外部视频平台，它们通常会通过<code>X-Frame-Options</code>或<code>Content-Security-Policy</code>HTTP头来控制是否允许被<code><iframe></code>嵌入，以及哪些域名可以嵌入。所以，很多时候你不需要太担心，因为平台本身就做了防护。但如果你要嵌入的是一些非主流或者你不太信任的网站内容，<code>sandbox</code>属性就显得尤为重要了。</p><h3>提升用户体验：媒体播放器的自定义控制、自动播放与性能优化策略</h3><p>用户体验是王道，媒体播放也不例外。一个好的媒体体验，不仅仅是能播放，还得好用、流畅、不打扰。</p><p><strong>自定义控制：</strong> HTML5的<code><audio></code>和<code><video></code>标签默认提供的<code>controls</code>属性，会给出一个浏览器原生的播放器界面。这个界面功能齐全，但样式往往比较“朴素”，而且不同浏览器下长得不一样，这对于追求品牌一致性或独特UI设计的网站来说，是个问题。</p><p>这时候，我们可以选择移除<code>controls</code>属性，然后用JavaScript和CSS自己构建一套播放器控制界面。这听起来有点复杂，但其实核心思路很简单：</p><ol><li><strong>隐藏原生控件：</strong> 在<code><video></code>或<code><audio></code>标签上移除<code>controls</code>属性。</li><li><strong>HTML元素构建：</strong> 使用<code><div></code>、<code><button></code>、<code><input type="range"></code>等HTML元素来制作播放/暂停按钮、进度条、音量控制等。</li><li><strong>JavaScript交互：</strong> 通过JavaScript监听这些自定义控件的点击或拖动事件，然后调用媒体元素的API（如<code>play()</code>, <code>pause()</code>, <code>volume</code>, <code>currentTime</code>等）来控制媒体播放。同时，也需要监听媒体元素自身的事件（如<code>timeupdate</code>, <code>ended</code>, <code>volumechange</code>），来更新自定义控件的状态（比如进度条的显示）。</li></ol><pre><video id="myVideo" src="path/to/my-video.mp4" width="640" height="360" poster="poster.jpg"></video> <div class="custom-controls"> <button id="playPauseBtn">播放</button> &lt;input type=&quot;range&quot; id=&quot;progressBar&quot; value=&quot;0&quot; min=&quot;0&quot; max=&quot;100&quot;&gt; <button id="muteBtn">静音</button> </div> <script> const video = document.getElementById('myVideo'); const playPauseBtn = document.getElementById('playPauseBtn'); const progressBar = document.getElementById('progressBar'); // ... 其他控件和事件监听 playPauseBtn.addEventListener('click', () => { if (video.paused) { video.play(); playPauseBtn.textContent = '暂停'; } else { video.pause(); playPauseBtn.textContent = '播放'; } }); video.addEventListener('timeupdate', () => { progressBar.value = (video.currentTime / video.duration) * 100; }); // ... 更多逻辑 </script></pre><p>这种方式能让你完全掌控播放器的外观和行为，但确实增加了开发工作量。市面上也有一些成熟的JavaScript播放器库（如Video.js），它们提供了丰富的API和主题，可以大大简化自定义播放器的开发。</p><p><strong>自动播放 (<code>autoplay</code>)：</strong><code>autoplay</code>属性听起来很酷，视频一加载就自动播放，但它在用户体验上常常是个“雷区”。想象一下，你打开一个网页，突然有声音或视频自动播放，是不是很恼火？现代浏览器（尤其是Chrome、Safari）已经对<code>autoplay</code>做了严格限制。通常情况下，只有当视频是静音(<code>muted</code>)状态，或者用户之前与网站有过交互（比如点击过某个按钮），<code>autoplay</code>才能生效。</p><p>我个人建议，除非是背景视频且完全静音，或者用户明确点击了某个触发播放的按钮，否则尽量避免使用<code>autoplay</code>。如果你非要自动播放，请务必加上<code>muted</code>属性，并考虑在用户第一次交互后，再提供一个取消静音的选项。</p><pre><video src="path/to/background-video.mp4" autoplay loop muted></video></pre><p><strong>性能优化策略：</strong> 媒体文件通常体积庞大，如果不加优化，会严重拖慢页面加载速度，影响用户体验和SEO。</p><ul><li><strong>媒体文件压缩：</strong> 这是最基础也最重要的。使用专业的工具（如HandBrake、FFmpeg）对视频和音频进行压缩，在保证可接受质量的前提下，尽可能减小文件大小。选择合适的编码格式也很关键，比如H.264或VP9编码的MP4/WebM视频，以及AAC或Op3编码的MP3/Ogg音频。</li><li><strong><code>preload</code>属性：</strong> <code><video></code>和<code><audio></code>标签的<code>preload</code>属性告诉浏览器在页面加载时是否预加载媒体数据。<ul><li><code>none</code>：不预加载任何数据。只在用户点击播放时才加载。适合大型媒体文件。</li><li><code>metadata</code>：只预加载媒体的元数据（如时长、尺寸）。加载速度快，用户可以更快看到媒体信息。</li><li><code>auto</code>：预加载整个媒体文件。如果文件不大，或者用户很可能播放，可以使用。但要慎用，可能导致不必要的带宽消耗。 我倾向于对不立即播放的视频使用<code>preload="metadata"</code>，对音频使用<code>preload="auto"</code>（如果文件不大）。</li></ul></li><li><strong><code>poster</code>属性：</strong> 对于视频，提供一个<code>poster</code>图像非常重要。它会在视频加载完成或用户点击播放前显示，给用户一个视觉预览，避免出现空白区域。这张图片应该尽量小，加载速度快。</li><li><strong><code>loading="lazy"</code>属性：</strong> 对于位于页面下方（视口外）的视频或<code><iframe></code>，可以考虑使用<code>loading="lazy"</code>属性。这会告诉浏览器延迟加载这些元素，直到它们接近或进入视口时才开始加载，从而加快首屏加载速度。</li></ul><pre><video src="path/to/my-video.mp4" controls width="640" height="360" poster="poster.jpg" preload="metadata" loading="lazy"></video> <iframe src="https://www.youtube.com/embed/your_video_id" width="560" height="315" frameborder="0" allowfullscreen loading="lazy"> </iframe></pre><p>通过这些细致的优化，我们不仅能确保媒体内容在各种环境下都能顺利播放，还能极大地提升用户与网站的互动体验，这在当今内容为王的时代显得尤为重要。</p><p>理论要掌握，实操不能落！以上关于《HTML媒体嵌入教程：代码与应用详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！</p> </div> <div class="labsList"> <a href="javascript:;" title="HTML媒体嵌入">HTML媒体嵌入</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/355768.html" title="Windows10安装net3.5失败解决办法" class="img_box"> <img src="/uploads/20251022/176109663268f833b8328f9.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Windows10安装net3.5失败解决办法">Windows10安装net3.5失败解决办法 </a> <dl> <dt class="lineOverflow"><a href="/article/355768.html" title="Windows10安装net3.5失败解决办法" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">Windows10安装net3.5失败解决办法</dd> </dl> </div> <div class="cateItem"> <a href="/article/355770.html" title="vivo浏览器权限设置入口及方法详解" class="img_box"> <img src="/uploads/20251022/176109668968f833f13ca7d.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="vivo浏览器权限设置入口及方法详解"> </a> <dl> <dt class="lineOverflow"><a href="/article/355770.html" class="aBlack" title="vivo浏览器权限设置入口及方法详解">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">vivo浏览器权限设置入口及方法详解</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/406666.html" class="img_box" title="JS实现响应式布局技巧分享"> <img src="/uploads/20251203/1764753867693001cb1ecf8.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> | 4分钟前 | <a href="javascript:;" class="aLightGray" title="断点">断点</a> <a href="javascript:;" class="aLightGray" title="响应式布局">响应式布局</a> <a href="javascript:;" class="aLightGray" title="动态调整">动态调整</a> <a href="javascript:;" class="aLightGray" title="JavaScript插件">JavaScript插件</a> <a href="javascript:;" class="aLightGray" title="尺寸监听">尺寸监听</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406666.html" class="aBlack" target="_blank" title="JS实现响应式布局技巧分享">JS实现响应式布局技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>469浏览</span> <span class="collectBtn user_collection" data-id="406666" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406664.html" class="img_box" title="JavaScript集成Spring邮件服务方法"> <img src="/uploads/20251203/176475381069300192803d0.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript集成Spring邮件服务方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5分钟前 | <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="SpringBoot">SpringBoot</a> <a href="javascript:;" class="aLightGray" title="邮件发送">邮件发送</a> <a href="javascript:;" class="aLightGray" title="前后端集成">前后端集成</a> <a href="javascript:;" class="aLightGray" title="JavaMailSender">JavaMailSender</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406664.html" class="aBlack" target="_blank" title="JavaScript集成Spring邮件服务方法">JavaScript集成Spring邮件服务方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>461浏览</span> <span class="collectBtn user_collection" data-id="406664" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406663.html" class="img_box" title="iTerm2多窗口编辑HTML教程详解"> <img src="/uploads/20251203/1764753748693001549b380.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="iTerm2多窗口编辑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> | 6分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/406663.html" class="aBlack" target="_blank" title="iTerm2多窗口编辑HTML教程详解">iTerm2多窗口编辑HTML教程详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>163浏览</span> <span class="collectBtn user_collection" data-id="406663" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406656.html" class="img_box" title="HTML扫雷逻辑实现：矩阵点击技巧详解"> <img src="/uploads/20251203/17647534516930002b2e6e7.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> | 11分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/406656.html" class="aBlack" target="_blank" title="HTML扫雷逻辑实现：矩阵点击技巧详解">HTML扫雷逻辑实现：矩阵点击技巧详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>321浏览</span> <span class="collectBtn user_collection" data-id="406656" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406637.html" class="img_box" title="Sublime3运行HTML代码教程详解"> <img src="/uploads/20251203/1764752492692ffc6c5ac7f.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="Sublime3运行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> | 27分钟前 | <a href="javascript:;" class="aLightGray" title="html">html</a> <a href="javascript:;" class="aLightGray" title="LiveServer">LiveServer</a> <a href="javascript:;" class="aLightGray" title="SublimeText3">SublimeText3</a> <a href="javascript:;" class="aLightGray" title="浏览器预览">浏览器预览</a> <a href="javascript:;" class="aLightGray" title="ViewinBrowser">ViewinBrowser</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406637.html" class="aBlack" target="_blank" title="Sublime3运行HTML代码教程详解">Sublime3运行HTML代码教程详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>393浏览</span> <span class="collectBtn user_collection" data-id="406637" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406627.html" class="img_box" title="CSS响应式网页如何实现移动端适配"> <img src="/uploads/20251203/1764752079692ffacfd54f0.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> | 34分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/406627.html" class="aBlack" target="_blank" title="CSS响应式网页如何实现移动端适配">CSS响应式网页如何实现移动端适配</a> </dt> <dd class="cont2"> <span><i class="view"></i>177浏览</span> <span class="collectBtn user_collection" data-id="406627" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406622.html" class="img_box" title="构建安全JS应用，防御常见攻击方法"> <img src="/uploads/20251203/1764751897692ffa19c4f10.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> | 37分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/406622.html" class="aBlack" target="_blank" title="构建安全JS应用，防御常见攻击方法">构建安全JS应用，防御常见攻击方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>124浏览</span> <span class="collectBtn user_collection" data-id="406622" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406615.html" class="img_box" title="JavaScript解释器与模板引擎实现解析"> <img src="/uploads/20251203/1764751533692ff8adb0934.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> | 43分钟前 | <a href="javascript:;" class="aLightGray" title="TemplateEngine">TemplateEngine</a> <a href="javascript:;" class="aLightGray" title="JavaScriptInterpreter">JavaScriptInterpreter</a> <a href="javascript:;" class="aLightGray" title="FunctionConstructor">FunctionConstructor</a> <a href="javascript:;" class="aLightGray" title="RegularExpression">RegularExpression</a> <a href="javascript:;" class="aLightGray" title="CodeParsing">CodeParsing</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406615.html" class="aBlack" target="_blank" title="JavaScript解释器与模板引擎实现解析">JavaScript解释器与模板引擎实现解析</a> </dt> <dd class="cont2"> <span><i class="view"></i>342浏览</span> <span class="collectBtn user_collection" data-id="406615" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406609.html" class="img_box" title="CSS渐变色与文字阴影教程"> <img src="/uploads/20251203/1764751347692ff7f311b57.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> | 46分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/406609.html" class="aBlack" target="_blank" title="CSS渐变色与文字阴影教程">CSS渐变色与文字阴影教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>405浏览</span> <span class="collectBtn user_collection" data-id="406609" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406604.html" class="img_box" title="HTML链接CSS文件的正确方式"> <img src="/uploads/20251203/1764751050692ff6cab3402.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML链接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> | 51分钟前 | <a href="javascript:;" class="aLightGray" title="Link标签">Link标签</a> <a href="javascript:;" class="aLightGray" title="rel="stylesheet"">rel="stylesheet"</a> <a href="javascript:;" class="aLightGray" title="head区域">head区域</a> <a href="javascript:;" class="aLightGray" title="HTML链接CSS">HTML链接CSS</a> <a href="javascript:;" class="aLightGray" title="CSS文件路径">CSS文件路径</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406604.html" class="aBlack" target="_blank" title="HTML链接CSS文件的正确方式">HTML链接CSS文件的正确方式</a> </dt> <dd class="cont2"> <span><i class="view"></i>376浏览</span> <span class="collectBtn user_collection" data-id="406604" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406578.html" class="img_box" title="提升表单输入体验的实用设计技巧"> <img src="/uploads/20251203/1764749912692ff25887381.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="提升表单输入体验的实用设计技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/406578.html" class="aBlack" target="_blank" title="提升表单输入体验的实用设计技巧">提升表单输入体验的实用设计技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>191浏览</span> <span class="collectBtn user_collection" data-id="406578" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/406573.html" class="img_box" title="斐波那契数列：递归与迭代对比解析"> <img src="/uploads/20251203/1764749613692ff12d9f1aa.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="斐波那契数列：递归与迭代对比解析"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1小时前 | <a href="javascript:;" class="aLightGray" title="JavaScript">JavaScript</a> <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="递归">递归</a> <a href="javascript:;" class="aLightGray" title="迭代">迭代</a> <a href="javascript:;" class="aLightGray" title="斐波那契数列">斐波那契数列</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/406573.html" class="aBlack" target="_blank" title="斐波那契数列：递归与迭代对比解析">斐波那契数列：递归与迭代对比解析</a> </dt> <dd class="cont2"> <span><i class="view"></i>322浏览</span> <span class="collectBtn user_collection" data-id="406573" 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">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13100.html" target="_blank" title="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" class="img_box"> <img src="/uploads/20251027/176155320368ff2b3345c06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13100.html" class="aBlack" target="_blank" title="ChatExcel酷表">ChatExcel酷表</a></dt> <dd class="cont1 lineTwoOverflow"> ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 </dd> <dd class="cont2">3184次使用</dd> </dl> </li> <li> <a href="/ai/13099.html" target="_blank" title="Any绘本：开源免费AI绘本创作工具深度解析" class="img_box"> <img src="/uploads/20251023/176120760368f9e5333da5f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Any绘本：开源免费AI绘本创作工具深度解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13099.html" class="aBlack" target="_blank" title="Any绘本">Any绘本</a></dt> <dd class="cont1 lineTwoOverflow"> 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 </dd> <dd class="cont2">3395次使用</dd> </dl> </li> <li> <a href="/ai/13098.html" target="_blank" title="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" class="img_box"> <img src="/uploads/20251021/176103600268f746e238bb8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13098.html" class="aBlack" target="_blank" title="可赞AI">可赞AI</a></dt> <dd class="cont1 lineTwoOverflow"> 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 </dd> <dd class="cont2">3427次使用</dd> </dl> </li> <li> <a href="/ai/13097.html" target="_blank" title="星月写作：AI网文创作神器，助力爆款小说速成" class="img_box"> <img src="/uploads/20251014/176043000368ee07b3159d6.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="星月写作：AI网文创作神器，助力爆款小说速成" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13097.html" class="aBlack" target="_blank" title="星月写作">星月写作</a></dt> <dd class="cont1 lineTwoOverflow"> 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 </dd> <dd class="cont2">4532次使用</dd> </dl> </li> <li> <a href="/ai/13096.html" target="_blank" title="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" class="img_box"> <img src="/uploads/20251014/176040000268ed9282edf80.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13096.html" class="aBlack" target="_blank" title="MagicLight">MagicLight</a></dt> <dd class="cont1 lineTwoOverflow"> MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 </dd> <dd class="cont2">3804次使用</dd> </dl> </li> </ul> </div> <!-- 相关文章 --> <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div> <!-- 微信登录弹窗 --> <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div> <!-- 微信登录 --> <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span> <!-- <div 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/355769.html"/> <input type="hidden" name="__token__" value="97fb149d16a0fa0aa381a38ac06c1e98" /> <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/355769.html"/> <input type="hidden" name="__token__" value="97fb149d16a0fa0aa381a38ac06c1e98" /> <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>
