前端技术文章-Golang学习网

文章 · 前端 | 3个月前 | 闭包

闭包是函数与其词法环境的组合，使函数可访问外部变量。它基于作用域链机制，如outerFunction内的innerFunction访问outerVar；应用于数据封装（createCounter）、模块创建（IIFE模块）、事件回调（handleClick）；可能因引用大型对象导致内存泄漏，需及时解除引用；与作用域链紧密相关，延长了变量生命周期；应避免过度使用，注意性能和调试，可用开发者工具、debugger或console.log调试闭包。

191 收藏

文章 · 前端 | 3个月前 |

HTML中使用CSS的font-weight属性可以控制文字的粗细程度。该属性接受多种值，包括关键字和数值，用于定义字体的粗细。1. 关键字值normal：默认值，表示正常粗细。bold：加粗。bolder：比父元素更粗。lighter：比父元素更细。示例：p { font-weight: bold; /* 文字加粗 */ }2. 数值值100 到 900 之间的整数，表示不同的粗细级别。数值

应使用数值写法（如900）替代bold，因数值更精准可控，可突破字体仅支持400/700的限制，实现更强加粗；但前提是字体文件必须包含对应字重，否则浏览器将降级显示。

303 收藏

文章 · 前端 | 3个月前 |

SVG矢量图如何实现高清无损显示

根本原因是浏览器对<img>加载的SVG进行光栅化处理而失去矢量特性；唯一可靠解法是内联SVG并配合viewBox与相对宽高实现原生缩放。

148 收藏

文章 · 前端 | 3个月前 | html html函数

构建评论区的表单时，通常使用 HTML 的

标签来包裹表单元素，其中多行文本域（

）用于用户输入较长的评论内容。以下是基本结构和属性设置说明：✅ 基本表单结构示例<form action="/submit-comment" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="</a></div>
                                <a href="/article/598817.html" class="img_box"><img src="/uploads/20260513/17786583786a042c4a5fad3.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="构建评论区的表单时，通常使用 HTML 的 <form> 标签来包裹表单元素，其中多行文本域（<textarea>）用于用户输入较长的评论内容。以下是基本结构和属性设置说明：✅ 基本表单结构示例<form action="/submit-comment" method="post">
  <label for="name">姓名：</label>
  <input type="text" id=""></a>
                                <div class="cont lineFourOverflow">答案：使用form标签构建评论区，通过textarea实现多行文本输入，设置name、rows、cols、placeholder、maxlength等属性优化交互，并结合CSS提升用户体验。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>485</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598817"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598800.html" class="aBlack">HTML5视频静音自动播放实现方法如下：使用 muted 属性：在 <video> 标签中添加 muted 属性，使视频默认静音。使用 autoplay 属性：添加 autoplay 属性以实现自动播放。可选：使用 JavaScript 控制：通过 JavaScript 设置 volume 为 0 并调用 play() 方法。示例代码：<video autoplay muted>
  <sourc</a></div>
                                <a href="/article/598800.html" class="img_box"><img src="/uploads/20260513/17786576296a04295d60666.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML5视频静音自动播放实现方法如下：使用 muted 属性：在 <video> 标签中添加 muted 属性，使视频默认静音。使用 autoplay 属性：添加 autoplay 属性以实现自动播放。可选：使用 JavaScript 控制：通过 JavaScript 设置 volume 为 0 并调用 play() 方法。示例代码：<video autoplay muted>
  <sourc"></a>
                                <div class="cont lineFourOverflow">Chrome等现代浏览器要求视频自动播放必须同时满足autoplay、muted和playsinline属性，否则因策略限制无法播放；用户手势是解除静音的唯一合规时机。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>322</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598800"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598799.html" class="aBlack">HTML中使用:has伪类选择父元素方法</a></div>
                                <a href="/article/598799.html" class="img_box"><img src="/uploads/20260513/17786576066a042946b3be4.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中使用:has伪类选择父元素方法"></a>
                                <div class="cont lineFourOverflow">:has()是CSS原生关系伪类，能基于子/兄弟元素状态反向匹配并样式化祖先元素（如div:has(.error)选中含.error的div），实现“父级条件样式”，但并非真正选择DOM父节点；它不支持嵌套、伪元素及部分动态伪类，Chrome105+/Firefox121+/Safari15.4+支持，性能开销较大，适用于表单验证等低频响应场景。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>154</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598799"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598791.html" class="aBlack">CSS实现可拖拽调整大小的面板，结合resize与变量同步</a></div>
                                <a href="/article/598791.html" class="img_box"><img src="/uploads/20260513/17786572036a0427b3c7b4b.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS实现可拖拽调整大小的面板，结合resize与变量同步"></a>
                                <div class="cont lineFourOverflow">resize是浏览器原生行为，直接写内联样式但不触发事件，JS无法自动感知变化；必须通过mouseup或requestAnimationFrame主动读取offsetWidth并同步到CSS变量。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>357</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598791"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598789.html" class="aBlack">HTML中ol罗马数字编号设置方法</a></div>
                                <a href="/article/598789.html" class="img_box"><img src="/uploads/20260513/17786570846a04273cefbd5.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中ol罗马数字编号设置方法"></a>
                                <div class="cont lineFourOverflow">type="i"生成小写罗马数字（i、ii、iii），type="I"生成大写（I、II、III）；二者仅大小写差异，HTML5中已过时，推荐用CSS的lower-roman/upper-roman替代。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>329</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598789"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598788.html" class="aBlack">Element.insertAdjacentHTML比innerHTML更高效的原因在于它不会破坏现有的DOM元素，从而避免了重新解析和重建整个DOM结构的开销。以下是如何使用 element.insertAdjacentHTML 比 innerHTML 更高效地插入HTML的详细说明：1. 基本用法element.insertAdjacentHTML(position, htmlString);</a></div>
                                <a href="/article/598788.html" class="img_box"><img src="/uploads/20260513/17786570706a04272e0daa2.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="Element.insertAdjacentHTML比innerHTML更高效的原因在于它不会破坏现有的DOM元素，从而避免了重新解析和重建整个DOM结构的开销。以下是如何使用 element.insertAdjacentHTML 比 innerHTML 更高效地插入HTML的详细说明：1. 基本用法element.insertAdjacentHTML(position, htmlString);"></a>
                                <div class="cont lineFourOverflow">insertAdjacentHTML比innerHTML快，因其跳过序列化现有DOM的步骤，直接解析插入HTML字符串，不重建原有子节点；实测插入100条列表项时快2–4倍。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>483</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598788"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598783.html" class="aBlack">HTML中param参数配置详解</a></div>
                                <a href="/article/598783.html" class="img_box"><img src="/uploads/20260513/17786568296a04263dd8a8b.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中param参数配置详解"></a>
                                <div class="cont lineFourOverflow">param标签是为object等嵌入对象提供初始化参数的HTML元素，仅在对象实例化时生效，name和value属性成对定义参数，HTML5中已弃用type等旧属性，且该元素不参与渲染、不可动态修改。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>488</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598783"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598779.html" class="aBlack">设置 shape-outside 后文字环绕异常，通常是因为未同步设置 float 属性。在 CSS 中，shape-outside 需要与 float 配合使用才能实现文字环绕效果。如果只设置了 shape-outside 而没有设置 float，浏览器可能无法正确识别元素的浮动位置，导致文字环绕出现异常或不生效。原因分析：shape-outside 用于定义元素的形状，从而影响文本的环绕方式。</a></div>
                                <a href="/article/598779.html" class="img_box"><img src="/uploads/20260513/17786567046a0425c06c704.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="设置 shape-outside 后文字环绕异常，通常是因为未同步设置 float 属性。在 CSS 中，shape-outside 需要与 float 配合使用才能实现文字环绕效果。如果只设置了 shape-outside 而没有设置 float，浏览器可能无法正确识别元素的浮动位置，导致文字环绕出现异常或不生效。原因分析：shape-outside 用于定义元素的形状，从而影响文本的环绕方式。"></a>
                                <div class="cont lineFourOverflow">shape-outside必须与float同时使用才生效，缺一则无效；需配合width、height、display:block，并确保父容器未创建BFC（如flex/grid/overflow:hidden），否则文字不环绕。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>417</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598779"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598768.html" class="aBlack">移动端Tabs滑动指示器动画实现方法</a></div>
                                <a href="/article/598768.html" class="img_box"><img src="/uploads/20260513/17786561546a04239a3677a.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="移动端Tabs滑动指示器动画实现方法"></a>
                                <div class="cont lineFourOverflow">滑动指示器用transform而不用left或margin-left，因其触发硬件加速、动画更流畅；后者频繁触发重排，低端Android易卡顿；推荐用translateX和width过渡，配合requestAnimationFrame测量与CSS自定义属性动态计算位置。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>350</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598768"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598759.html" class="aBlack">HTML实现CSS撕裂效果详解</a></div>
                                <a href="/article/598759.html" class="img_box"><img src="/uploads/20260513/17786556546a0421a6d86fe.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML实现CSS撕裂效果详解"></a>
                                <div class="cont lineFourOverflow">clip-path是实现撕裂边缘最轻量方案，用polygon定义长短错落的锯齿坐标，需闭合路径并兼容旧Safari；叠加透明PNG撕裂图可增强质感，需精准定位、禁用重复；伪元素::before偏移叠加可模拟厚度感；移动端需注意性能与格式优化。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>238</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598759"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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="javascript:;" class="aLightGray" title="装饰器">装饰器</a>
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/598757.html" class="aBlack">JavaScript装饰器与元数据应用</a></div>
                                <a href="/article/598757.html" class="img_box"><img src="/uploads/20260513/17786556226a0421864c062.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript装饰器与元数据应用"></a>
                                <div class="cont lineFourOverflow">装饰器是JavaScript/TypeScript中用于扩展类、方法等行为的高阶函数，通过@expression语法在运行时修改目标结构。支持类、方法、属性、访问器和参数五种类型，常用于日志、权限、依赖注入等场景。结合reflect-metadata库可实现元数据编程，使用Reflect.metadata定义和读取键值对信息，TypeScript还支持design:type等设计时类型元数据。典型应用如依赖注入：通过@Inject装饰参数并利用emitDecoratorMetadata生成类型信息，容器按</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>274</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598757"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <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 lineTwoOverflow"><a href="/article/598755.html" class="aBlack">BEM提升CSS自解释性，减少组件文档依赖</a></div>
                                <a href="/article/598755.html" class="img_box"><img src="/uploads/20260513/17786554996a04210b3ff94.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="BEM提升CSS自解释性，减少组件文档依赖"></a>
                                <div class="cont lineFourOverflow">BEM通过block__element--modifier结构使类名自带三层语义：归属、角色、状态，可替代多数注释；Element命名需避免动词与样式词，强调角色与状态解耦；第三方组件应封装Wrapper以保持语义归属清晰。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>486</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="598755"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_new_0_312.html" class="prevPage on"></a> <a href="/articlelist/88_new_0_1.html">1</a><a href="/articlelist/88_new_0_312.html">312</a><a class="currentPage">313</a><a href="/articlelist/88_new_0_314.html">314</a><a href="/articlelist/88_new_0_500.html">500</a> <a href="/articlelist/88_new_0_314.html" class="nextPage on"></a></div>    </div>
</div>
<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>

strbiaoqian+=fumo+$(this).html()+'</a>';
        // if(flaga<=8){
        // }
        flaga++;
    });
    strbiaoqian+=zhankaihtml;
    allhtml+=shouqihtml;
    $(".userInfo1").html(strbiaoqian);
    // function zhankaiflagclick(obj){
    //     if($(obj).html()=='展开<i></i>'){
    //         $(obj).html('收起<i></i>');
    //         $(obj).addClass('zhankai');
    //         $(".userInfo1").html(allhtml);
    //     }else{
    //         $(obj).html("展开<i></i>");
    //         $(obj).removeClass('zhankai');
    //         $(".userInfo1").html(strbiaoqian);
    //     }
    // }

$('.timeLimitBox').click(function(){
        $(this).toggleClass('hover')
    })
</script>
</body>
</html>