前端技术文章-Golang学习网

Go教程 Go问答 MySQL Redis 软件教程人工智能业界新闻 php教程 java教程 python教程 linux 前端常见问题 AI提示词作文画画

最新
最热

文章 · 前端 | 2星期前 |

路由监听为何组件销毁后仍执行？清理指南

watch在keep-alive缓存组件中持续触发，因组件未真正卸载；需在onDeactivated中stop、onActivated中重建，或统一用onDeactivated/onUnmounted清理。

346 收藏
文章 · 前端 | 2星期前 |

CSS低优先级全局样式覆盖技巧

:where()可将选择器权重归零（0-0-0），是唯一原生降低CSS优先级的方案，适用于重置、默认样式及第三方库兼容场景，但需外层提权、避开伪元素与!important，且不兼容IE及旧版Safari。

287 收藏
文章 · 前端 | 2星期前 |

HTML设置背景技巧详解

现代HTML页面背景必须用CSS控制，禁用过时的bgcolor属性；纯色用background-color，图片背景需设置background-size、position和repeat，多背景用background复合属性按从后往前顺序声明，响应式需结合媒体查询与性能优化。

317 收藏
文章 · 前端 | 2星期前 |

HTML iframe 的 referrerpolicy 属性用于控制嵌入页面在请求资源时发送的 Referer 信息，从而影响来源地址的隐私和安全。以下是详细解释：📌 referrerpolicy 属性简介referrerpolicy 是标签的一个属性，用于指定当 iframe 中的页面发起网络请求（如加载图片、脚本、CSS 等）时，浏览器应该如何处理 Referer 头部信</a></div> <a href="/article/609337.html" class="img_box"><img src="/uploads/20260523/17795481976a11c02598fbc.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">iframe的referrerpolicy仅控制iframe内部发起的子资源请求（如img、script、fetch）所带Referer头，不影响父页面加载iframe时的Referer；常用值为no-referrer（彻底不发）和same-origin（仅同源发），不可用于隐藏父页来源或阻止iframe获取parent.location。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>211</span> <span class="collectBtn user_collection" data-type="article" data-id="609337"><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/609335.html" class="aBlack">CSS过渡与动画结合应用技巧</a></div> <a href="/article/609335.html" class="img_box"><img src="/uploads/20260523/17795480546a11bf960d03a.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">CSS选择器与动画结合可提升交互体验。通过transition配合后代选择器实现悬停效果，如.card:hover.title改变颜色和位置；使用animation与直接子选择器（>）定义@keyframes滑入动画，结合自定义属性--i设置延迟，实现列表项逐项显示；应避免深层嵌套选择器以提升性能，推荐用transform、opacity和will-change优化渲染，保持结构清晰与控制精准。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>361</span> <span class="collectBtn user_collection" data-type="article" data-id="609335"><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/609333.html" class="aBlack">HTML中用Web动画API实现精细控制</a></div> <a href="/article/609333.html" class="img_box"><img src="/uploads/20260523/17795478276a11beb3bb139.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">WebAnimationsAPI不能替代CSS动画，而是仅接管显式声明的属性（如transform、opacity），其余属性仍由CSS规则控制；常见失效原因包括duration未设为正数、未设fill:'forwards'、关键帧少于两个对象，或元素未完成样式计算就调用animate()。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>316</span> <span class="collectBtn user_collection" data-type="article" data-id="609333"><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/609321.html" class="aBlack">树莓派运行HTML方法及步骤指南</a></div> <a href="/article/609321.html" class="img_box"><img src="/uploads/20260523/17795469976a11bb751c5a2.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">树莓派可通过搭建本地服务器展示HTML页面。首先更新系统，创建HTML文件并保存至指定目录；2.使用Python内置服务器在8000端口启动服务；3.在浏览器访问localhost:8000或树莓派IP地址查看网页；4.可选配置开机自启服务，将服务器设为systemd服务并启用，实现长期运行。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>275</span> <span class="collectBtn user_collection" data-type="article" data-id="609321"><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/609318.html" class="aBlack">ES6新特性有哪些及实战应用教程</a></div> <a href="/article/609318.html" class="img_box"><img src="/uploads/20260523/17795467416a11ba7506bc2.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">ES6特性应按实际需求选用：async/await、Promise等已成标配，但import/export影响打包，class不改变原型链，Map/Set需按场景使用，箭头函数注意this绑定，解构赋值需防null/undefined，Promise.all与allSettled依错误策略选择。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>258</span> <span class="collectBtn user_collection" data-type="article" data-id="609318"><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="FLEXBOX">FLEXBOX</a> <a href="javascript:;" class="aLightGray" title="order属性">order属性</a> </div> <div class="tit lineTwoOverflow"><a href="/article/609313.html" class="aBlack">CSS Flexbox _order属性调整元素顺序详解</a></div> <a href="/article/609313.html" class="img_box"><img src="/uploads/20260523/17795465006a11b984e5558.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">order属性用于调整Flexbox子元素的显示顺序，默认值为0，数值越小越靠前。通过设置不同order值可改变视觉排列而不影响HTML结构，例如.item2（order:1）会排在.item1（order:2）之前。在响应式设计中，结合媒体查询可实现移动端内容重排，如使作者信息在小屏幕时位于文章上方。该属性仅对flex子元素生效，不影响DOM结构与可访问性，负值有效（如order:-1置顶），但应避免滥用以防止语义混乱。关键在于它只改变视觉顺序，不改变文档流和交互逻辑。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>270</span> <span class="collectBtn user_collection" data-type="article" data-id="609313"><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/609312.html" class="aBlack">HTML Fetch 流式响应读取指南</a></div> <a href="/article/609312.html" class="img_box"><img src="/uploads/20260523/17795464586a11b95ac224c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">response.body是ReadableStream，需用getReader()和read()手动流式读取；text()/json()会锁死流并阻塞内存，不可用于流式场景。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>233</span> <span class="collectBtn user_collection" data-type="article" data-id="609312"><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/609310.html" class="aBlack">HTML注释删除代码失效问题解答</a></div> <a href="/article/609310.html" class="img_box"><img src="/uploads/20260523/17795464396a11b947af2bf.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">HTML注释在DOM中不生成节点，浏览器解析时直接丢弃；仅JS创建的Comment节点才真实存在并可操作。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>394</span> <span class="collectBtn user_collection" data-type="article" data-id="609310"><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/609308.html" class="aBlack">JavaScript操作iframe及跨域通信方法</a></div> <a href="/article/609308.html" class="img_box"><img src="/uploads/20260523/17795463206a11b8d0308aa.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">跨域iframe通信必须使用window.postMessage()，发送方调用iframe.contentWindow.postMessage()，接收方监听message事件并严格校验event.origin和event.source；document.domain已基本淘汰；服务端代理或同源中转页可作为补充方案。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>478</span> <span class="collectBtn user_collection" data-type="article" data-id="609308"><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/609306.html" class="aBlack">如何区分普通对象与构造函数实例</a></div> <a href="/article/609306.html" class="img_box"><img src="/uploads/6094/17f4c5f7d60c633543153c7c5280428c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">普通对象与自定义实例的本质区别在于内部结构、创建方式和原型链归属：前者由{}或Object.create(null)创建，constructor为Object且__proto__指向Object.prototype；后者由new调用构造函数生成，constructor指向自定义函数且__proto__指向其prototype。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>371</span> <span class="collectBtn user_collection" data-type="article" data-id="609306"><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/609305.html" class="aBlack">远程调试Mobile网页技巧分享</a></div> <a href="/article/609305.html" class="img_box"><img src="/uploads/20260523/17795461986a11b85616cce.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">JavaScript移动端网页调试最常用高效方式是浏览器远程调试：Chrome+Android（推荐，功能全）或Safari+iOS（仅macOS），需同局域网并配置开发者选项、USB连接及IP访问。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>393</span> <span class="collectBtn user_collection" data-type="article" data-id="609305"><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/609301.html" class="aBlack">Tailwind打造苹果风按钮：渐变与阴影实战教程</a></div> <a href="/article/609301.html" class="img_box"><img src="/uploads/20260523/17795460336a11b7b18c36f.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">苹果官网按钮的柔和金属感需用bg-gradient-to-br搭配细微色阶（如#f5f5f7至#e0e0e2）加via-white/20模拟高光；外阴影、伪元素内阴影与ring描边三层叠加实现浮雕感；悬停/点击态须拆分transition属性控制微动效；响应式下需手动设定圆角像素值与阴影参数以适配不同设备。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>405</span> <span class="collectBtn user_collection" data-type="article" data-id="609301"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> </ul> <div class="mngfPage"><a href="/articlelist/88_new_0_155.html" class="prevPage on"></a> <a href="/articlelist/88_new_0_1.html">1</a><a href="/articlelist/88_new_0_155.html">155</a><a class="currentPage">156</a><a href="/articlelist/88_new_0_157.html">157</a><a href="/articlelist/88_new_0_500.html">500</a> <a href="/articlelist/88_new_0_157.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>