前端技术文章

  • HTML加载视频教程|多媒体嵌入方法
    HTML加载视频教程|多媒体嵌入方法
    HTML嵌入视频有四种方式:一、用<video>标签直接加载本地视频,支持多格式source和降级提示;二、JavaScript动态设置src并load/play;三、iframe嵌入第三方平台视频;四、排查MIME、路径、CORS等加载失败原因。
    文章 · 前端   |  1个月前  |   311浏览 收藏
  • JavaScript单元测试指南:提升代码质量
    JavaScript单元测试指南:提升代码质量
    单元测试是验证JavaScript最小功能单元正确性的方法,如对函数进行隔离测试。以calculateDiscount函数为例,需覆盖正常值、边界值和异常输入,确保逻辑无误。常用工具包括Jest(集成度高,适合React与Node.js)、Mocha+Chai(灵活,适合传统项目)、Vitest(适配Vite,速度快)和Sinon.js(用于模拟函数行为)。编写高质量测试应使用describe和it组织结构,关注输出而非实现细节,合理使用mock处理依赖,如通过jest.spyOn模拟异步请求并校验结果。
    文章 · 前端   |  1个月前  |   245浏览 收藏
  • input重置按钮怎么用?
    input重置按钮怎么用?
    type="reset"仅重置有name属性且初始值由HTML属性(value/checked/selected)设定的字段;忽略JS动态设置的值、无name字段、textarea标签内文本及JS修改的defaultValue。
    文章 · 前端   |  1个月前  |   476浏览 收藏
  • CSS响应式图片加载抖动怎么解决
    CSS响应式图片加载抖动怎么解决
    图片加载抖动本质是重排,因未加载时img宽高为0,资源就绪后尺寸突变触发layout→paint→composite;用aspect-ratio+width可提前预留空间,需配合width:100%及object-fit,旧版浏览器可用padding-top降级,同时HTML中保留width/height属性并避免height:auto覆盖aspect-ratio。
    文章 · 前端   |  1个月前  |   488浏览 收藏
  • HTML语义化标签作用解析【推荐】
    HTML语义化标签作用解析【推荐】
    HTML语义化标签是现代前端开发的底线要求,而非加分项;不用它们会导致可访问性、SEO和协作维护出现硬伤。
    文章 · 前端   |  1个月前  |   236浏览 收藏
  • index.html调用数据库数据方法详解
    index.html调用数据库数据方法详解
    index.html无法直接连接数据库,必须通过后端服务中转;前端用fetch调用API,后端连接数据库并返回JSON;切勿硬编码数据库凭证,需处理CORS和安全防护。
    文章 · 前端   |  1个月前  |   203浏览 收藏
  • 基于规则引擎的JavaScript决策系统构建指南
    基于规则引擎的JavaScript决策系统构建指南
    答案:构建基于规则引擎的JavaScript决策系统需定义条件与动作分离的规则结构,通过RuleEngine类实现规则注册、动态条件评估与动作执行,支持灵活配置业务逻辑。示例中使用Function构造器解析条件和动作,结合数据输入触发相应行为,如根据用户属性判断是否发送优惠券。为提升实用性,可扩展优先级控制、异步支持、外部存储、可视化编辑及日志追踪。核心在于解耦业务规则与代码,增强可维护性与非开发人员参与度,同时注意动态执行的安全风险与性能优化。
    文章 · 前端   |  1个月前  |   432浏览 收藏
  • HTML Integrity属性:安全校验子资源关键
    HTML Integrity属性:安全校验子资源关键
    integrity属性仅在crossorigin配置正确、哈希算法匹配、文件内容精准对应且限于script/link标签时生效;漏配crossorigin、哈希错误、动态加载未手动校验或MIME类型不符均导致校验失败。
    文章 · 前端   |  1个月前  |   397浏览 收藏
  • 浮动导致父容器塌陷怎么解决
    浮动导致父容器塌陷怎么解决
    子元素浮动导致父容器高度塌陷,可通过clearfix类或overflow:hidden解决;推荐使用clearfix::after添加清浮动,避免溢出问题,而overflow:hidden触发BFC但可能裁剪内容。
    文章 · 前端   |  1个月前  |   CSS浮动 父容器高度塌陷 357浏览 收藏
  • HTML图片无法显示怎么解决?图文教程
    HTML图片无法显示怎么解决?图文教程
    图片无法显示主因是路径错误、文件名不匹配、格式不支持或运行环境问题。1.检查相对/绝对路径是否正确,推荐使用相对路径;2.确保文件名和扩展名大小写一致且无拼写错误;3.使用浏览器支持的格式如.jpg、.png、.webp;4.验证HTML语法规范,确保img标签正确书写并添加alt属性;5.避免直接双击打开HTML,应通过本地服务器运行以排除跨域限制。按序排查可解决90%问题。
    文章 · 前端   |  1个月前  |   html 图片 416浏览 收藏
  • CSS过渡除了hover外,还可以通过focus、active等伪类触发,实现更丰富的交互效果。以下是具体方法和示例:1. 通过 focus 触发过渡当元素获得焦点时(如点击输入框或通过键盘导航),可以触发动画。/* 默认状态 */
.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 0.5s e
    CSS过渡除了hover外,还可以通过focus、active等伪类触发,实现更丰富的交互效果。以下是具体方法和示例:1. 通过 focus 触发过渡当元素获得焦点时(如点击输入框或通过键盘导航),可以触发动画。/* 默认状态 */ .box { width: 100px; height: 100px; background: red; transition: all 0.5s e
    transition在:focus/:active中不生效,主因是未声明属性初始值、:active持续时间过短、或使用了不可过渡属性(如visibility、display);需显式设初始值、用max-height/opacity替代、添加tabindex支持键盘focus,并慎用transition-delay。
    文章 · 前端   |  1个月前  |   459浏览 收藏
  • Canvas 图像平滑旋转动画实现方法
    Canvas 图像平滑旋转动画实现方法
    本文讲解为何阻塞式延迟函数fSleep会导致Canvas动画卡死,并提供基于setTimeout的非阻塞动画方案,确保汽车图像在背景上流畅、逐帧旋转。
    文章 · 前端   |  1个月前  |   334浏览 收藏
  • JavaScript中如何使用Error对象处理异常?有哪些错误类型?
    JavaScript中如何使用Error对象处理异常?有哪些错误类型?
    JavaScript中Error对象是处理运行时异常的核心,支持创建抛出、try...catch捕获、内置错误类型及自定义错误类,实现错误的可读、可控、可追踪。
    文章 · 前端   |  1个月前  |   393浏览 收藏
  • JavaScript低代码平台核心引擎构建全解析
    JavaScript低代码平台核心引擎构建全解析
    答案是构建基于JavaScript的低代码平台核心引擎需实现可视化配置到可执行代码的动态转换,关键包含五大模块:1.设计统一JSONSchema结构的可视化组件模型,描述组件类型、属性与事件;2.基于React/Vue实现运行时渲染引擎,通过组件注册表与通用渲染器将配置转为DOM并支持嵌套布局;3.构建轻量级状态系统,管理全局数据上下文,支持表达式绑定与数据响应;4.实现事件与动作系统,定义标准动作类型并按配置执行操作序列;5.支持配置JSON持久化、插件扩展与钩子机制,确保可维护性与灵活性。核心在于“配
    文章 · 前端   |  1个月前  |   440浏览 收藏
  • CSS响应式布局移动端滚动优化技巧
    CSS响应式布局移动端滚动优化技巧
    通过transform和will-change启用硬件加速,提升滚动帧率;2.减少重排重绘,避免高成本CSS属性,采用虚拟滚动降低DOM负担;3.使用-webkit-overflow-scrolling:touch和overscroll-behavior优化原生滚动行为;4.避免scroll事件重绘,使用passive监听器和懒加载占位提升响应速度,从而整体增强移动端滚动流畅性。
    文章 · 前端   |  1个月前  |   227浏览 收藏
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    485次学习
  • Golang深入理解GPM模型
    Golang深入理解GPM模型
    Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
    474次学习
查看更多
AI推荐
  • ljg-skills -
    ljg-skills
    ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
    2505次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    2312次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    2258次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    2457次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    2435次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码