前端技术文章
-
- JavaScript深拷贝与浅拷贝区别及注意事项
- 浅拷贝只复制第一层，Object.assign()和展开运算符属此类，不递归处理嵌套对象；深拷贝需避开循环引用和特殊类型，JSON.parse(JSON.stringify())有诸多限制，structuredClone()更可靠但不支持function等，手写递归可定制化处理。
- 文章 · 前端 | 4个月前 | 189浏览 收藏
-
- 对象解构赋值中的别名设置与默认值处理是JavaScript中常用的功能，能够提升代码的可读性和灵活性。以下是对这两个特性的详细解析：一、别名设置（Alias）在对象解构赋值中，别名是指为从对象中提取的属性赋予一个不同的变量名。这在属性名与变量名不一致时非常有用。语法：const { 属性名: 别名 } = 对象;示例：const user = { name: 'Alice', age: 2
- 对象解构中别名（用冒号）解决命名冲突，默认值（用等号）仅对undefined生效；二者可共存，如{username:loginName='访客'}，先重命名再判断是否undefined。
- 文章 · 前端 | 4个月前 | 326浏览 收藏
-
- CSS中sticky定位的元素会随着父元素一起滚出屏幕，是因为sticky定位的基准是最近的定位祖先元素（即设置了position: relative、absolute、fixed或sticky的父元素）。如果父元素没有设置高度或滚动属性，那么当父元素被滚动出视口时，子元素的sticky定位也会失效。原因分析：sticky的定位范围受父容器限制position: sticky 的行为类似于 pos
- sticky失效的根本原因是父容器未形成可滚动上下文：高度不足、overflow:hidden/auto/scroll截断、未设top等偏移值，或父容器高度≤sticky元素自身高度。
- 文章 · 前端 | 4个月前 | 485浏览 收藏
-
- HTML插入天气模块方法_实时天气Widget教程
- 最简单方案是使用支持HTTPS且无域名限制的iframe天气小部件（如weatherapi.com官方embed）；若需自定义，则用其前端友好API配合key调用，注意q参数用英文名、禁用aqi减少体积。
- 文章 · 前端 | 4个月前 | 415浏览 收藏
-
- 减少DOM元素提升渲染效率的方法有哪些？
- 直接删掉冗余的<div>和<span>比任何CSS/JS优化都有效；DOM节点超2000时，低端设备layout耗时呈指数级增长。真正拖慢渲染的是人为嵌套的“结构惯性”，如多层<div>套娃、误用<ul>渲染表单、SSR空wrapper、图标单独包层等；应优先用::before/after、gap、outline、语义化标签（如<fieldset>）替代；可通过document.querySelectorAll('*').length快速检测节点
- 文章 · 前端 | 4个月前 | 353浏览 收藏
-
- HTML文件命名规范与技巧分享
- HTML文件名必须用全小写+kebab-case，禁用下划线、大小写混用、空格、中文及特殊符号；首页统一为index.html；class和id命名同样须用kebab-case且语义化。
- 文章 · 前端 | 4个月前 | 249浏览 收藏
-
- structuredClone 拷贝 WebTransport 连接对象方法
- WebTransport对象不可克隆，因其为持有底层网络句柄、事件监听器和瞬时状态的宿主对象，structuredClone()仅支持可序列化值，克隆会抛出DataCloneError；替代方案包括传配置重建连接、MessageChannel通信或只克隆可序列化属性。
- 文章 · 前端 | 4个月前 | 165浏览 收藏
-
- 表格结构划分：THEAD、TFOOT与TBODY使用指南
- tfoot必须写在tbody前面，因为HTML规范强制要求该顺序；浏览器解析时若发现tfoot在tbody后会自动重排DOM，导致CSS定位失效、JS节点顺序异常、打印错乱及首屏优化失败。
- 文章 · 前端 | 4个月前 | 485浏览 收藏
-
- HTML链接hover文字滑动效果实现方法
- 链接hover文字滑动效果应使用transform:translateX()配合transition实现，避免margin或top等触发重排；需设overflow:hidden、position:relative及inline-block，移动端需用@media(hover:hover)降级或JS监听touchstart。
- 文章 · 前端 | 4个月前 | 295浏览 收藏
-
- CSS容器内边距背景色覆盖解决方法
- background-clip属性决定背景的绘制范围，其默认值border-box使背景延伸至边框外沿，包含padding和content区域；若设置为padding-box则背景覆盖内边距及内容，而content-box仅在内容区显示背景，常因误设后两者导致背景未覆盖padding区域；通过将background-clip设为border-box，可确保背景色或背景图正确填充padding区域，避免“padding遮挡背景”的误解，尤其在使用渐变或图片背景时更需注意该属性的合理设置。
- 文章 · 前端 | 4个月前 | CSS 背景色 360浏览 收藏
-
- 要让多个 div 元素严格并排显示而不换行，可以使用以下几种方法：✅ 方法一：使用 display: inline-blockdiv { display: inline-block; width: 100px; /* 设置宽度 */ }注意：如果 div 的总宽度超过容器的宽度，它们会自动换行。可以通过设置 white-space: nowrap 来防止换行。✅ 方法二：使用 flexbo
- 当使用inline-block布局多个div时，因HTML中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用Flexbox彻底解决。
- 文章 · 前端 | 4个月前 | 396浏览 收藏
-
-
CSS 实现卡片堆叠效果，使用 absolute 与 z-index 是常见方法。以下是一个简单实现思路：设置容器为相对定位（position: relative），以便内部绝对定位元素以它为参考点。给每个卡片设置绝对定位（position: absolute），并调整 top 和 left 值来控制位置。通过 z-index 控制卡片的层级顺序，数值越大越靠前。示例代码如下：
- 卡片堆叠不必须用position:absolute；本质由层叠上下文和z-index控制，position:relative等也能触发，但z-index对static无效，且父子层叠上下文会隔离z-index作用域。
- 文章 · 前端 | 4个月前 | 105浏览 收藏
- Lang属性与字符编码对页面渲染的影响
- lang属性必须写在<html>标签上才有效，写在<body>或子元素中无效；charset和lang缺一不可，且位置、格式、大小写均影响解析与渲染效果。
- 文章 · 前端 | 4个月前 | 479浏览 收藏
- HTML中使用WebSocket发送数据的方法详解
- WebSocket.send()可发送DOMString、ArrayBuffer、Blob或TypedArray；不可直接发送对象、undefined或null，须先JSON.stringify()序列化，且需确保ws.readyState为OPEN。
- 文章 · 前端 | 4个月前 | 167浏览 收藏
- 富文本编辑漏洞检测教程 XSS防范指南
- 富文本编辑器XSS漏洞检测需贯穿数据生命周期，核心是发现输入过滤、编码处理或上下文渲染中的缺陷。首先注入script标签、事件处理器、javascript:伪协议等Payload，观察是否被正确转义或执行；常见触发点包括onerror、onload等事件属性及SVG、data:URI等非常规标签。绕过机制常利用双重编码、大小写混淆、HTML注释分割、非标准语法或浏览器解析差异。除XSS外，还需防范HTML注入导致的钓鱼与页面破坏、文件上传漏洞引发的任意代码执行、SSRF导致内网探测、信息泄露及CSRF引起
- 文章 · 前端 | 4个月前 | html如何查漏洞 313浏览 收藏
-
CSS 实现卡片堆叠效果，使用 absolute 与 z-index 是常见方法。以下是一个简单实现思路：设置容器为相对定位（position: relative），以便内部绝对定位元素以它为参考点。给每个卡片设置绝对定位（position: absolute），并调整 top 和 left 值来控制位置。通过 z-index 控制卡片的层级顺序，数值越大越靠前。示例代码如下：
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- PubMedQA
- 深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。
- 253次使用
-
- H2O EvalGPT
- H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。
- 298次使用
-
- LMArena
- LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。
- 270次使用
-
- HELM
- 深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。
- 250次使用
-
- MMBench
- MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。
- 54次使用
