前端技术文章-Golang学习网

文章 · 前端 | 2星期前 |

CSSGrid子元素高度控制技巧

Grid子项默认不继承父容器高度，需通过grid-template-rows（如1fr）定义行轨道高度，align-self:stretch仅在子项无显式高度且轨道尺寸确定时生效。

485 收藏

文章 · 前端 | 2星期前 |

动态数字滚动效果实现方法

纯CSS无法实现数字动态滚动，必须用JavaScript配合requestAnimationFrame控制数值演进，结合IntersectionObserver触发及正则提取纯数字，确保平滑、精准、低开销。

485 收藏

文章 · 前端 | 1星期前 | 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>
                                          |  5天前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/605443.html" class="aBlack">navigator.deviceMemory 获取设备内存并优化视觉效果</a></div>
                                <a href="/article/605443.html" class="img_box"><img src="/uploads/20260520/17792780766a0da0fc804d2.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">navigator.deviceMemory返回近似分级值（如0.5、1、2、4、8GB），非精确内存容量，仅Chrome63+和Edge79+支持，Firefox/Safari不支持，HTTP下返回undefined，需结合hardwareConcurrency等信号综合判断并降级。</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="605443"><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>
                                          |  1天前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/609735.html" class="aBlack">怎么利用HTML的formnovalidate属性为特定按钮跳过表单校验</a></div>
                                <a href="/article/609735.html" class="img_box"><img src="/uploads/20260524/17795952526a1277f45a1f1.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">formnovalidate属性必须加在<buttontype="submit">或<inputtype="submit">上且位于<form>内；它仅对提交按钮生效，用于单按钮跳过校验，与表单级novalidate互斥但优先级更高。</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="609735"><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>
                                          |  1天前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/610315.html" class="aBlack">如何通过HTML的link rel="preload" as="image"预加载首屏关键图片</a></div>
                                <a href="/article/610315.html" class="img_box"><img src="/uploads/20260524/17796215046a12de80b4393.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">linkrel="preload"as="image"失效主因是路径无效、类型不匹配、时机过晚或MIME不符；应置于head顶部、验证Content-Type、配合fetchpriority="high"精准预加载首屏关键图。</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="610315"><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>
                                          |  22分钟前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612018.html" class="aBlack">表格结构划分：THEAD、TFOOT与TBODY使用指南</a></div>
                                <a href="/article/612018.html" class="img_box"><img src="/uploads/20260526/17797597956a14fab351933.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">tfoot必须写在tbody前面，因为HTML规范强制要求该顺序；浏览器解析时若发现tfoot在tbody后会自动重排DOM，导致CSS定位失效、JS节点顺序异常、打印错乱及首屏优化失败。</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="612018"><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>
                                          |  2分钟前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612040.html" class="aBlack">CSS中sticky定位的元素会随着父元素一起滚出屏幕，是因为sticky定位的基准是最近的定位祖先元素（即设置了position: relative、absolute、fixed或sticky的父元素）。如果父元素没有设置高度或滚动属性，那么当父元素被滚动出视口时，子元素的sticky定位也会失效。原因分析：sticky的定位范围受父容器限制position: sticky 的行为类似于 pos</a></div>
                                <a href="/article/612040.html" class="img_box"><img src="/uploads/20260526/17797610046a14ff6c5a4ff.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">sticky失效的根本原因是父容器未形成可滚动上下文：高度不足、overflow:hidden/auto/scroll截断、未设top等偏移值，或父容器高度≤sticky元素自身高度。</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="612040"><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>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/509629.html" class="aBlack">HTML5本地存储调用方法及数据存取方式</a></div>
                                <a href="/article/509629.html" class="img_box"><img src="/uploads/20260225/1772014911699ecd3f0d37f.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">localStorage持久存储且跨标签页共享，sessionStorage仅限当前标签页会话；二者均只支持字符串，存对象需JSON序列化，storage事件仅在其他同源窗口触发。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="509629"><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>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/510826.html" class="aBlack">CSS卡片翻转效果实现教程</a></div>
                                <a href="/article/510826.html" class="img_box"><img src="/uploads/20260226/177209934769a017137ff2d.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">实现CSS响应式卡片翻转动画需设置transform-style:preserve-3d和backface-visibility:hidden，结合rotateY实现翻转，通过media查询适配不同屏幕尺寸，并优化触屏交互与可访问性。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="510826"><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>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/513070.html" class="aBlack">PolarAccessLinkAPI403错误解决方法</a></div>
                                <a href="/article/513070.html" class="img_box"><img src="/uploads/20260228/177226481569a29d6f555d3.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">调用PolarAccessLinkAPI时返回403错误，通常并非认证失败，而是因未完成用户注册流程——即使已成功获取AccessToken，也必须先调用/v3/users注册用户，否则所有后续数据接口均会拒绝访问。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="513070"><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>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/514104.html" class="aBlack">JavaScript操作浏览器历史记录详解</a></div>
                                <a href="/article/514104.html" class="img_box"><img src="/uploads/20260301/177234239269a3cc78b2763.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">JavaScript的historyAPI仅支持同源的添加、替换和导航操作，不允读取或删除历史条目；pushState/replaceState修改URL和状态但不刷新页面，需服务器支持对应路由；popstate监听导航变化，首次加载不触发，须手动检查history.state。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="514104"><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>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/514919.html" class="aBlack">React中CSS框架与CSS-in-JS对比解析</a></div>
                                <a href="/article/514919.html" class="img_box"><img src="/uploads/20260302/177241072969a4d7693c4c3.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">React中引入CSS框架应优先按需导入避免全局污染，推荐CDN或import指定路径；CSS-in-JS用于动态样式与组件隔离，需明确分工、避免混用；主题切换需同步CSS变量与JS逻辑，注意SSR和构建体积优化。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="514919"><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>
                                          |  2个月前  |  
                                        <a href="javascript:;" class="aLightGray" title="函数执行时间">函数执行时间</a>
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/518119.html" class="aBlack">JavaScript性能优化技巧与分析方法</a></div>
                                <a href="/article/518119.html" class="img_box"><img src="/uploads/20260304/177262504569a81c95da7f3.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">PerformanceAPI通过高精度计时帮助识别性能瓶颈：使用performance.now()可精确测量代码执行时间，相比Date.now()不受系统时间调整影响，精度更高；利用performance.mark()和measure()能结构化标记任务阶段，便于在DevTools中可视化分析各阶段耗时；结合上下文、异常值、统计分析及调用频率，可定位慢函数或“热路径”；适用于复杂计算、DOM操作、用户交互响应、资源处理及第三方脚本影响等前端性能优化场景，为持续优化提供数据支撑。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="518119"><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>
                                          |  2个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/522674.html" class="aBlack">JavaScript协程详解：Generator异步控制方法</a></div>
                                <a href="/article/522674.html" class="img_box"><img src="/uploads/20260308/177295143769ad178d1a73f.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow"><p>JavaScript中通过Generator函数实现协程，使用function定义并返回迭代器，调用next()可暂停和恢复执行，yield用于暂停并返回值，next再启动生成器。示例展示其逐步执行特性：functionsimpleGen(){yield'第一步';yield'第二步';return'完成';}constgen=simpleGen();console.log(gen.next());//{value:'第一步',done:false}console.log(gen.nex</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>484</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="522674"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_hot_90_54.html" class="prevPage on"></a> <a href="/articlelist/88_hot_90_1.html">1</a><a href="/articlelist/88_hot_90_54.html">54</a><a class="currentPage">55</a><a href="/articlelist/88_hot_90_56.html">56</a><a href="/articlelist/88_hot_90_1286.html">1286</a> <a href="/articlelist/88_hot_90_56.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>