登录
推荐 文章 Go 技术 课程 下载 专题 AI
首页 >  文章 >  前端

HTML表格标题添加方法：caption标签使用教程

时间：2025-08-02 19:51:47 209浏览 收藏

本文详细介绍了HTML表格标题的添加方法，重点讲解了如何使用`

`标签为表格添加具有语义化的标题。``标签必须作为``的第一个子元素，以确保其语义正确性、可访问性以及符合Web标准。文章强调了`
`标签不仅提供视觉标题，还能为屏幕阅读器和搜索引擎提供关键的上下文信息，从而提升网站的可访问性和SEO效果。此外，文章还介绍了如何使用CSS的`text-align`、`color`、`font-size`等属性来定制标题的样式，并通过`caption-side`属性控制标题的位置，包括`top`、`bottom`、`left`和`right`，并提醒开发者注意`left`和`right`在不同浏览器上的兼容性问题。掌握``标签的使用，能有效提升HTML表格的语义化和用户体验。

HTML表格的标题通过

标签添加，必须作为的第一个子元素以确保语义正确、可访问性强且符合规范；该标签不仅提供视觉标题，还为屏幕阅读器和搜索引擎提供关键上下文，提升可访问性和SEO；错误放置会导致解析问题和辅助技术失效；可通过CSS的text-align、color、font-size、font-weight、padding、margin、background-color等属性定制样式，并使用caption-side控制标题位置（top、bottom、left、right），其中top为默认值，left和right需注意浏览器兼容性问题。

HTML中的表格标题怎么添加？ caption标签使用教学

HTML表格的标题，也就是我们常说的表格的“名字”，是通过

标签来添加的。这个标签的作用就是给你的表格一个清晰、简洁的描述性标题，它不仅仅是视觉上的，更是语义上的。

HTML中的表格标题怎么添加？ caption标签使用教学

解决方案

添加表格标题其实非常直接，你只需要把

标签放在标签的紧后面，作为它的第一个子元素。这是规范的要求，也是确保浏览器和辅助技术正确解析表格结构的关键。


  2023年Q4销售额概览
  
    

      区域
      产品A
      产品B
      总计
    

  
  
    

      华东
      12000
      8000
      20000
    

    

      华南
      15000
      9500
      24500
    

  
  
    

      总销售额
      44500
    

  

你看，就是这么简单。
标签的内容就是你希望展示的表格标题。
HTML中的表格标题怎么添加？ caption标签使用教学
为什么HTML表格需要
标签？它仅仅是视觉上的装饰吗？
说实话，你可能会觉得，不就是个标题嘛，直接用个div或者p标签放在表格上面不也一样？从视觉效果上看，确实可能差不多。但从代码语义和可访问性上来说，那差别可就大了，完全不是一回事。
标签不仅仅是视觉上的装饰，它有着非常重要的语义作用。
首先，对于屏幕阅读器等辅助技术来说，
提供了表格的概览信息。当视力障碍用户浏览网页时，屏幕阅读器会先读出表格的标题，让他们能够快速理解表格的内容和目的，决定是否需要进一步阅读表格的详细数据。这大大提升了网页的可访问性，让信息对所有人开放。
HTML中的表格标题怎么添加？ caption标签使用教学
其次，从SEO的角度看，
标签也为搜索引擎提供了关于表格内容的额外上下文。虽然它可能不像
或</code>那样权重高，但它能帮助搜索引擎更好地理解你的页面内容，从而可能对你的文章排名有所帮助。一个清晰的标题能让搜索引擎知道这个表格是关于什么的，而不是一堆无序的数据。</p><p>最后，从代码规范和维护的角度讲，使用<code><caption></code>能让你的HTML结构更清晰、更规范。它明确地告诉开发者和浏览器：“嘿，这个就是这个表格的标题！”而不是一个随便放在表格旁边的文本块。这在团队协作或者项目迭代时，能省去不少麻烦。我个人觉得，写代码就应该写得语义化，这不光是为了别人，也是为了未来的自己。</p><h3><code><caption></code>标签在HTML表格中应该放在哪个位置？放在其他地方会有什么问题？</h3><p>这个地方，说实话，我见过不少新手会犯错。他们可能觉得，只要在<code><table></code>标签里面就行，管它放在哪儿呢。但其实，<code><caption></code>标签在HTML规范里，位置是相当讲究的。它必须是<code><table></code>标签的<strong>第一个子元素</strong>。</p><p>也就是说，你不能把它放在<code><thead></code>、<code><tbody></code>、<code><tfoot></code>或者任何<code><tr></code>标签的里面。它就得紧跟在<code><table></code>的后面，排在所有其他表格内容（比如表头、表体）的前面。</p><p>如果你把它放在了错误的位置，会发生什么呢？</p><ol><li><strong>HTML验证失败：</strong> 你的HTML代码将不再符合W3C规范，这虽然不一定会直接导致页面崩溃，但在严谨的项目中，这是一种需要避免的“不规范”行为。</li><li><strong>浏览器解析差异：</strong> 尽管大多数现代浏览器对这种“不规范”有很好的容错性，可能会尝试纠正并显示标题，但你不能保证所有浏览器或未来版本的浏览器都会这样做。这可能导致在不同浏览器或设备上显示效果不一致的问题，这可不是我们希望看到的。</li><li><strong>辅助技术解析错误：</strong> 这是最关键的一点。屏幕阅读器等辅助技术在解析HTML时，是严格遵循语义结构的。如果<code><caption></code>不在正确的位置，辅助技术可能无法识别它为表格的标题，从而无法向用户正确传达表格的上下文信息，这直接影响了可访问性。</li></ol><p>所以，为了确保你的表格标题能被正确解析和展示，并且你的网页符合最新的Web标准，务必把它放在<code><table></code>标签的第一个位置。这就像给文件归档，每个东西都有它该去的位置，放对了才能方便查找和使用。</p><h3>如何对HTML表格标题进行样式定制？有哪些常用的CSS属性可以应用？</h3><p>搞定了语义和位置，你肯定会想，这标题怎么才能好看点？毕竟默认的样式可能有点朴素。CSS在这方面提供了很大的灵活性，你可以像对待其他任何文本元素一样，对<code><caption></code>进行样式定制。</p><p>最常用的CSS属性包括：</p><ul><li><strong><code>text-align</code>：</strong> 控制标题的水平对齐方式。你可以设置为<code>left</code>、<code>right</code>、<code>center</code>或<code>justify</code>。默认通常是<code>left</code>。</li><li><strong><code>color</code>：</strong> 设置标题的文字颜色。</li><li><strong><code>font-size</code>：</strong> 调整标题的字体大小。</li><li><strong><code>font-weight</code>：</strong> 控制字体的粗细，比如<code>bold</code>。</li><li><strong><code>padding</code>和<code>margin</code>：</strong> 调整标题与表格边框或其他内容的间距。</li><li><strong><code>background-color</code>：</strong> 给标题设置背景色，让它更突出。</li></ul><p>除了这些通用的文本样式，<code><caption></code>标签还有一个专用的CSS属性，叫做<code>caption-side</code>。这个属性允许你控制标题相对于表格的显示位置：</p><ul><li><code>top</code> (默认值)：标题显示在表格上方。</li><li><code>bottom</code>：标题显示在表格下方。</li><li><code>left</code>：标题显示在表格左侧（垂直方向）。</li><li><code>right</code>：标题显示在表格右侧（垂直方向）。</li></ul><p><strong>一个简单的样式示例：</strong></p><pre class="brush:language-css;toolbar:false;">/* 假设你的CSS文件或者style标签里有这些样式 */
table caption {
  text-align: center; /* 标题居中 */
  font-size: 1.2em; /* 字体稍微大一点 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 深灰色字体 */
  padding: 10px 0; /* 上下内边距 */
  caption-side: top; /* 确保标题在表格上方，虽然是默认值，但明确写出来更清晰 */
  /* background-color: #f0f0f0; 可以考虑加个浅灰色背景 */
}

/* 如果你想把标题放在底部 */
/*
table.bottom-caption caption {
  caption-side: bottom;
  color: #666;
}
*/</pre><p><strong>一点小提醒：</strong>
虽然<code>caption-side</code>提供了<code>left</code>和<code>right</code>选项，但在实际应用中，它们的使用频率远低于<code>top</code>和<code>bottom</code>。而且，浏览器对<code>left</code>和<code>right</code>的渲染效果可能不尽相同，有些浏览器可能只是将文本旋转90度，而有些则可能将其作为表格的侧边标题显示。所以，在使用<code>left</code>或<code>right</code>时，最好进行充分的兼容性测试。</p><p>另外，在进行样式定制时，别忘了可访问性。确保标题的文字颜色与背景色有足够的对比度，字体大小适中，让所有用户都能轻松阅读。毕竟，样式是为了更好地传达信息，而不是为了炫技。</p><p>以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。</p></caption></caption></table></caption></caption>      </div>
        <div class="labsList">
                        <a href="javascript:;"  class="aLightGray" title="CSS样式">CSS样式</a>
                        <a href="javascript:;"  class="aLightGray" title="HTML表格">HTML表格</a>
                        <a href="javascript:;"  class="aLightGray" title="可访问性">可访问性</a>
                        <a href="javascript:;"  class="aLightGray" title="语义化">语义化</a>
                        <a href="javascript:;"  class="aLightGray" title="<caption>标签"><caption>标签</a>
                    </div>
          </div>

         <!-- 最新阅读 -->
     <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">相关阅读</div>
        <a href="/articlelist.html" class="more">更多></a>
      </div>
      <ul class="latestReadList">
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="提升">提升</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="Function构造函数">Function构造函数</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/207000.html"  title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div>
          <div class="opt">
            <span><i class="view"></i>502</span>
            <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  2个月前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/619053.html"  title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  2个月前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/618916.html"  title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  2个月前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/612539.html"  title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  2个月前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/611774.html"  title="data-*属性详解：HTML数据存储与DOM操作技巧" class="aBlack">data-*属性详解：HTML数据存储与DOM操作技巧</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="611774" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
              </ul>
    </div>
         <!-- 最新阅读 -->
      <div class="contBoxNor">
          <div class="contTit">
              <div class="tit">最新阅读</div>
              <a href="/articlelist.html" class="more">更多></a>
          </div>
          <ul class="latestReadList">
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  18小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621121.html"  title="CSS @scope 怎么限制组件样式泄漏：嵌套范围、优先级与降级检查" class="aBlack">CSS @scope 怎么限制组件样式泄漏：嵌套范围、优先级与降级检查</a></div>
                  <div class="opt">
                      <span><i class="view"></i>366</span>
                      <span class="collectBtn user_collection" data-id="621121" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> ·
                                            <a href="/articletag/39796_new_0_1.html" class="aLightGray" title="表单">表单</a> ·
                                            <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                            <a href="javascript:;" class="aLightGray" title="响应式布局">响应式布局</a>
                                            <a href="javascript:;" class="aLightGray" title="表单">表单</a>
                                            <a href="javascript:;" class="aLightGray" title="field-sizing">field-sizing</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621111.html"  title="CSS field-sizing: content 怎么让输入框随内容变宽：最小宽度、最大宽度和降级验收" class="aBlack">CSS field-sizing: content 怎么让输入框随内容变宽：最小宽度、最大宽度和降级验收</a></div>
                  <div class="opt">
                      <span><i class="view"></i>442</span>
                      <span class="collectBtn user_collection" data-id="621111" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1天前  |  
                                            <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> ·
                                            <a href="/articletag/39953_new_0_1.html" class="aLightGray" title="前端工程">前端工程</a> ·
                                            <a href="/articletag/40054_new_0_1.html" class="aLightGray" title="浏览器API">浏览器API</a> ·
                                            <a href="javascript:;" class="aLightGray" title="Web Locks API">Web Locks API</a>
                                            <a href="javascript:;" class="aLightGray" title="navigator.locks">navigator.locks</a>
                                            <a href="javascript:;" class="aLightGray" title="前端多标签页">前端多标签页</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621099.html"  title="Web Locks API 怎么防止多标签页重复刷新：ifAvailable、超时与失联恢复" class="aBlack">Web Locks API 怎么防止多标签页重复刷新：ifAvailable、超时与失联恢复</a></div>
                  <div class="opt">
                      <span><i class="view"></i>386</span>
                      <span class="collectBtn user_collection" data-id="621099" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1天前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621083.html"  title="SPA 导航失败怎么保留旧内容：Navigation API 的 navigateerror 与重试回退" class="aBlack">SPA 导航失败怎么保留旧内容：Navigation API 的 navigateerror 与重试回退</a></div>
                  <div class="opt">
                      <span><i class="view"></i>308</span>
                      <span class="collectBtn user_collection" data-id="621083" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1天前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621082.html"  title="前端 SPA 导航怎么统一接管：Navigation API 的拦截、失败恢复与回退" class="aBlack">前端 SPA 导航怎么统一接管：Navigation API 的拦截、失败恢复与回退</a></div>
                  <div class="opt">
                      <span><i class="view"></i>291</span>
                      <span class="collectBtn user_collection" data-id="621082" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1天前  |  
                                            <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> ·
                                            <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> ·
                                            <a href="/articletag/40634_new_0_1.html" class="aLightGray" title="无障碍设计">无障碍设计</a> ·
                                            <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                            <a href="javascript:;" class="aLightGray" title="无障碍">无障碍</a>
                                            <a href="javascript:;" class="aLightGray" title="color-mix">color-mix</a>
                                            <a href="javascript:;" class="aLightGray" title="design token">design token</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621062.html"  title="CSS 主题按钮怎么用 color-mix() 派生 hover 与浅底：对比度和 fallback 实战" class="aBlack">CSS 主题按钮怎么用 color-mix() 派生 hover 与浅底：对比度和 fallback 实战</a></div>
                  <div class="opt">
                      <span><i class="view"></i>173</span>
                      <span class="collectBtn user_collection" data-id="621062" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1天前  |  
                                            <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> ·
                                            <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> ·
                                            <a href="/articletag/40634_new_0_1.html" class="aLightGray" title="无障碍设计">无障碍设计</a> ·
                                            <a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
                                            <a href="javascript:;" class="aLightGray" title="无障碍">无障碍</a>
                                            <a href="javascript:;" class="aLightGray" title="color-mix">color-mix</a>
                                            <a href="javascript:;" class="aLightGray" title="design token">design token</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621061.html"  title="CSS color-mix() 做主题色派生：从 design token 到对比度验收" class="aBlack">CSS color-mix() 做主题色派生：从 design token 到对比度验收</a></div>
                  <div class="opt">
                      <span><i class="view"></i>406</span>
                      <span class="collectBtn user_collection" data-id="621061" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  3天前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621033.html"  title="中文标题总是断得难看？CSS text-wrap balance 的宽度约束与降级验收" class="aBlack">中文标题总是断得难看？CSS text-wrap balance 的宽度约束与降级验收</a></div>
                  <div class="opt">
                      <span><i class="view"></i>330</span>
                      <span class="collectBtn user_collection" data-id="621033" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  3天前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621032.html"  title="CSS text-wrap: balance 怎么让中文标题更稳：max-width、降级与可访问性" class="aBlack">CSS text-wrap: balance 怎么让中文标题更稳：max-width、降级与可访问性</a></div>
                  <div class="opt">
                      <span><i class="view"></i>353</span>
                      <span class="collectBtn user_collection" data-id="621032" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  3天前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/621031.html"  title="CSS Anchor Positioning 怎么做浮层定位：position-try 回退、可访问性和旧浏览器降级" class="aBlack">CSS Anchor Positioning 怎么做浮层定位：position-try 回退、可访问性和旧浏览器降级</a></div>
                  <div class="opt">
                      <span><i class="view"></i>349</span>
                      <span class="collectBtn user_collection" data-id="621031" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1星期前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/861_new_0_1.html" class="aLightGray" title="性能">性能</a> ·
                                            <a href="/articletag/2436_new_0_1.html" class="aLightGray" title="异步任务">异步任务</a> ·
                                            <a href="/articletag/40548_new_0_1.html" class="aLightGray" title="对象存储">对象存储</a> ·
                                            <a href="/articletag/40552_new_0_1.html" class="aLightGray" title="文件导出">文件导出</a> ·
                                            <a href="javascript:;" class="aLightGray" title="Excel">Excel</a>
                                            <a href="javascript:;" class="aLightGray" title="csv">csv</a>
                                            <a href="javascript:;" class="aLightGray" title="对象存储">对象存储</a>
                                            <a href="javascript:;" class="aLightGray" title="异步任务">异步任务</a>
                                            <a href="javascript:;" class="aLightGray" title="SSE">SSE</a>
                                            <a href="javascript:;" class="aLightGray" title="前端报表导出">前端报表导出</a>
                                            <a href="javascript:;" class="aLightGray" title="浏览器导出">浏览器导出</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620753.html"  title="前端大报表导出怎么选：浏览器直出还是后端异步任务" class="aBlack">前端大报表导出怎么选：浏览器直出还是后端异步任务</a></div>
                  <div class="opt">
                      <span><i class="view"></i>331</span>
                      <span class="collectBtn user_collection" data-id="620753" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  1星期前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620752.html"  title="前端 WebSocket 断线重连为什么会打爆接口：指数退避、抖动与页面恢复" class="aBlack">前端 WebSocket 断线重连为什么会打爆接口：指数退避、抖动与页面恢复</a></div>
                  <div class="opt">
                      <span><i class="view"></i>366</span>
                      <span class="collectBtn user_collection" data-id="620752" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                        </ul>
      </div>
    <!-- 课程推荐 -->
    <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">课程推荐</div>
        <a href="/courselist.html" class="more">更多></a>
      </div>
      <ul class="classRecomList">
                <li>
          <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box">
            <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
                      </a>
          <dl>
            <dt class="lineOverflow">
              前端进阶之JavaScript设计模式            </dt>
            <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd>
            <dd class="cont2">
              <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a>
              <span>543次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/2.html" title="GO语言核心编程课程" class="img_box">
            <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
                      </a>
          <dl>
            <dt class="lineOverflow">
              GO语言核心编程课程            </dt>
            <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd>
            <dd class="cont2">
              <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a>
              <span>516次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box">
            <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
                      </a>
          <dl>
            <dt class="lineOverflow">
              简单聊聊mysql8与网络通信            </dt>
            <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd>
            <dd class="cont2">
              <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a>
              <span>500次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box">
            <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
                      </a>
          <dl>
            <dt class="lineOverflow">
              JavaScript正则表达式基础与实战            </dt>
            <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd>
            <dd class="cont2">
              <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a>
              <span>487次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box">
            <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
                      </a>
          <dl>
            <dt class="lineOverflow">
              从零制作响应式网站—Grid布局            </dt>
            <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd>
            <dd class="cont2">
              <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a>
              <span>485次学习</span>
            </dd>
          </dl>
        </li>
              </ul>
    </div>
        </div>
  <!-- footer -->
  <div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/frontend/common.js" defer></script>
  <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>