HTML中常见input类型有哪些？input标签详解

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《HTML中常见的input类型有哪些？input标签详解》，涉及到，有需要的可以收藏一下

最常用的input类型包括text、password、email、number、checkbox、radio和submit；2. 最佳实践分别为：text类型应使用placeholder提示、限制maxlength并避免替代label，password类型需配合HTTPS和合理的autocomplete设置，email和number类型应利用浏览器内置验证并设置min/max/step等属性，checkbox和radio必须关联label以提升可访问性且radio需共用name属性，submit按钮应明确文案并在提交后禁用以防重复；3. HTML5新增类型如email、url、tel、date、color等通过移动端优化键盘、原生格式校验和内置选择器提升了用户体验与数据质量；4. 响应式设计中应使输入框自适应宽度但限制最大宽度，标签与输入框在小屏上下堆叠，增大触摸目标，合理利用type属性触发专用键盘，并通过fieldset分组和内联错误提示优化交互；5. 所有input类型的使用都应遵循渐进增强原则，在不支持的旧浏览器中优雅降级为text类型，确保基本功能可用，最终实现跨设备一致、高效且可访问的表单体验。

HTML的input元素是构建用户交互表单的核心，它提供了多种类型来收集不同格式的用户数据，比如文本、密码、数字、日期、文件上传，甚至是颜色选择。这些类型确保了用户输入的数据能被浏览器初步理解和验证，是提升用户体验和数据质量的基石。

解决方案

要说HTML的input类型，那可真是个大家族，从最基础的文本框，到HTML5时代涌现的各种语义化新成员，它们各自承担着不同的数据收集任务。理解并恰当使用它们，是前端开发中一个非常基础但也非常重要的环节。

最常见的，我们肯定会想到type="text"。这是万能的文本输入框，几乎所有需要用户输入普通文本的地方都能看到它的身影。但它的兄弟姐妹们也同样重要，比如type="password"，它会自动隐藏用户输入的内容，这是出于安全考量，但它本身并不能加密数据，只是视觉上的隐藏。

type="submit"和type="reset"是表单提交和重置的按钮，它们行为很明确。而type="button"则更灵活，它只是一个普通的按钮，行为需要JavaScript来定义。

对于选择类的，type="checkbox"是多选框，用户可以勾选多个选项；type="radio"则是单选按钮，通常配合相同的name属性使用，确保用户只能选择其中一个。

文件上传则需要type="file"，它会打开一个文件选择对话框。而type="hidden"则是个幕后英雄，它不显示在页面上，但可以用来存储一些需要随表单提交但用户不需要看到或修改的数据，比如一个ID。

HTML5带来了很多语义化的新类型，极大地提升了用户体验和内置验证能力。比如：

• type="email"：用于输入电子邮件地址，浏览器会进行基本的格式校验，移动设备上还会弹出专门的键盘。
• type="url"：用于输入网址，同样有格式校验。
• type="tel"：用于输入电话号码，移动设备会弹出数字键盘。
• type="number"：用于输入数字，通常带有上下箭头，可以设置min、max、step属性。
• type="range"：滑块形式的数字选择器，适合选择一个范围内的值。
• type="date"、type="month"、type="week"、type="time"、type="datetime-local"：这些都是日期和时间相关的输入框，现代浏览器会提供原生的日期/时间选择器，非常方便。
• type="color"：颜色选择器，点击后会弹出系统级的颜色选择界面。
• type="search"：用于搜索框，一些浏览器会为其提供清除按钮等特殊样式。

这些新类型不仅让表单语义更清晰，还减少了我们编写JavaScript进行客户端验证的工作量，虽然我们通常还是会加一层服务器端验证。

用户在实际开发中，最常用到哪些input类型？它们各自有什么最佳实践？

在日常开发中，我们与input元素打交道最多的是text、password、email、number、checkbox、radio和submit。这些几乎是每个表单的“常客”。

• type="text": 这是最基础的文本输入，比如用户名、标题、地址等。

  • 最佳实践: 善用placeholder属性提供输入提示，但不要把它当做标签；maxlength限制输入长度；autocomplete="off"在某些敏感输入（如一次性验证码）时禁用浏览器自动填充。如果需要多行文本，考虑使用</code>而不是<code>input</code>。</li></ul></li><li><p><strong><code>type="password"</code></strong>: 密码输入框。</p><ul><li><strong>最佳实践</strong>: 务必配合HTTPS使用，确保数据传输安全。<code>autocomplete="new-password"</code>或<code>autocomplete="current-password"</code>可以帮助浏览器更好地管理用户的密码，但如果出于安全考虑（比如某些内部系统），也可以设置为<code>autocomplete="off"</code>。不要自己“发明”密码隐藏/显示功能，优先使用浏览器或框架提供的安全实践。</li></ul></li><li><p><strong><code>type="email"</code></strong>: 电子邮件地址。</p><ul><li><strong>最佳实践</strong>: 利用浏览器自带的格式验证，配合<code>required</code>属性强制用户输入。移动端会自动弹出包含“@”符号的键盘，极大地提升了输入效率。</li></ul></li><li><p><strong><code>type="number"</code></strong>: 数字输入。</p><ul><li><strong>最佳实践</strong>: 设置<code>min</code>和<code>max</code>属性来限制可接受的数值范围，<code>step</code>属性定义增量步长。这不仅提供了用户指导，也帮助浏览器进行初步验证。例如，一个年龄输入框，<code>min="1"</code>，<code>max="120"</code>就很有意义。</li></ul></li><li><p><strong><code>type="checkbox"</code> 和 <code>type="radio"</code></strong>: 复选框和单选按钮。</p><ul><li><strong>最佳实践</strong>: 它们必须要有<code>name</code>属性。<code>checkbox</code>的<code>name</code>可以相同也可以不同，相同则表示它们属于同一组，但各自独立；<code>radio</code>的<code>name</code>必须相同，才能实现互斥选择。务必使用<code><label></code>元素与它们关联，通过<code>for</code>属性指向<code>input</code>的<code>id</code>，这样点击文本也能选中/取消选中，提升用户体验和可访问性。</li></ul></li><li><p><strong><code>type="submit"</code></strong>: 提交表单的按钮。</p><ul><li><strong>最佳实践</strong>: 按钮上的文字应该清晰地表达其功能，比如“提交”、“保存”、“注册”。在表单提交后，最好禁用按钮以防止重复提交，直到服务器响应。</li></ul></li></ul><h3>HTML5引入的新<code>input</code>类型，如何提升用户体验和数据验证？</h3><p>HTML5对<code>input</code>类型的扩展，在我看来，是前端开发领域一个非常重要的进步，它让表单变得更“智能”也更“友好”。这些新类型不仅仅是语义上的改变，更带来了实实在在的用户体验提升和内置的数据验证能力。</p><p>拿<code>type="email"</code>、<code>type="url"</code>、<code>type="tel"</code>来说，它们最直观的好处就是<strong>移动端键盘的优化</strong>。当用户在手机上点击这些输入框时，系统会自动弹出针对该类型优化的键盘，比如<code>email</code>会带上“@”和“.com”快捷键，<code>tel</code>直接是数字键盘。这大大减少了用户切换键盘的麻烦，输入效率自然就高了。</p><p>其次是<strong>原生的数据格式验证</strong>。当<code>input</code>的<code>type</code>设置为<code>email</code>或<code>url</code>时，浏览器会自带一套基础的正则表达式进行格式检查。如果你再给它加上<code>required</code>属性，那么在用户尝试提交表单时，如果输入不符合规范，浏览器会显示一个默认的错误提示，阻止表单提交。这省去了我们编写大量客户端JavaScript验证代码的功夫，虽然通常这只是第一层防御，服务器端验证依然不可或缺。</p><p><code>type="date"</code>、<code>type="time"</code>、<code>type="datetime-local"</code>等日期时间选择器，更是解决了长期以来困扰开发者的痛点。以前我们要么依赖第三方JavaScript库，要么自己手写复杂的日期选择逻辑。现在，浏览器原生提供了美观且功能完善的日期/时间选择界面，用户可以直接点击选择，避免了手动输入可能造成的格式错误，极大地提升了交互的便捷性。想象一下，不用再费劲去解析用户输入的“2023-01-01”还是“01/01/2023”了。</p><p><code>type="color"</code>则是一个小惊喜，它让用户可以通过一个简单的点击就唤起系统的颜色选择器，这在需要用户选择主题颜色或绘图应用中非常实用。而<code>type="range"</code>则提供了一个直观的滑块界面，非常适合选择一个范围内的数值，比如音量大小、亮度调节等，比直接输入数字更符合直觉。</p><p>这些HTML5的新类型，在不支持它们的旧浏览器中，通常会优雅地降级为<code>type="text"</code>，所以我们不用担心兼容性问题导致功能完全失效，只是会失去一些高级特性和验证能力。这正是渐进增强的体现。</p><h3>面对不同设备的屏幕尺寸和交互习惯，如何优化<code>input</code>表单的响应式设计？</h3><p>设计表单时，我们不能只盯着桌面端的大屏幕。现在大家手机不离手，表单在小屏幕上的表现至关重要。响应式设计在这里不仅仅是调整大小，更是要考虑用户在触摸屏上的交互习惯。</p><p>首先，最基础的，确保你的表单元素能够<strong>自适应宽度</strong>。通常我们会给<code>input</code>、<code>textarea</code>设置<code>width: 100%;</code>或<code>max-width: 100%;</code>，让它们能够填满父容器的宽度，避免在小屏幕上出现水平滚动条。但同时，也要注意不要让它们在超大屏幕上拉得太长，那样阅读和输入体验会下降，所以一个<code>max-width</code>或者限制表单容器的宽度是很有必要的。</p><p><strong>标签（Label）与输入框的布局</strong>在响应式设计中尤为关键。在桌面端，标签和输入框可以并排显示，但在手机上，最好让标签独立一行，然后输入框再占满下一行。这样每个输入区域都足够宽敞，方便用户点击。别忘了使用<code>for</code>属性将<code><label></code>和<code>input</code>的<code>id</code>关联起来，这不仅对辅助技术友好，也让用户点击标签文字就能激活输入框，增大了触摸目标。</p><p><strong>选择合适的<code>input</code>类型</strong>是响应式表单设计中一个被低估的优化点。前面提到<code>type="email"</code>、<code>type="tel"</code>、<code>type="number"</code>等，它们在移动设备上会自动调用优化过的键盘。这不仅仅是方便，更是防止用户输入错误，提升了整体的完成率。比如，一个电话号码输入框，如果你用<code>type="text"</code>，用户可能输入字母、特殊符号；但用了<code>type="tel"</code>，系统就只提供数字键盘，从源头上减少了错误。</p><p><strong>输入框的高度和字体大小</strong>也需要调整。在触摸屏上，太小的输入框很难被准确点击。适当增加<code>padding</code>，让输入框的高度至少达到40-48像素，字体大小保持在16px以上，这样用户无需缩放页面就能清晰阅读和舒适点击。</p><p>对于复杂的表单，可以考虑使用<strong>分组</strong>。用<code><fieldset></code>和<code><legend></code>将相关的输入项组合起来，这样在视觉上更清晰，也方便用户理解表单结构。在小屏幕上，这种分组可以帮助用户一次只关注一部分信息，减少认知负担。</p><p>最后，<strong>错误提示</strong>也要是响应式的。当用户输入错误时，提示信息应该清晰可见，并且不影响其他元素的布局。避免使用弹出框（alert），而是直接在输入框下方或旁边显示错误信息。</p><p>总的来说，响应式表单设计是一个综合考量，它关乎布局、交互、可访问性，以及对不同设备特性的理解和利用。最终目标都是让用户在任何设备上都能轻松、准确地完成信息输入。</p><p>以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。</p> </div> <div class="labsList"> </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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619691.html" title="CSS数字显示统一技巧，OpenType特性应用方法" class="aBlack">CSS数字显示统一技巧，OpenType特性应用方法</a></div> <div class="opt"> <span><i class="view"></i>209</span> <span class="collectBtn user_collection" data-id="619691" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619689.html" title="PerformanceAPI全生命周期预警指南" class="aBlack">PerformanceAPI全生命周期预警指南</a></div> <div class="opt"> <span><i class="view"></i>147</span> <span class="collectBtn user_collection" data-id="619689" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619683.html" title="一个按钮控制多个状态的实现方式" class="aBlack">一个按钮控制多个状态的实现方式</a></div> <div class="opt"> <span><i class="view"></i>360</span> <span class="collectBtn user_collection" data-id="619683" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619679.html" title="CSSGrid子元素排序技巧分享" class="aBlack">CSSGrid子元素排序技巧分享</a></div> <div class="opt"> <span><i class="view"></i>155</span> <span class="collectBtn user_collection" data-id="619679" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619677.html" title="FIMO支持透明度设置吗？" class="aBlack">FIMO支持透明度设置吗？</a></div> <div class="opt"> <span><i class="view"></i>393</span> <span class="collectBtn user_collection" data-id="619677" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619653.html" title="Web组件开发：CustomElements实战教程" class="aBlack">Web组件开发：CustomElements实战教程</a></div> <div class="opt"> <span><i class="view"></i>243</span> <span class="collectBtn user_collection" data-id="619653" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619650.html" title="CSS无限循环背景动画技巧" class="aBlack">CSS无限循环背景动画技巧</a></div> <div class="opt"> <span><i class="view"></i>116</span> <span class="collectBtn user_collection" data-id="619650" 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>   |  6天前  |   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="动画">动画</a> </div> <div class="tit lineOverflow"><a href="/article/619644.html" title="CSS文字大小动画不自然怎么优化？" class="aBlack">CSS文字大小动画不自然怎么优化？</a></div> <div class="opt"> <span><i class="view"></i>126</span> <span class="collectBtn user_collection" data-id="619644" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619634.html" title="清除浮动空白间距的实用技巧" class="aBlack">清除浮动空白间距的实用技巧</a></div> <div class="opt"> <span><i class="view"></i>430</span> <span class="collectBtn user_collection" data-id="619634" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619632.html" title="JavaScript前端安全核心问题有哪些？" class="aBlack">JavaScript前端安全核心问题有哪些？</a></div> <div class="opt"> <span><i class="view"></i>109</span> <span class="collectBtn user_collection" data-id="619632" 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>   |  6天前  |   <a href="javascript:;" class="aLightGray" title="html">html</a> </div> <div class="tit lineOverflow"><a href="/article/619631.html" title="自定义图片提交按钮，INPUTTYPE设为IMAGE" class="aBlack">自定义图片提交按钮，INPUTTYPE设为IMAGE</a></div> <div class="opt"> <span><i class="view"></i>179</span> <span class="collectBtn user_collection" data-id="619631" 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>   |  6天前  |   </div> <div class="tit lineOverflow"><a href="/article/619622.html" title="CSS文字压到图片上怎么解决？z-index调整方法" class="aBlack">CSS文字压到图片上怎么解决？z-index调整方法</a></div> <div class="opt"> <span><i class="view"></i>126</span> <span class="collectBtn user_collection" data-id="619622" 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 --> <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>