登录
首页 >  文章 >  前端

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: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="CSS">CSS</a>
                                                 <a href="javascript:;" class="aLightGray" title="优化">优化</a>
                                                 <a href="javascript:;" class="aLightGray" title="体验">体验</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/72840.html"  title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a>
                                                 <a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a>
                                                 <a href="javascript:;" class="aLightGray" title="特效">特效</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/76259.html"  title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a>
                                                 <a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a>
                                                 <a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/83771.html"  title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
                                       <a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a>
                                                 <a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a>
                                                 <a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a>
                      </div>
          <div class="tit lineOverflow"><a href="/article/85057.html"  title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
                <li>
          <div class="info">
                                  <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                          |  1年前  |  
            </div>
          <div class="tit lineOverflow"><a href="/article/91359.html"  title="UI设计中为何选择绝对定位的智慧之道" class="aBlack">UI设计中为何选择绝对定位的智慧之道</a></div>
          <div class="opt">
            <span><i class="view"></i>501</span>
            <span class="collectBtn user_collection" data-id="91359" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
          </div>
        </li>
              </ul>
    </div>
         <!-- 最新阅读 -->
      <div class="contBoxNor">
          <div class="contTit">
              <div class="tit">最新阅读</div>
              <a href="/articlelist.html" class="more">更多></a>
          </div>
          <ul class="latestReadList">
                            <li>
                  <div class="info">
                                            <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                            <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273582.html"  title="防止原型链污染的实用方法分享" class="aBlack">防止原型链污染的实用方法分享</a></div>
                  <div class="opt">
                      <span><i class="view"></i>170</span>
                      <span class="collectBtn user_collection" data-id="273582" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273580.html"  title="HTML预加载技术解析：preload与prefetch区别详解" class="aBlack">HTML预加载技术解析：preload与prefetch区别详解</a></div>
                  <div class="opt">
                      <span><i class="view"></i>428</span>
                      <span class="collectBtn user_collection" data-id="273580" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273579.html"  title="HTML表格添加边框阴影方法详解" class="aBlack">HTML表格添加边框阴影方法详解</a></div>
                  <div class="opt">
                      <span><i class="view"></i>482</span>
                      <span class="collectBtn user_collection" data-id="273579" 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>
                                              |  4小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="alt属性">alt属性</a>
                                            <a href="javascript:;" class="aLightGray" title="语义化HTML">语义化HTML</a>
                                            <a href="javascript:;" class="aLightGray" title="WCAG标准">WCAG标准</a>
                                            <a href="javascript:;" class="aLightGray" title="HTML可访问性覆盖工具">HTML可访问性覆盖工具</a>
                                            <a href="javascript:;" class="aLightGray" title="网页无障碍">网页无障碍</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273578.html"  title="HTML可访问性检测工具推荐及使用方法" class="aBlack">HTML可访问性检测工具推荐及使用方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>397</span>
                      <span class="collectBtn user_collection" data-id="273578" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273577.html"  title="JavaScript动态搜索与多标签页实现技巧" class="aBlack">JavaScript动态搜索与多标签页实现技巧</a></div>
                  <div class="opt">
                      <span><i class="view"></i>361</span>
                      <span class="collectBtn user_collection" data-id="273577" 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>
                                              |  4小时前  |  
                                            <a href="javascript:;" 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="transform动画">transform动画</a>
                                            <a href="javascript:;" class="aLightGray" title="滚动穿透">滚动穿透</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273573.html"  title="移动端弹出层实现教程：CSS定位与动画交互详解" class="aBlack">移动端弹出层实现教程：CSS定位与动画交互详解</a></div>
                  <div class="opt">
                      <span><i class="view"></i>367</span>
                      <span class="collectBtn user_collection" data-id="273573" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273572.html"  title="Ping属性追踪用户点击行为方法" class="aBlack">Ping属性追踪用户点击行为方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>430</span>
                      <span class="collectBtn user_collection" data-id="273572" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273567.html"  title="BOM中如何调用全屏API？" class="aBlack">BOM中如何调用全屏API？</a></div>
                  <div class="opt">
                      <span><i class="view"></i>441</span>
                      <span class="collectBtn user_collection" data-id="273567" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273565.html"  title="定时器阶段详解：处理setTimeout与setInterval" class="aBlack">定时器阶段详解：处理setTimeout与setInterval</a></div>
                  <div class="opt">
                      <span><i class="view"></i>177</span>
                      <span class="collectBtn user_collection" data-id="273565" 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>
                                              |  4小时前  |  
                                            <a href="javascript:;" class="aLightGray" title="JS">JS</a>
                                            <a href="javascript:;" class="aLightGray" title="库">库</a>
                                            <a href="javascript:;" class="aLightGray" title="JsBarcode">JsBarcode</a>
                                            <a href="javascript:;" class="aLightGray" title="条形码生成">条形码生成</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273558.html"  title="JS生成条形码的几种实用方法" class="aBlack">JS生成条形码的几种实用方法</a></div>
                  <div class="opt">
                      <span><i class="view"></i>317</span>
                      <span class="collectBtn user_collection" data-id="273558" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273554.html"  title="JavaScript时区转换全攻略" class="aBlack">JavaScript时区转换全攻略</a></div>
                  <div class="opt">
                      <span><i class="view"></i>224</span>
                      <span class="collectBtn user_collection" data-id="273554" 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>
                                              |  4小时前  |  
                      </div>
                  <div class="tit lineOverflow"><a href="/article/273553.html"  title="高效DOM操作技巧分享" class="aBlack">高效DOM操作技巧分享</a></div>
                  <div class="opt">
                      <span><i class="view"></i>453</span>
                      <span class="collectBtn user_collection" data-id="273553" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
                  </div>
              </li>
                        </ul>
      </div>
    <!-- 课程推荐 -->
    <div class="contBoxNor">
      <div class="contTit">
        <div class="tit">课程推荐</div>
        <a href="/courselist.html" class="more">更多></a>
      </div>
      <ul class="classRecomList">
                <li>
          <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box">
            <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
                      </a>
          <dl>
            <dt class="lineOverflow">
              前端进阶之JavaScript设计模式            </dt>
            <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd>
            <dd class="cont2">
              <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a>
              <span>542次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/2.html" title="GO语言核心编程课程" class="img_box">
            <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
                      </a>
          <dl>
            <dt class="lineOverflow">
              GO语言核心编程课程            </dt>
            <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd>
            <dd class="cont2">
              <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a>
              <span>511次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box">
            <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
                      </a>
          <dl>
            <dt class="lineOverflow">
              简单聊聊mysql8与网络通信            </dt>
            <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd>
            <dd class="cont2">
              <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a>
              <span>498次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box">
            <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
                      </a>
          <dl>
            <dt class="lineOverflow">
              JavaScript正则表达式基础与实战            </dt>
            <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd>
            <dd class="cont2">
              <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a>
              <span>487次学习</span>
            </dd>
          </dl>
        </li>
                <li>
          <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box">
            <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
                      </a>
          <dl>
            <dt class="lineOverflow">
              从零制作响应式网站—Grid布局            </dt>
            <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd>
            <dd class="cont2">
              <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a>
              <span>484次学习</span>
            </dd>
          </dl>
        </li>
              </ul>
    </div>
        </div>
  <!-- footer -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>