首页 > 文章 > 前端
HTML表单常用元素有：input、textarea、select、option、button等。

时间：2025-11-11 15:18:03 347浏览收藏
各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《HTML表单常用元素有哪些》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！
HTML表单核心由form、input、textarea、select、label和button等元素构成，form定义数据提交的action和method，input通过type属性实现多种输入功能，label提升可访问性，button支持灵活的提交与重置操作，结合fieldset和legend可对表单进行逻辑分组，提升结构清晰度与用户体验。
HTML表单的基本组成元素有哪些
HTML表单的核心组成元素主要包括了容器标签
，以及一系列用于收集用户输入的控件，比如最常见的、多行文本的
</code>、下拉选择的<code><select></code>，还有用于关联文本的<code><label></code>和可点击的<code><button></code>。这些是构建任何交互式表单的基础骨架。</p><p>HTML表单，在我看来，是Web交互最古老也最核心的机制之一。它远不止是几个输入框那么简单，它代表着用户与服务器之间数据交换的桥梁。从最基础的登录注册，到复杂的订单提交，都离不开这些基本元素。</p><p><code><form></code> 标签是整个表单的“外壳”，它定义了表单数据提交的终点（<code>action</code> 属性，指向处理表单数据的URL）和方式（<code>method</code> 属性，通常是<code>GET</code>或<code>POST</code>）。没有它，你的所有输入控件就只是页面上的摆设，无法将数据发送出去。我记得刚开始学习的时候，总是忘记给<code>form</code>加上<code>action</code>和<code>method</code>，结果点击提交按钮后页面毫无反应，那会儿真是挠头。</p><p>接着就是表单的“灵魂”—— <code><input></code> 标签。它的多样性简直令人惊叹。通过改变 <code>type</code> 属性，它可以是单行文本框（<code>text</code>）、密码框（<code>password</code>）、复选框（<code>checkbox</code>）、单选按钮（<code>radio</code>）、提交按钮（<code>submit</code>）、文件上传（<code>file</code>），甚至是HTML5引入的日期（<code>date</code>）、时间（<code>time</code>）、颜色（<code>color</code>）等。这一个标签几乎承担了大部分的用户输入需求。比如：</p><pre class="brush:language-html;toolbar:false;"><input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password">
<input type="checkbox" name="rememberMe" id="rememberMe"></pre><p>而对于多行文本输入，我们有专门的 <code><textarea></code>。它比 <code>input type="text"</code> 更适合长篇幅的文字输入，比如留言或评论。<code>rows</code> 和 <code>cols</code> 属性可以控制其初始大小，但最终用户通常可以通过拖拽来调整。</p><p><code><select></code> 标签则用来创建下拉菜单，让用户从预设的选项中选择一个或多个。每个选项都由 <code><option></code> 标签包裹。这在需要限制用户输入范围时非常有用，比如选择国家、省份或产品分类。</p><pre class="brush:language-html;toolbar:false;"><select name="country">
    <option value="usa">美国</option>
    <option value="china">中国</option>
</select></pre><p>为了提升用户体验和可访问性，<code><label></code> 标签是不可或缺的。它将一段描述性文本与表单控件关联起来。当用户点击 <code>label</code> 文本时，关联的控件就会获得焦点。这对于屏幕阅读器用户尤其重要，也方便了鼠标用户点击小尺寸的复选框或单选按钮。它的 <code>for</code> 属性应该与关联控件的 <code>id</code> 属性相匹配。</p><pre class="brush:language-html;toolbar:false;"><label for="username">用户名:</label>
<input type="text" id="username" name="username"></pre><p>最后，我们有 <code><button></code> 标签。虽然 <code><input type="submit"></code> 也能创建提交按钮，但 <code><button></code> 提供了更大的灵活性，你可以在按钮内部放置文本、图标甚至其他HTML元素。它的 <code>type</code> 属性可以设置为 <code>submit</code>（提交表单）、<code>reset</code>（重置表单）或 <code>button</code>（普通按钮，通常配合JavaScript使用）。</p><pre class="brush:language-html;toolbar:false;"><button type="submit">提交表单</button>
<button type="reset">重置</button></pre><p>此外，还有 <code><fieldset></code> 和 <code><legend></code> 标签，它们常被用来对相关的表单元素进行分组，提供语义上的组织结构和视觉上的边框。这对于长表单尤其有用，可以提高可读性和用户理解。</p><h3>如何提升HTML表单的用户体验与可访问性？</h3><p>表单设计不仅仅是把元素堆砌起来，更重要的是让用户用得舒服、用得明白。从我的经验来看，用户体验和可访问性是评价一个表单好坏的关键指标。</p><p>首先，<strong>标签（<code><label></code>）的正确使用是基石</strong>。我见过太多表单，标签只是简单的文本，没有与输入框通过 <code>for</code> 和 <code>id</code> 关联起来。这不仅让屏幕阅读器无法正确解读，也让用户在点击标签时无法聚焦到对应的输入框，尤其是在移动设备上，点击小小的复选框简直是噩梦。一个好的实践是确保每个输入控件（除了 <code>submit</code>、<code>reset</code> 等按钮）都有一个明确关联的 <code><label></code>。</p><p>其次，<strong>利用HTML5的语义化输入类型</strong>。<code>input type="email"</code>、<code>type="tel"</code>、<code>type="number"</code> 等不仅能提供浏览器层面的基本验证，还能在移动设备上唤起相应的键盘布局，极大地简化了用户输入。想象一下，输入邮箱时弹出一个带@符号的键盘，是不是比普通文本键盘方便多了？</p><p>再者，<strong>提供清晰的提示和反馈</strong>。<code>placeholder</code> 属性可以给输入框一个灰色的提示文本，告诉用户应该输入什么格式的内容。而当用户输入错误时，及时、明确的错误提示至关重要。这通常需要结合JavaScript来实现客户端验证，比如在用户离开输入框（<code>blur</code> 事件）时立即检查输入是否有效。</p><pre class="brush:language-html;toolbar:false;"><input type="email" name="userEmail" placeholder="请输入您的邮箱地址" required>
<span class="error-message" style="display:none;">邮箱格式不正确</span></pre><p>这里 <code>required</code> 属性也扮演了重要角色，它告诉浏览器这个字段是必填的，可以触发浏览器内置的验证提示。</p><p>最后，<strong>逻辑分组和焦点管理</strong>。使用 <code><fieldset></code> 和 <code><legend></code> 对相关联的表单元素进行分组，可以帮助用户理解表单的结构。同时，考虑表单元素的Tab键顺序，确保用户可以通过键盘顺畅地导航。对于复杂的表单，可以考虑使用 <code>tabindex</code> 属性来微调焦点顺序，尽管通常情况下浏览器默认的顺序已经足够好。</p><h3>HTML表单数据提交的常见方法和注意事项？</h3><p>当用户填完表单并点击提交，数据是如何发送到服务器的呢？这主要由 <code><form></code> 标签的 <code>method</code> 和 <code>action</code> 属性决定，但背后还有一些值得注意的细节。</p><p><code>action</code> 属性指定了表单数据将被发送到哪个URL。这个URL通常是一个服务器端的脚本或API端点，它会接收并处理这些数据。如果 <code>action</code> 属性为空或者省略，数据通常会提交到当前页面的URL。</p><p><code>method</code> 属性则定义了数据提交的HTTP方法，最常用的是 <code>GET</code> 和 <code>POST</code>。</p><ul><li><strong><code>GET</code> 方法</strong>：数据会以URL查询字符串的形式附加在 <code>action</code> URL后面。比如 <code>yourserver.com/submit?username=test&password=123</code>。它的主要特点是数据暴露在URL中，有长度限制，且不适合提交敏感信息。通常用于获取数据或进行搜索。</li><li><strong><code>POST</code> 方法</strong>：数据会放在HTTP请求体中发送，不会显示在URL里，也没有严格的长度限制。这是提交敏感信息（如密码）、大量数据或文件上传的首选方法。</li></ul><p>一个常见的陷阱是，如果你的表单包含文件上传字段（<code><input type="file"></code>），那么 <code><form></code> 标签必须额外设置 <code>enctype="multipart/form-data"</code> 属性，并且 <code>method</code> 必须是 <code>POST</code>。否则，文件数据将无法正确上传。我曾经就因为忘记这个 <code>enctype</code>，导致文件上传功能始终不工作，排查了很久才发现是这个小细节。</p><pre class="brush:language-html;toolbar:false;"><form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="myFile">
    <button type="submit">上传</button>
</form></pre><p>此外，<strong>客户端验证</strong>（通过HTML5属性如 <code>required</code>, <code>pattern</code> 或JavaScript）和<strong>服务器端验证</strong>是相辅相成的。客户端验证能即时反馈，提升用户体验，减少不必要的服务器请求。但服务器端验证是必不可少的，因为客户端验证可以被绕过，服务器必须对所有接收到的数据进行再次验证，以确保数据的完整性和安全性。</p><h3>除了基本元素，还有哪些进阶的表单功能或优化技巧？</h3><p>在掌握了表单的基本构成后，我们还可以探索一些更高级的功能和优化技巧，让表单更加强大和智能。</p><p><strong>HTML5新增的输入类型和属性</strong>：除了前面提到的 <code>email</code>、<code>tel</code> 等，还有 <code>url</code>、<code>search</code>、<code>range</code>（滑块）、<code>color</code>（颜色选择器）等。这些类型不仅提供了更好的语义，浏览器也会根据这些类型提供更友好的UI或验证。例如，<code>input type="range"</code> 就能直接生成一个滑块控件，而不需要借助JavaScript库。</p><p><strong><code>datalist</code> 标签</strong>：这个标签可以为 <code>input</code> 元素提供预设的建议列表，而不是强制用户从列表中选择。当用户在输入框中打字时，浏览器会显示一个下拉列表，包含与用户输入匹配的建议项。这在提供搜索建议或常用选项时非常有用。</p><pre class="brush:language-html;toolbar:false;"><input type="text" list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist></pre><p><strong>自定义验证和错误处理</strong>：虽然HTML5自带了一些验证，但很多时候我们需要更复杂的验证逻辑或更友好的错误提示。这时，JavaScript就派上用场了。我们可以监听 <code>input</code>、<code>change</code>、<code>blur</code> 等事件，实时检查用户输入，并根据验证结果动态显示错误信息。<code>setCustomValidity()</code> 方法是JavaScript中一个强大的工具，可以用来设置自定义的验证消息。</p><p><strong>AJAX表单提交</strong>：传统的表单提交会导致页面刷新，这在某些场景下会中断用户体验。通过JavaScript和<code>fetch</code> API或<code>XMLHttpRequest</code>对象，我们可以实现异步表单提交（AJAX）。这意味着表单数据可以在不刷新页面的情况下发送到服务器，服务器返回的数据也可以局部更新页面内容，从而提供更流畅的交互体验。这对于评论提交、点赞等功能非常常见。</p><p><strong>前端框架与组件库</strong>：在现代Web开发中，我们很少会从零开始手写所有表单逻辑。React、Vue、Angular等前端框架提供了更高级的表单处理机制，比如数据绑定、状态管理和组件化。同时，许多UI组件库（如Ant Design、Element UI、Bootstrap）也提供了美观且功能丰富的表单组件，可以大大提高开发效率和用户体验。这些库通常已经处理了验证、错误提示、布局等复杂问题。</p><p>这些进阶的技巧和工具，让我们能够构建出不仅仅是功能可用，而且用户体验优秀、开发效率更高的表单。</p><p>今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~</p>      </div>
        <div class="labsList">
                        <a href="javascript:;"  class="aLightGray" title="HTML5">HTML5</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="HTML表单">HTML表单</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年前  |  
                                       <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>
                          |  2年前  |  
                                       <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>
                          |  2年前  |  
                                       <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>
                          |  2年前  |  
                                       <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>
              </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>
                                              |  1天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/4720_new_0_1.html" class="aLightGray" title="cors">cors</a> ·
                                            <a href="/articletag/39980_new_0_1.html" class="aLightGray" title="跨域排查">跨域排查</a> ·
                                            <a href="/articletag/39981_new_0_1.html" class="aLightGray" title="浏览器网络">浏览器网络</a> ·
                                            <a href="/articletag/39982_new_0_1.html" class="aLightGray" title="接口联调">接口联调</a> ·
                                            <a href="javascript:;" class="aLightGray" title="前端">前端</a>
                                            <a href="javascript:;" class="aLightGray" title="cors">cors</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="Options">Options</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620039.html"  title="前端 CORS 预检失败排查流程：从请求头到网关响应" class="aBlack">前端 CORS 预检失败排查流程：从请求头到网关响应</a></div>
                  <div class="opt">
                      <span><i class="view"></i>422</span>
                      <span class="collectBtn user_collection" data-id="620039" 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/9935_new_0_1.html" class="aLightGray" title="sticky">sticky</a> ·
                                            <a href="/articletag/39972_new_0_1.html" class="aLightGray" title="布局排查">布局排查</a> ·
                                            <a href="/articletag/39973_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="Overflow">Overflow</a>
                                            <a href="javascript:;" class="aLightGray" title="position sticky">position sticky</a>
                                            <a href="javascript:;" class="aLightGray" title="滚动容器">滚动容器</a>
                                            <a href="javascript:;" class="aLightGray" title="吸顶失效">吸顶失效</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620035.html"  title="前端 position sticky 不生效排查：从滚动容器到 overflow 限制" class="aBlack">前端 position sticky 不生效排查：从滚动容器到 overflow 限制</a></div>
                  <div class="opt">
                      <span><i class="view"></i>449</span>
                      <span class="collectBtn user_collection" data-id="620035" 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天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> ·
                                            <a href="/articletag/39948_new_0_1.html" 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="IntersectionObserver">IntersectionObserver</a>
                                            <a href="javascript:;" class="aLightGray" title="LCP">LCP</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620015.html"  title="前端图片懒加载实战：首屏 LCP 与滚动加载完整流程" class="aBlack">前端图片懒加载实战：首屏 LCP 与滚动加载完整流程</a></div>
                  <div class="opt">
                      <span><i class="view"></i>105</span>
                      <span class="collectBtn user_collection" data-id="620015" 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天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> ·
                                            <a href="/articletag/39947_new_0_1.html" class="aLightGray" title="表单校验">表单校验</a> ·
                                            <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>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620013.html"  title="前端表单联动校验失效排查：旧状态、重复提交和提交锁" class="aBlack">前端表单联动校验失效排查：旧状态、重复提交和提交锁</a></div>
                  <div class="opt">
                      <span><i class="view"></i>285</span>
                      <span class="collectBtn user_collection" data-id="620013" 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天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> ·
                                            <a href="/articletag/39783_new_0_1.html" class="aLightGray" title="虚拟列表">虚拟列表</a> ·
                                            <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>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/620012.html"  title="前端长列表虚拟滚动实战：从可视区计算到滚动流畅" class="aBlack">前端长列表虚拟滚动实战：从可视区计算到滚动流畅</a></div>
                  <div class="opt">
                      <span><i class="view"></i>111</span>
                      <span class="collectBtn user_collection" data-id="620012" 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天前  |  
                                            <a href="/articletag/215_new_0_1.html" class="aLightGray" title="定时器">定时器</a> ·
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/39721_new_0_1.html" class="aLightGray" title="性能排查">性能排查</a> ·
                                            <a href="/articletag/39918_new_0_1.html" class="aLightGray" title="接口请求">接口请求</a> ·
                                            <a href="/articletag/39934_new_0_1.html" class="aLightGray" title="轮询">轮询</a> ·
                                            <a href="/articletag/39935_new_0_1.html" class="aLightGray" title="setInterval">setInterval</a> ·
                                            <a href="javascript:;" class="aLightGray" title="setInterval">setInterval</a>
                                            <a href="javascript:;" class="aLightGray" title="页面可见性">页面可见性</a>
                                            <a href="javascript:;" class="aLightGray" title="clearInterval">clearInterval</a>
                                            <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/619999.html"  title="前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查" class="aBlack">前端轮询接口越打越多怎么办：从重复定时器到清理机制一步步排查</a></div>
                  <div class="opt">
                      <span><i class="view"></i>490</span>
                      <span class="collectBtn user_collection" data-id="619999" 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天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/39919_new_0_1.html" class="aLightGray" title="状态管理">状态管理</a> ·
                                            <a href="/articletag/39920_new_0_1.html" class="aLightGray" title="表单提交">表单提交</a> ·
                                            <a href="/articletag/39921_new_0_1.html" class="aLightGray" title="防重复提交">防重复提交</a> ·
                                            <a href="/articletag/39922_new_0_1.html" 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="按钮锁定">按钮锁定</a>
                                            <a href="javascript:;" class="aLightGray" title="幂等key">幂等key</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/619992.html"  title="前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key" class="aBlack">前端表单重复提交治理完整流程：按钮锁定、请求去重和幂等 key</a></div>
                  <div class="opt">
                      <span><i class="view"></i>253</span>
                      <span class="collectBtn user_collection" data-id="619992" 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天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/39916_new_0_1.html" class="aLightGray" title="搜索框">搜索框</a> ·
                                            <a href="/articletag/39917_new_0_1.html" class="aLightGray" title="AbortController">AbortController</a> ·
                                            <a href="/articletag/39918_new_0_1.html" class="aLightGray" title="接口请求">接口请求</a> ·
                                            <a href="/articletag/39919_new_0_1.html" class="aLightGray" title="状态管理">状态管理</a> ·
                                            <a href="javascript:;" class="aLightGray" title="Fetch">Fetch</a>
                                            <a href="javascript:;" class="aLightGray" title="AbortController">AbortController</a>
                                            <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/619990.html"  title="前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底" class="aBlack">前端搜索结果倒退怎么办：AbortController 取消旧请求和序号兜底</a></div>
                  <div class="opt">
                      <span><i class="view"></i>295</span>
                      <span class="collectBtn user_collection" data-id="619990" 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天前  |  
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/729_new_0_1.html" class="aLightGray" title="性能优化">性能优化</a> ·
                                            <a href="/articletag/34073_new_0_1.html" class="aLightGray" title="cls">cls</a> ·
                                            <a href="/articletag/39909_new_0_1.html" class="aLightGray" title="懒加载">懒加载</a> ·
                                            <a href="/articletag/39910_new_0_1.html" class="aLightGray" title="Core Web Vitals">Core Web Vitals</a> ·
                                            <a href="javascript:;" class="aLightGray" title="前端">前端</a>
                                            <a href="javascript:;" class="aLightGray" title="图片懒加载">图片懒加载</a>
                                            <a href="javascript:;" class="aLightGray" title="IntersectionObserver">IntersectionObserver</a>
                                            <a href="javascript:;" class="aLightGray" title="CLS">CLS</a>
                                            <a href="javascript:;" class="aLightGray" title="布局稳定">布局稳定</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/619979.html"  title="前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查" class="aBlack">前端图片懒加载布局抖动治理完整流程：占位比例、按需加载和 CLS 复查</a></div>
                  <div class="opt">
                      <span><i class="view"></i>128</span>
                      <span class="collectBtn user_collection" data-id="619979" 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="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/277_new_0_1.html" class="aLightGray" title="消息队列">消息队列</a> ·
                                            <a href="/articletag/1017_new_0_1.html" class="aLightGray" title="websocket">websocket</a> ·
                                            <a href="/articletag/39899_new_0_1.html" class="aLightGray" title="实时通信">实时通信</a> ·
                                            <a href="/articletag/39900_new_0_1.html" class="aLightGray" title="断线重连">断线重连</a> ·
                                            <a href="javascript:;" class="aLightGray" title="前端">前端</a>
                                            <a href="javascript:;" class="aLightGray" title="websocket">websocket</a>
                                            <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/619973.html"  title="前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发" class="aBlack">前端 WebSocket 断线重连完整流程：心跳检测、退避重试和消息补发</a></div>
                  <div class="opt">
                      <span><i class="view"></i>365</span>
                      <span class="collectBtn user_collection" data-id="619973" 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="/articletag/228_new_0_1.html" class="aLightGray" title="工程化">工程化</a> ·
                                            <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> ·
                                            <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> ·
                                            <a href="/articletag/39876_new_0_1.html" class="aLightGray" title="弹窗">弹窗</a> ·
                                            <a href="javascript:;" class="aLightGray" title="前端">前端</a>
                                            <a href="javascript:;" class="aLightGray" title="z-index">z-index</a>
                                            <a href="javascript:;" class="aLightGray" title="遮罩层">遮罩层</a>
                                            <a href="javascript:;" class="aLightGray" title="stacking context">stacking context</a>
                                            <a href="javascript:;" class="aLightGray" title="Portal">Portal</a>
                                            <a href="javascript:;" class="aLightGray" title="弹窗层级">弹窗层级</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/619962.html"  title="前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范" class="aBlack">前端弹窗层级治理工作流：从 z-index 混乱到 Portal 容器规范</a></div>
                  <div class="opt">
                      <span><i class="view"></i>350</span>
                      <span class="collectBtn user_collection" data-id="619962" 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="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> ·
                                            <a href="/articletag/4701_new_0_1.html" class="aLightGray" title="javascript">javascript</a> ·
                                            <a href="/articletag/39873_new_0_1.html" class="aLightGray" title="URL参数">URL参数</a> ·
                                            <a href="/articletag/39874_new_0_1.html" class="aLightGray" title="列表筛选">列表筛选</a> ·
                                            <a href="/articletag/39875_new_0_1.html" 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="history.replaceState">history.replaceState</a>
                                            <a href="javascript:;" class="aLightGray" title="URLSearchParams">URLSearchParams</a>
                                            <a href="javascript:;" class="aLightGray" title="刷新还原">刷新还原</a>
                      </div>
                  <div class="tit lineOverflow"><a href="/article/619961.html"  title="前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查" class="aBlack">前端筛选条件刷新后丢失怎么办：从内存状态到 URL 参数一步步排查</a></div>
                  <div class="opt">
                      <span><i class="view"></i>348</span>
                      <span class="collectBtn user_collection" data-id="619961" 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?3dc5666f6478c7bf39cd5c91e597423d";
        hm.async = true;
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>
</html>