前端技术文章
-
- HTML元组元素开发教程
- 可通过HTML语义化标签与WebComponents技术实现结构化数据展示和可复用组件：一、使用<span>或<data>结合data-属性模拟元组，如<spanclass="tuple"data-values="张三,25">张三(25岁)</span>，并通过JavaScript解析dataset.values获取数据；二、利用customElements.define()注册自定义标签（如<user-car
- 文章 · 前端 | 9个月前 | html模板 自定义组件 ShadowDOM WebComponents HTML元组元素 479浏览 收藏
-
- Vue输入校验：beforeinput拦截非法字符
- 本文旨在解决Vue.js应用中实时输入校验的常见问题，即如何在用户输入非法字符时立即阻止其显示在输入框中。通过对比watchEffect等后置处理方法的局限性，重点介绍并演示了如何利用beforeinput事件，结合正则表达式和e.preventDefault()，实现高效且用户体验友好的实时字符过滤功能。
- 文章 · 前端 | 9个月前 | 479浏览 收藏
-
- CSS导航栏悬停高亮效果实现
- 使用HTML的ul和li构建导航结构，为当前页链接添加.active类高亮；2.CSS通过Flexbox实现横向布局，:hover触发平滑悬停效果，.active突出当前页面；3.媒体查询在屏幕宽度≤768px时将flex-direction设为column，实现移动端垂直堆叠，链接间添加边框分隔；4.通过transition优化背景色变化动画，可结合JavaScript动态控制active类或汉堡菜单显隐，确保桌面与移动设备均具备良好交互体验。
- 文章 · 前端 | 9个月前 | 479浏览 收藏
-
- PHP与HTML混合注释技巧详解
- 答案：HTML注释在PHP中会被输出到浏览器源码，而PHP注释仅存在于服务器端。1.PHP解释器将HTML注释视为普通文本原样输出，最终发送给浏览器显示；2.PHP注释（//、#、/.../）在服务器端执行时被解析器忽略，不会发送至客户端；3.在PHP代码中使用echo输出HTML注释字符串时，仍会出现在前端源码中；4.误用HTML注释禁用PHP代码会导致代码仍被执行，可能引发安全问题或副作用；5.正确做法是：服务器端逻辑注释使用PHP注释，前端结构说明使用HTML注释；6.禁用PHP代码必须使用PHP注
- 文章 · 前端 | 9个月前 | HTML注释 PHP注释 服务器端 混合注释 浏览器源码 479浏览 收藏
-
- CSS布局基础与实用技巧全解析
- CSS布局核心包括文档流、盒模型、浮动、定位、Flexbox和Grid。1.文档流与盒模型构成布局基础，元素默认按HTML顺序排列，块级元素独占一行，行内元素同行排列，盒模型由content、padding、border、margin组成，box-sizing:border-box便于尺寸控制。2.浮动布局通过float实现文字环绕或两栏布局，需clear清除浮动影响，现多被Flexbox和Grid取代。3.定位布局使用position属性，static为默认值，relative相对偏移但占原位，abso
- 文章 · 前端 | 9个月前 | 响应式布局 CSS布局 FLEXBOX Grid 盒模型 479浏览 收藏
-
- Flexbox结合CSS变量实现等高图片布局
- 本文探讨了如何利用Flexbox布局和CSS自定义属性，解决在网页中展示一行图片时，既要让图片行铺满容器宽度、所有图片保持相同高度，又要确保每张图片维持其原始宽高比的挑战。核心方法是通过将图片的宽高比作为CSS变量，动态设置Flex子项的flex-grow值，从而实现不同宽高比图片的等高自适应布局。
- 文章 · 前端 | 9个月前 | 479浏览 收藏
-
- CSS过渡实现多元素同步动画技巧
- 要实现多个元素的同步动画，需确保触发条件和过渡属性一致。通过父级状态（如hover）统一控制子元素的样式变化，并为所有相关元素设置相同的transition参数（如持续时间、缓动函数），可使动画同时启动且协调。使用CSS自定义属性（如--offset）能更灵活地全局控制动画状态，提升维护性。优先采用transform和opacity避免重排，减少性能开销。示例中，父元素hover时，所有.box元素同步上移并变透明，体现简洁高效的纯CSS方案。
- 文章 · 前端 | 9个月前 | 479浏览 收藏
-
- CSS过渡效果设置全攻略
- CSS过渡通过transition属性实现，可平滑改变元素样式。例如：.box:hover{width:200px;background-color:blue;}配合transition:width0.5sease-in-out,background-color0.3slinear;实现悬停时宽度和背景色的渐变效果。结合transform可创建旋转、缩放等复杂动画，如rotate(360deg)配合transition:transform1sease-in-out实现旋转动画。若过渡无效，可能因未设置tr
- 文章 · 前端 | 9个月前 | 用户体验 动画效果 CSS过渡 transition属性 timing-function 479浏览 收藏
-
- iPhoneSafari如何开启全屏模式？
- 本文深入探讨了在iPhoneSafari浏览器中，针对非媒体HTML元素（如div容器）启用原生全屏模式的挑战与限制。尽管现代浏览器提供了跨平台的requestFullscreenAPI，但iOSSafari对非媒体元素的全屏功能存在严格限制，导致常见的JavaScript全屏代码无法在iPhone上生效。文章将分析原因，并提供基于CSS的替代方案，以实现类似的全屏视觉效果。
- 文章 · 前端 | 10个月前 | 479浏览 收藏
-
- 什么是队列？JS队列实现方法详解
- 队列是一种先进先出（FIFO）的数据结构，常用于任务调度、消息队列、BFS算法等场景；在JavaScript中可通过数组或对象实现，数组实现简单但出队操作性能较差（O(N)），推荐使用对象模拟指针（head和tail）实现O(1)时间复杂度的入队和出队操作；与栈（LIFO）和链表（灵活存储结构）相比，队列强调顺序处理，适用于需要公平调度的系统，如打印队列、异步任务处理等，其抽象行为可由不同底层结构实现，选择应基于性能需求与操作模式。
- 文章 · 前端 | 10个月前 | 479浏览 收藏
-
- JS获取对象键名的3种实用方法
- 获取JavaScript对象所有键名最直接的方式是使用Object.keys()，它返回对象自身可枚举的字符串键名数组；2.与for...in不同，Object.keys()不遍历原型链且不包含不可枚举属性，而for...in会遍历原型链上的可枚举属性，需配合hasOwnProperty过滤；3.若需获取属性值或键值对，可分别使用Object.values()和Object.entries()；4.对于Symbol键名，需使用Object.getOwnPropertySymbols()获取；5.要获取所有
- 文章 · 前端 | 10个月前 | 479浏览 收藏
-
- JavaScript延迟执行技巧：setTimeout实战解析
- 本教程深入探讨JavaScript中实现代码延迟执行的正确方法，重点讲解setTimeout函数。针对同步sleep函数在UI操作中导致页面卡顿的问题，文章详细阐述了setTimeout的异步工作原理及其在用户界面交互中的应用，并提供示例代码，帮助开发者优雅地实现定时任务和动画效果。
- 文章 · 前端 | 10个月前 | 479浏览 收藏
-
- JavaScript碰撞检测技巧与实现方法
- JS碰撞检测通过几何关系判断图形是否重叠，常用AABB、圆形检测等方法；AABB因计算简单高效，适合初步筛选碰撞，广泛用于游戏开发。
- 文章 · 前端 | 10个月前 | 479浏览 收藏
-
- PactBroker升级后文件失效排查与解决方法
- 本文旨在解决PactBroker升级后，消费者配置中的pactFileWriteMode=overwrite失效的问题。通过分析问题原因，即Pact客户端库已移除该配置，并提供启用allow_dangerous_contract_modification功能的替代方案，帮助开发者理解并解决Pact文件覆盖问题。同时，强调了启用该功能可能带来的风险，建议采用更安全的版本控制方式。
- 文章 · 前端 | 10个月前 | 479浏览 收藏
查看更多
课程推荐
-
- 前端进阶之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推荐
-
- ljg-skills
- ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
- 4476次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！
- 4120次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。
- 4107次使用
-
- 剧云
- 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。
- 4294次使用
-
- 万象有声
- 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！
- 4267次使用
