前端技术文章-Golang学习网

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

最新
最热

文章 · 前端 | 4个月前 |

HTML标注项目协作人数及团队头像列表方法

HTML无原生“协作人数”语义标签，需用<dl><dt>协作成员</dt><dd>3</dd></dl>结构配合data-team-count="3"属性实现语义化与机器可读。

239 收藏
文章 · 前端 | 4个月前 |

CSS 逻辑属性在旧版浏览器不被支持，主要因为这些浏览器发布时，逻辑属性（如 `margin-inline-start`、`padding-block-end` 等）尚未成为标准。因此，为了兼容性，开发者通常会改用物理属性（如 `margin-left`、`padding-top` 等），以确保在所有浏览器中都能正常显示和布局。

IE全系列（含IE11）、Edge≤16、Chrome旧版本均不支持CSS逻辑属性，解析器直接忽略margin-inline-start等声明，无fallback触发。

206 收藏
文章 · 前端 | 4个月前 |

HTML标签页缓存方法详解【避坑指南】

HTML本身无标签页缓存机制，所谓状态保持实为JavaScript控制DOM显隐或用hidden属性暂停资源加载；真状态缓存应依赖sessionStorage或Map存储关键数据并还原UI。

219 收藏
文章 · 前端 | 4个月前 |

HTML Canvas倒计时动画实现方法

Canvas倒计时动画的核心是requestAnimationFrame驱动+clearRect清除重绘，避免残影闪烁；需用performance.now()精准计时、textBaseline/middle居中文字、适配dpr防模糊，并在结束时cancelAnimationFrame清理资源。

383 收藏
文章 · 前端 | 4个月前 |

防止页面内容被恶意嵌套，主要涉及防止点击劫持（Clickjacking）和跨站脚本攻击（XSS）。以下是一些在 HTML 中有效防止页面内容被恶意嵌套的方法：1. 使用 X-Frame-Options 响应头这是最常见、最有效的防御手段之一。它告诉浏览器是否允许页面被嵌入到或 <frame> 中。示例：X-Frame-Options: DENY或X-Frame-Options:</a></div> <a href="/article/600875.html" class="img_box"><img src="/uploads/20260515/17788081006a067524320b4.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="防止页面内容被恶意嵌套，主要涉及防止点击劫持（Clickjacking）和跨站脚本攻击（XSS）。以下是一些在 HTML 中有效防止页面内容被恶意嵌套的方法：1. 使用 X-Frame-Options 响应头这是最常见、最有效的防御手段之一。它告诉浏览器是否允许页面被嵌入到 <iframe> 或 <frame> 中。示例：X-Frame-Options: DENY或X-Frame-Options:"></a> <div class="cont lineFourOverflow">最稳方案是服务端配置X-Frame-Options或CSPframe-ancestors响应头，Nginx需用add_headerX-Frame-Options"DENY"always;或add_headerContent-Security-Policy"frame-ancestors'self'https://admin.example.com;"always;，二者不可共存，且<meta>和JS检测已失效。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>263</span> <span class="collectBtn user_collection" data-type="article" data-id="600875"><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/600873.html" class="aBlack">HTML5 audio 标签支持多种常见音频格式，具体支持情况取决于浏览器。以下是主流浏览器支持的音频格式：🎧 支持的音频格式：格式说明浏览器支持情况MP3常见、兼容性好全部主流浏览器（Chrome、Firefox、Edge、Safari 等）WAV无损音质，文件较大全部主流浏览器OGG开源格式，适合网页使用Chrome、Firefox、Edge 支持，Safari 不支持AAC高质量音频，常用于</a></div> <a href="/article/600873.html" class="img_box"><img src="/uploads/20260515/17788079836a0674af69f0c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML5 audio 标签支持多种常见音频格式，具体支持情况取决于浏览器。以下是主流浏览器支持的音频格式：🎧 支持的音频格式：格式说明浏览器支持情况MP3常见、兼容性好全部主流浏览器（Chrome、Firefox、Edge、Safari 等）WAV无损音质，文件较大全部主流浏览器OGG开源格式，适合网页使用Chrome、Firefox、Edge 支持，Safari 不支持AAC高质量音频，常用于"></a> <div class="cont lineFourOverflow">答案：为确保网页音频兼容性，应提供MP3、OggVorbis和AAC等多种格式，利用<source>标签让浏览器自动选择，同时考虑文件大小、音质、专利许可及编码效率，以提升加载速度与用户体验。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>354</span> <span class="collectBtn user_collection" data-type="article" data-id="600873"><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/600872.html" class="aBlack">HTML中iframe父子通信技巧</a></div> <a href="/article/600872.html" class="img_box"><img src="/uploads/20260515/17788079226a067472d0b45.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中iframe父子通信技巧"></a> <div class="cont lineFourOverflow">同源下需等待iframeload事件触发后才能安全获取contentWindow；contentDocument与contentWindow.document等价但兼容性更好；跨域时仅postMessage可用，且须校验origin。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>406</span> <span class="collectBtn user_collection" data-type="article" data-id="600872"><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/600868.html" class="aBlack">HTML5空格在Git提交中的使用规范</a></div> <a href="/article/600868.html" class="img_box"><img src="/uploads/20260515/17788077836a0673e7532fa.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML5空格在Git提交中的使用规范"></a> <div class="cont lineFourOverflow">Git提交信息必须使用纯ASCII/UTF-8文本，禁用HTML实体（如&nbsp;）和非标准空格（如\u3000），仅允许ASCII空格（U+0020）和换行符，以确保工具链兼容与解析可靠。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>181</span> <span class="collectBtn user_collection" data-type="article" data-id="600868"><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/600861.html" class="aBlack">计算属性实现动态表单校验教程</a></div> <a href="/article/600861.html" class="img_box"><img src="/uploads/20260515/17788074846a0672bce624b.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="计算属性实现动态表单校验教程"></a> <div class="cont lineFourOverflow">计算属性实现动态表单校验的核心是规则与状态分离：规则来自配置，状态驱动响应，校验逻辑只读不写、结果自动更新；支持跨字段联动、动态表单项和单元测试，无需手动触发或第三方库。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>151</span> <span class="collectBtn user_collection" data-type="article" data-id="600861"><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/600855.html" class="aBlack">React动态修改Less变量，实现一键换肤方法</a></div> <a href="/article/600855.html" class="img_box"><img src="/uploads/20260515/17788072356a0671c39d638.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="React动态修改Less变量，实现一键换肤方法"></a> <div class="cont lineFourOverflow">React中less.modifyVars()基本不生效，因Webpack的less-loader已在构建阶段将Less编译为静态CSS，运行时无变量作用域；应改用CSS自定义属性+Less编译时注入，通过document.documentElement.style.setProperty()动态换肤。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>200</span> <span class="collectBtn user_collection" data-type="article" data-id="600855"><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/600849.html" class="aBlack">CSS Grid命名网格线实战教程</a></div> <a href="/article/600849.html" class="img_box"><img src="/uploads/20260515/17788069576a0670ad3c1c0.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS Grid命名网格线实战教程"></a> <div class="cont lineFourOverflow">命名网格线通过自定义名称提升CSSGrid布局的可读性和维护性。使用方括号为grid-template-columns和grid-template-rows中的网格线命名，如[main-start]1fr[content-end]，支持多名称与重复命名。通过grid-column、grid-row或grid-area引用名称定位元素，如.header{grid-column:main-start/main-end;}。实战中构建清晰页面结构，如头部、内容区、侧边栏和页脚，使布局语义化，减少对数字索引的依赖</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="600849"><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/600845.html" class="aBlack">CSS绝对定位实现图片裁剪技巧</a></div> <a href="/article/600845.html" class="img_box"><img src="/uploads/20260515/17788067116a066fb739dff.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS绝对定位实现图片裁剪技巧"></a> <div class="cont lineFourOverflow">clip属性已废弃，应使用clip-path替代；clip-path支持多边形、圆形等灵活裁剪，兼容性好且语法直观，而clip仅限绝对定位元素、不支持圆角、兼容性差。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>369</span> <span class="collectBtn user_collection" data-type="article" data-id="600845"><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/600843.html" class="aBlack">用户1分钟后自动触发JS函数的方法</a></div> <a href="/article/600843.html" class="img_box"><img src="/uploads/20260515/17788066736a066f913a42d.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="用户1分钟后自动触发JS函数的方法"></a> <div class="cont lineFourOverflow">本文介绍一种轻量级、可自定义的JavaScript方案，用于监听用户页面活动状态，并在连续60秒无任何交互（如鼠标移动、键盘输入、滚动等）时自动执行指定函数，适用于表单超时提醒、会话过期处理等场景。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>254</span> <span class="collectBtn user_collection" data-type="article" data-id="600843"><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/600840.html" class="aBlack">iframe沙箱权限配置与使用详解</a></div> <a href="/article/600840.html" class="img_box"><img src="/uploads/20260515/17788064756a066ecbaa161.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="iframe沙箱权限配置与使用详解"></a> <div class="cont lineFourOverflow">sandbox属性加了即“全锁死”：JS不执行、表单不提交、弹窗失效、localStorage不可读写，仅postMessage可用；须显式添加allow-scripts等白名单token才能放行对应能力。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>410</span> <span class="collectBtn user_collection" data-type="article" data-id="600840"><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/600832.html" class="aBlack">CSS Grid实现圣杯布局教程</a></div> <a href="/article/600832.html" class="img_box"><img src="/uploads/20260515/17788061106a066d5e81bbd.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS Grid实现圣杯布局教程"></a> <div class="cont lineFourOverflow">grid-template-areas字符串必须满足三硬条件：每行引号内单词数一致、区域名仅含ASCII字母数字连字符、所有grid-area值均在字符串中显式出现，否则网格退化为单列流。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>103</span> <span class="collectBtn user_collection" data-type="article" data-id="600832"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> </ul> <div class="mngfPage"><a href="/articlelist/88_new_0_307.html" class="prevPage on"></a> <a href="/articlelist/88_new_0_1.html">1</a><a href="/articlelist/88_new_0_307.html">307</a><a class="currentPage">308</a><a href="/articlelist/88_new_0_309.html">309</a><a href="/articlelist/88_new_0_500.html">500</a> <a href="/articlelist/88_new_0_309.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> <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>