前端技术文章-Golang学习网

文章 · 前端 | 4星期前 |

答案：JavaScript跨平台开发需解决浏览器兼容性问题，不同浏览器对语法、API和事件模型支持不一，尤其在旧版IE、Safari和移动端表现明显。应识别常见问题如ES6+特性、DOM方法、新API在老环境缺失，事件模型差异等；借助Babel转译、Webpack配合Polyfill补充缺失功能，通过Autoprefixer与Browserslist配置目标环境；运行时采用特性检测、添加polyfill、避免依赖特定行为，并注意Android旧版WebView差异；合理构建流程加运行时兜底可保障稳定运行。

391 收藏

文章 · 前端 | 4星期前 |

Modernizr检测浏览器特性方法详解

Modernizr检测具体特性而非HTML5整体支持，需同步加载于其他脚本前，通过Modernizr对象属性或html类名使用结果，但部分检测项（如serviceworker、geolocation）仅表静态存在，不保证运行时可用，须结合实际API调用验证。

308 收藏

文章 · 前端 | 4星期前 |

Vite Sass全局变量注入教程

additionalData不生效主因是后缀与配置不匹配，应统一用.scss后缀并配css.preprocessorOptions.scss；运行时换肤需借力CSS自定义属性与JS动态设置，而非依赖Sass编译期注入。

256 收藏

文章 · 前端 | 4星期前 | 闭包

闭包详解与实战应用技巧

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

191 收藏

文章 · 前端 | 4星期前 |

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

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

303 收藏

文章 · 前端 | 4星期前 |

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

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

148 收藏

文章 · 前端 | 4星期前 | 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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                                          |  4星期前  |  
                                    </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=""></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>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_new_90_308.html" class="prevPage on"></a> <a href="/articlelist/88_new_90_1.html">1</a><a href="/articlelist/88_new_90_308.html">308</a><a class="currentPage">309</a><a href="/articlelist/88_new_90_310.html">310</a><a href="/articlelist/88_new_90_500.html">500</a> <a href="/articlelist/88_new_90_310.html" class="nextPage on"></a></div>    </div>
</div>
<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>
<script>
    let flaga = 1;
    var category_id = 88;
    let strbiaoqian = '';
    let zhankaihtml = '';
    // let zhankaihtml = '<div class="zhankaiflag biaoqianone " style="display: inline-block;" onclick="zhankaiflagclick(this);">展开<i></i></div>';
    let shouqihtml = '';
    // let shouqihtml = '<div class="zhankaiflag biaoqianone zhankai" style="display: inline-block;" onclick="zhankaiflagclick(this);">收起<i></i></div>';
    let allhtml = '';
    let fumo = '';
    $(".userInfo1 .biaoqianone").each(function(){
        var href = $(this).attr('href');
        var cat_id = $(this).data('id');
        let cuc = '<a href="'+href+'" class="biaoqianone" style="display: inline-block;">';
        if(category_id!==0&&category_id==cat_id){
            cuc ='<a href="javascript:;" class="biaoqianone hover" style="display: inline-block;">';
        }
        fumo = cuc;
        allhtml+=fumo+$(this).html()+'</a>';

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>