前端技术文章-Golang学习网

文章 · 前端 | 2星期前 |

缺一不可，漏掉stroke()就什么都看不见；因为moveTo()和lineTo()仅构建路径指令，不触发绘制，必须显式调用stroke()才真正描边显示。

383 收藏

文章 · 前端 | 2星期前 |

new 操作符的四个步骤是：创建一个新对象、将构造函数的作用域赋给该对象、执行构造函数代码、返回该对象。以下是模拟实现 myNew 的代码：function myNew(constructor, ...args) { // 1. 创建一个新对象 const obj = {}; // 2. 将构造函数的作用域绑定到该对象 obj.__proto__ = constructor.pr

new操作符的模拟需四步：1.用Object.create(constructor.prototype)创建空对象并绑定原型；2.用constructor.apply(obj,args)绑定this并执行构造函数；3.若构造函数返回对象或函数则返回它，否则返回新对象；4.整合为myNew函数。

101 收藏

文章 · 前端 | 2星期前 |

HTML背景图压缩失真补救方法

WebP/AVIF比JPG更适合background-image，因其支持alpha通道、更优预测编码及HDR元数据，而JPG的DCT块编码和色度抽样易致线条/文字失真；应避免background-size:cover导致的插值失真，改用100%尺寸+position对齐，并禁用模糊滤镜。

163 收藏

文章 · 前端 | 2星期前 |

HTML如何修改文字样式（字体/大小/颜色）

推荐使用CSS设置文字样式，通过style属性或样式表定义font-family、font-size和color；2.可在标签内用style直接设置，或在style标签及外部文件中统一管理；3.避免使用已废弃的font标签。

373 收藏

文章 · 前端 | 2星期前 |

HTML中使用aria-readonly属性可以标记一个表单字段为只读状态，但该属性本身并不阻止用户编辑内容。为了实现“内容可见但不可编辑”的效果，还需要结合readonly或disabled属性。正确用法示例：或者

</div>
                                <a href="/article/607318.html" class="img_box"><img src="/uploads/20260522/17794211786a0fcffaa29f3.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">aria-readonly仅向辅助技术传达只读语义，不改变交互行为；必须与原生readonly或事件拦截配合使用，否则会导致语义与实际行为错位。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>423</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607318"><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/607315.html" class="aBlack">HTML构建阅读模式页面教程</a></div>
                                <a href="/article/607315.html" class="img_box"><img src="/uploads/20260522/17794210406a0fcf702839a.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">阅读模式依赖语义化HTML结构而非CSS隐藏，正文须用<article>或<main>包裹且不嵌套在<nav><header><aside>中，需严格层级的<h1>-<h6>标题、带alt的<img>、含cite的<blockquote>及标准<ul><ol>列表。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>168</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607315"><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/607313.html" class="aBlack">Fetch 传输大文本内存占用分析</a></div>
                                <a href="/article/607313.html" class="img_box"><img src="/uploads/20260522/17794209896a0fcf3d00952.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">关键不是看页面总内存，而是盯住fetch触发后、响应体开始解析前的内存增量；调用.text()等会一次性解码致内存暴涨，而用response.body.getReader()流式处理可将峰值稳定在5–10MB。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>423</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607313"><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/607309.html" class="aBlack">HTML时间线动画制作教程</a></div>
                                <a href="/article/607309.html" class="img_box"><img src="/uploads/20260522/17794208066a0fce86dd69d.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">用IntersectionObserver实现滚动触发动画时间线最稳定：设threshold为[0,0.1]提前触发，配合transition而非animation实现进退双向动画，用data-position替代nth-child避免布局错位，移动端加rootMargin适配Safari惯性。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>427</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607309"><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/607306.html" class="aBlack">HTML动态页面生成方法详解</a></div>
                                <a href="/article/607306.html" class="img_box"><img src="/uploads/20260522/17794206276a0fcdd39c717.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">HTML本身无法动态生成页面，必须依赖JavaScript操作DOM或模板引擎（如Handlebars、Jinja2）及服务端语言；浏览器端需预编译与数据绑定，服务端需防XSS与路径遍历，零依赖方案可用template标签与DOMParser。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>129</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607306"><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/607299.html" class="aBlack">HTML文件怎么打开修改？记事本操作教程</a></div>
                                <a href="/article/607299.html" class="img_box"><img src="/uploads/20260522/17794203956a0fcceba1795.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">记事本编辑HTML文件必须用UTF-8编码并确保扩展名为.html。常见错误是保存为ANSI编码或index.html.txt，导致中文乱码、无法打开或浏览器不更新；务必用“另存为”，手动输入带引号的"index.html"，并开启系统扩展名显示以确认。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>363</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607299"><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/607292.html" class="aBlack">Array.join 与模板字符串构建高效 HTML 片段</a></div>
                                <a href="/article/607292.html" class="img_box"><img src="/uploads/20260522/17794200156a0fcb6f52e9e.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">Array.prototype.join()拼接字符串比反复+=更快，配合模板字符串预处理数据可提升性能、可读性与可维护性；应避免频繁DOM操作，一次性innerHTML插入，并做好XSS防护。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>309</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607292"><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/607286.html" class="aBlack">JavaScript代码测试方法：单元与集成测试详解</a></div>
                                <a href="/article/607286.html" class="img_box"><img src="/uploads/20260522/17794197796a0fca8322c0f.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">JavaScript测试必须覆盖关键路径，单元测试用Jest隔离验证函数/组件，集成测试依场景选Cypress或Vitest，重点保障跨模块数据流与副作用，函数和分支覆盖率比行覆盖率更能暴露风险。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>318</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607286"><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/607277.html" class="aBlack">响应式表格实现与数据展示优化技巧</a></div>
                                <a href="/article/607277.html" class="img_box"><img src="/uploads/20260522/17794193786a0fc8f21efda.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">必须设table-layout:fixed才能控列宽，配合width:100%和显式列宽（如<thstyle="width:25%">），再结合data-label卡片模式或容器水平滚动，兼顾响应式与可访问性。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>355</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607277"><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/607271.html" class="aBlack">js删除数组元素shift方法详解</a></div>
                                <a href="/article/607271.html" class="img_box"><img src="/uploads/20260522/17794191856a0fc831bb6ed.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">shift()方法用于移除数组第一个元素并返回该元素，原数组长度减1；若数组为空则返回undefined，且该方法会直接修改原数组。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>110</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607271"><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/607268.html" class="aBlack">HTML架构标准与文档规范解析要点</a></div>
                                <a href="/article/607268.html" class="img_box"><img src="/uploads/20260522/17794190046a0fc77c9ac7d.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">HTML是定义网页内容结构与语义的标记语言规范，非架构标准；DOCTYPE声明决定解析模式，head与body为强制逻辑分区，标签嵌套、属性书写等细节直接影响语义、可访问性与渲染一致性。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>280</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="607268"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_new_0_186.html" class="prevPage on"></a> <a href="/articlelist/88_new_0_1.html">1</a><a href="/articlelist/88_new_0_186.html">186</a><a class="currentPage">187</a><a href="/articlelist/88_new_0_188.html">188</a><a href="/articlelist/88_new_0_500.html">500</a> <a href="/articlelist/88_new_0_188.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>