前端学习（五）HTML入门中

发表于2019-01-13|更新于2021-03-09|Web

|字数总计:1.4k|阅读时长:6分钟|阅读量:

本篇还未完成

在完成了上篇的学习之后，欢迎来到中篇

在中篇我们将会介绍网页、视频和音频的插入表格和表单的使用以及节的使用

今天废话就不多说了，下面直接进入今天的学习。

网页、视频和音频

网页嵌入</strong></h6><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"https://idevlab.cn"</span></span></span></span><br><span class="line"><span class="xml"> width="100%" height="500"</span></span><br><span class="line"><span class="xml"> allowfullscreen sandbox></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">p</span>></span></span> <span class="xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://idevlab.cn"</span>></span></span></span><br><span class="line"><span class="code"> Fallback link for browsers that don't support iframes</span></span><br><span class="line"><span class="code"> </a> </p></span></span><br><span class="line"><span class="code"></iframe></span></span><br></pre></td></tr></table></figure> <p>此示例包括使用以下所需的<code><iframe></code>基本要素：</p> <p><code>[allowfullscreen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen)</code> 如果设置，<code><iframe></code>则可以通过<a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/User_notifications/Full_screen_api">全屏API</a>设置为全屏模式。</p> <p><code>[src](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src)</code> 指向要嵌入文档的URL路径。</p> <p><code>[width](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-width)</code> 和 <code>[height](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-height)</code> 这些属性指定您想要的iframe的宽度和高度。</p> <p><code>[sandbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox)</code> 该属性可以提高安全性设置,使嵌入的网页不会影响到我们的网页。</p> <h6 id="标签"><a href="#标签" class="headerlink" title=" 标签"></a><strong><video> 标签</strong></h6><video src="rabbit320.webm" controls> <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> <p>你可以添加多个源预防浏览器不支持某种格式</p> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">video</span> <span class="attr">controls</span> <span class="attr">width</span>=<span class="string">"400"</span> <span class="attr">height</span>=<span class="string">"400"</span></span></span></span><br><span class="line"><span class="xml"> autoplay loop muted</span></span><br><span class="line"><span class="xml"> poster="poster.png"></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"rabbit320.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"rabbit320.webm"</span> <span class="attr">type</span>=<span class="string">"video/webm"</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">p</span>></span></span>Your browser doesn't support HTML5 video. Here is a <span class="xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"rabbit320.mp4"</span>></span></span>link to the video<span class="xml"><span class="tag"></<span class="name">a</span>></span></span> instead.<span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">video</span>></span></span></span><br></pre></td></tr></table></figure> <p><code>[autoplay](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-autoplay)</code> 这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。</p> <p><code>[loop](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-loop)</code> 这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。</p> <p><code>[muted](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-muted)</code> 这个属性会导致媒体播放时，默认关闭声音。</p> <p><code>[poster](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-poster)</code> 这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。</p> <p><code>[preload](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#attr-preload)</code>这个属性被用来缓冲较大的文件，有3个值可选： </p> <ul> <li> <code>"none"</code> ：不缓冲</li> <li> <code>"auto"</code> ：页面加载后缓存媒体文件</li> <li> <code>"metadata"</code> ：仅缓冲文件的元数据</li> </ul> <h6 id="标签-1"><a href="#标签-1" class="headerlink" title=" 标签"></a><strong><audio> 标签</strong></h6><p>使用和视频几乎一模一样</p> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">audio</span> <span class="attr">controls</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"viper.mp3"</span> <span class="attr">type</span>=<span class="string">"audio/mp3"</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"viper.ogg"</span> <span class="attr">type</span>=<span class="string">"audio/ogg"</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">p</span>></span></span>Your browser doesn't support HTML5 audio. Here is a <span class="xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"viper.mp3"</span>></span></span>link to the audio<span class="xml"><span class="tag"></<span class="name">a</span>></span></span> instead.<span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">audio</span>></span></span></span><br></pre></td></tr></table></figure> <p>有关于字幕的操作请翻阅MDN</p> <p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#%E6%98%BE%E7%A4%BA%E9%9F%B3%E8%BD%A8%E6%96%87%E6%9C%AC">https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#显示音轨文本</a></p> <h4 id="表格"><a href="#表格" class="headerlink" title="表格"></a><strong>表格</strong></h4><blockquote> <p>HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途. 不幸的是, 许多人习惯用 HTML 表格来实现网页布局， e.g. 一行包含 header, 一行包含几列内容, 一行包含 footer, etc. 你可以在我们的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a> 中的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> 获得更多细节内容和一个示例。这种做法以前是很常见的，因为以前 CSS 在不同浏览器上的兼容性比较糟糕 ; 表格布局现在不太普遍，但您可能仍然会在网络的某些角落看到它们。</p> <p>引自MDN</p> </blockquote> <p>当初小学用FrontPage做网页的时候我们就是用表格来布局的，这样布局出来的HTML真的不是人看的。</p> <p>下面是一个表格的例子</p> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">table</span>></span></span></span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code"> <caption>DEMO</caption></span></span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code"> <thead></span></span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code"> <tr></span></span><br><span class="line"><span class="code"> <td> </td></span></span><br><span class="line"><span class="code"> <td>A</td></span></span><br><span class="line"><span class="code"> <td>B</td></span></span><br><span class="line"><span class="code"> <td>C</td></span></span><br><span class="line"><span class="code"> <td>D</td></span></span><br><span class="line"><span class="code"> </tr></span></span><br><span class="line"><span class="code"> </thead></span></span><br><span class="line"><span class="code"> <tbody></span></span><br><span class="line"><span class="code"> <tr></span></span><br><span class="line"><span class="code"> <td> </td></span></span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code"> <td rowspan="2">A</td></span></span><br><span class="line"><span class="code"> <td>B</td></span></span><br><span class="line"><span class="code"> <td>C</td></span></span><br><span class="line"><span class="code"> <td>D</td></span></span><br><span class="line"><span class="code"> </tr></span></span><br><span class="line"><span class="code"> <tr></span></span><br><span class="line"><span class="code"> <td>F</td></span></span><br><span class="line"><span class="code"> <td>G</td></span></span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code"> <td colspan="2">HIH</td></span></span><br><span class="line"><span class="code"> </tr></span></span><br><span class="line"><span class="code"> </tbody></span></span><br><span class="line"><span class="code"> </span></span><br><span class="line"><span class="code"> <tfoot></span></span><br><span class="line"><span class="code"> <tr></span></span><br><span class="line"><span class="code"> <td> </td></span></span><br><span class="line"><span class="code"> <td>A</td></span></span><br><span class="line"><span class="code"> <td>B</td></span></span><br><span class="line"><span class="code"> <td>C</td></span></span><br><span class="line"><span class="code"> <td>D</td></span></span><br><span class="line"><span class="code"> </tr></span></span><br><span class="line"><span class="code"> </tfoot></span></span><br><span class="line"><span class="code"></table></span></span><br></pre></td></tr></table></figure> <p>DEMO</p> <p> </p> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p> </p> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>F</p> <p>G</p> <p>HIH</p> <p> </p> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <h4 id="表单"><a href="#表单" class="headerlink" title="表单"></a><strong>表单</strong></h4><p>从用户体验(UX)的角度来看，要记住：表单越大，失去用户的风险就越大。保持简单，保持专注:只要求必要的数据。</p> <h4 id="节"><a href="#节" class="headerlink" title="节"></a><strong>节</strong></h4><p>为了实现的语义标记，HTML提供了可以用来表示这些部分的专用标签，例如：</p> <ul> <li> <strong>标题:</strong> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header"><code><header></code></a>.</li> <li> <strong>导航栏:</strong> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav"><code><nav></code></a>.</li> <li> <strong>主要内容:</strong> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main"><code><main></code></a>, 具有代表性的内容段落主题可以使用 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article"><code><article></code></a>, <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section"><code><section></code></a>, 和 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a> 元素.</li> <li> <strong>侧栏:</strong> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/aside"><code><aside></code></a>; 经常嵌套在 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/main"><code><main></code></a> 中.</li> <li> <strong>页脚:</strong> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer"><code><footer></code></a>.</li> </ul> <p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/span"><code><span></code></a> 是一个行内无语义元素</p> <p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a> 是一个块级无语义元素，</p> </article><div class="post-copyright"><div class="post-copyrightauthor"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">idevlab</a></span></div><div class="post-copyrighttype"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://blogs.idevlab.cn/2019/01/13/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%94%EF%BC%89html%E5%85%A5%E9%97%A8-%E4%B8%AD/">https://blogs.idevlab.cn/2019/01/13/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%94%EF%BC%89html%E5%85%A5%E9%97%A8-%E4%B8%AD/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blogs.idevlab.cn" target="_blank">idevlab's Blog</a>！</span></div></div><div class="tag_share"><div class="post-metatag-list"><a class="post-metatags" href="/tags/HTML/">HTML</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2019/05/12/%E5%AE%A3%E5%91%8Aaria2uwp1-0/"><img class="prev-cover" data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">宣告 Aria2 UWP 1.0</div></div></a></div><div class="next-post pull-right"><a href="/2019/01/13/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%EF%BC%88%E4%BA%94%EF%BC%89html%E5%85%A5%E9%97%A8/"><img class="next-cover" data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">前端学习（五）HTML入门上</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2019/01/13/前端学习（五）html入门/" title="前端学习（五）HTML入门上"><img class="cover" data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-01-13</div><div class="title">前端学习（五）HTML入门上</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="/img/avatar.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-infoname">idevlab</div><div class="author-infodescription"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">46</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">12</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">14</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/IchenDev"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/IchenDEV" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:idevlab@outlook.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">欢迎来到一个什么都搞，什么都不会的菜鸡的博客</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%BD%91%E9%A1%B5%E3%80%81%E8%A7%86%E9%A2%91%E5%92%8C%E9%9F%B3%E9%A2%91"><span class="toc-number">1.</span> <span class="toc-text">网页、视频和音频</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E7%BD%91%E9%A1%B5%E5%B5%8C%E5%85%A5"><span class="toc-number">1.0.1.</span> <span class="toc-text">网页嵌入</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-number">1.0.2.</span> <span class="toc-text"> 标签</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE-1"><span class="toc-number">1.0.3.</span> <span class="toc-text"> 标签</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC"><span class="toc-number">2.</span> <span class="toc-text">表格</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95"><span class="toc-number">3.</span> <span class="toc-text">表单</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%8A%82"><span class="toc-number">4.</span> <span class="toc-text">节</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/03/09/WebpackLoadersVSPlugin/" title="Webpack Loaders VS Plugin"><img data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Webpack Loaders VS Plugin"/></a><div class="content"><a class="title" href="/2021/03/09/WebpackLoadersVSPlugin/" title="Webpack Loaders VS Plugin">Webpack Loaders VS Plugin</a><time datetime="2021-03-09T15:25:28.000Z" title="发表于 2021-03-09 15:25:28">2021-03-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/09/%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81/" title="防抖和节流"><img data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="防抖和节流"/></a><div class="content"><a class="title" href="/2021/03/09/%E9%98%B2%E6%8A%96%E5%92%8C%E8%8A%82%E6%B5%81/" title="防抖和节流">防抖和节流</a><time datetime="2021-03-09T15:08:41.000Z" title="发表于 2021-03-09 15:08:41">2021-03-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/09/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E8%AF%BB%E5%8F%96%E8%A7%84%E5%88%99/" title="浏览器缓存读取规则"><img data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="浏览器缓存读取规则"/></a><div class="content"><a class="title" href="/2021/03/09/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E8%AF%BB%E5%8F%96%E8%A7%84%E5%88%99/" title="浏览器缓存读取规则">浏览器缓存读取规则</a><time datetime="2021-03-09T14:31:17.000Z" title="发表于 2021-03-09 14:31:17">2021-03-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/09/Event%20Loop/" title="Event Loop"><img data-lazy-src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Event Loop"/></a><div class="content"><a class="title" href="/2021/03/09/Event%20Loop/" title="Event Loop">Event Loop</a><time datetime="2021-03-09T13:23:51.000Z" title="发表于 2021-03-09 13:23:51">2021-03-09</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/03/03/Vue2%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/" title="Vue2 源码学习"><img data-lazy-src="http://gainfromhere.com/wp-content/uploads/2017/07/vue-js.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue2 源码学习"/></a><div class="content"><a class="title" href="/2021/03/03/Vue2%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/" title="Vue2 源码学习">Vue2 源码学习</a><time datetime="2021-03-03T21:56:51.000Z" title="发表于 2021-03-03 21:56:51">2021-03-03</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><div id="footer-wrap"><div class="copyright">©2018 - 2021 By idevlab</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><div class="js-pjax"></div><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>