前端技术文章

  • 无需框架的渐进增强路由实现方法
    无需框架的渐进增强路由实现方法
    先保证链接可访问和页面跳转,再用JavaScript增强体验。通过原生HistoryAPI(pushState、replaceState)更新URL并监听popstate事件实现无刷新路由,拦截内链点击进行异步内容加载;结合路由表匹配路径并渲染对应视图,支持动态插入HTML或懒加载片段;服务端返回统一入口页以保障无JS时的基础可用性,实现渐进增强;附加标题管理、loading提示与hashfallback兼容旧环境,核心是分层控制:HTML负责可用,JS提升体验。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • Canvas旋转控制技巧全解析
    Canvas旋转控制技巧全解析
    本文详细介绍了在HTML5Canvas中实现单个图形元素独立旋转的方法。通过利用ctx.save()和ctx.restore()方法,开发者可以有效地隔离变换操作,确保只有目标图形受到旋转影响。文章涵盖了围绕画布原点和围绕元素自身中心点旋转的两种常见场景,并提供了具体的代码示例和实现技巧,帮助读者掌握Canvas变换上下文的管理。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • JavaScript与Flask多表单提交教程
    JavaScript与Flask多表单提交教程
    本文详细阐述了如何通过JavaScript结合Flask后端,实现单个按钮触发多个HTML表单的提交,并确保所有表单数据都能被后端正确接收。文章分析了直接调用submit()方法失败的原因,并提供了基于XMLHttpRequest的异步提交解决方案,确保数据完整性与后端处理的灵活性。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • aside标签用于定义与主内容相关但可独立存在的部分,常用于侧边栏、引用、导航等,提升页面语义化和结构清晰度。
    aside标签用于定义与主内容相关但可独立存在的部分,常用于侧边栏、引用、导航等,提升页面语义化和结构清晰度。
    aside标签适合放与页面主题相关但非核心的内容,如侧边栏广告、相关链接、作者信息、引用或名言、次要导航、推荐文章、术语解释等。位置可放在主内容旁、下方或文章内部,需符合阅读习惯。与section的区别在于section是主要内容的一部分,而aside是辅助信息。SEO优化需注意内容相关性、关键词适度使用、链接质量及用户体验。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • CSS线性渐变入门教程详解
    CSS线性渐变入门教程详解
    linear-gradient()用于创建平滑过渡的背景图像,属于CSS渐变函数,通过background-image设置。1.基本语法为background-image:linear-gradient(direction,color-stop1,color-stop2,...);2.direction定义方向如totop或角度;3.color-stop指定颜色及位置,可带百分比精确控制;4.示例包括从上到下、从左到右、对角线及多色渐变;5.实际应用需注意使用background-image而非backg
    文章 · 前端   |  1年前  |   480浏览 收藏
  • LinguiJS宏未生效解决方法
    LinguiJS宏未生效解决方法
    本教程深入探讨LinguiJSt宏在React应用中无法正确翻译的常见问题。文章解释了Trans组件和t宏的工作原理差异,并提供了通过useLingui钩子和msg宏(defineMessage的别名)结合i18n._方法实现正确国际化翻译的专业解决方案和示例代码。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • ReactNative持久化设置安装教程
    ReactNative持久化设置安装教程
    本教程详细介绍了如何在ReactNative应用中,利用AsyncStorage实现应用设置的持久化,尤其侧重于在应用首次安装或启动时加载默认设置,并在用户修改后保存。文章涵盖了AsyncStorage的安装、数据存取、与ReactHooks的集成,并提供了完整的示例代码和最佳实践,确保设置在应用关闭后依然有效。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • 跨域请求解决方法全解析
    跨域请求解决方法全解析
    跨域请求的核心是绕开浏览器同源策略,主要通过CORS、JSONP或代理服务器实现。CORS是现代开发首选,需服务器设置Access-Control-Allow-Origin等响应头,浏览器自动处理预检请求;JSONP利用script标签无同源限制,仅支持GET且存在安全风险;代理服务器在开发或生产环境转发请求,规避跨域问题。调试时应结合开发者工具查看请求响应头、检查预检请求、使用curl测试,并确保协议、域名、端口一致,避免因凭证、头部或方法不匹配导致失败。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • 多列布局实现方法详解
    多列布局实现方法详解
    最推荐使用CSSGrid,通过display:grid和grid-template-columns:repeat(auto-fit,minmax(250px,1fr))实现响应式多列新闻卡片布局,配合gap设置间距,代码简洁且自适应性强。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • CSSopacity实现淡入淡出技巧
    CSSopacity实现淡入淡出技巧
    使用CSStransition与opacity可实现元素淡入淡出效果。.fade-in初始opacity为0,添加.show类后过渡至1实现淡入;.fade-out初始opacity为1,添加.hide类后降至0完成淡出,配合visibility:hidden和display:none可在动画后彻底隐藏元素,适用于模态框、轮播图等场景。
    文章 · 前端   |  1年前  |   动画 淡入淡出 网页元素 opacity CSStransition 480浏览 收藏
  • Flex布局与CSS盒模型详解
    Flex布局与CSS盒模型详解
    Flex布局中盒模型仍起基础作用,width和height在box-sizing:border-box下包含padding和border,使尺寸控制更精准;flex项目尺寸受content、padding、border影响,推荐全局设置box-sizing:border-box避免溢出;margin不参与flex计算但影响占位,可用margin或gap控制间距,两者协同实现稳定响应式布局。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • CSSvertical-align属性怎么用?
    CSSvertical-align属性怎么用?
    vertical-align用于调整行内元素在行盒内的垂直位置,仅对inline、inline-block或table-cell元素有效,常用于图片与文字的垂直对齐;若在块级元素上失效,需检查display属性。实现图片文字居中常用vertical-align:middle,配合line-height可优化效果;而块级元素的垂直居中应选用Flexbox(align-items:center)、Grid(place-items:center)或绝对定位+transform等方法。
    文章 · 前端   |  1年前  |   CSS FLEXBOX 垂直居中 Grid vertical-align 480浏览 收藏
  • 机器可读时间格式有哪些
    机器可读时间格式有哪些
    答案:机器可读时间采用标准化格式如ISO8601,以消除歧义并支持时区,Python用isoformat()、Java用Instant.now().toString()生成ISO时间,时区需显式指定避免错误,Unix时间戳虽简单但可读性差且有2038年问题,JSON格式灵活但易不一致,ISO8601因兼容性好成为首选。
    文章 · 前端   |  1年前  |   时间格式化 Unix时间戳 时区 ISO8601 机器可读时间 480浏览 收藏
  • CSSflex布局入门:display:flex使用教程
    CSSflex布局入门:display:flex使用教程
    使用display:flex可创建弹性容器,其子元素沿主轴排列,通过flex-direction控制方向,justify-content设置主轴对齐,align-items定义交叉轴对齐,实现响应式布局与居中等效果。
    文章 · 前端   |  1年前  |   480浏览 收藏
  • JS节流函数怎么用?throttle原理详解
    JS节流函数怎么用?throttle原理详解
    节流函数的核心是控制函数在指定时间间隔内最多执行一次,通过闭包和定时器实现;2.它适用于需要规律执行的场景,如滚动、窗口缩放、拖拽等事件;3.与防抖不同,节流保证周期性执行,而防抖只在事件停止后执行一次;4.生产级实现需考虑this上下文、参数传递、leading/trailing配置、取消机制及时间戳可靠性,确保函数健壮、灵活且无内存泄漏,最终返回一个可被安全调用的节流化函数。
    文章 · 前端   |  1年前  |   480浏览 收藏
查看更多
课程推荐
  • 前端进阶之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推荐
  • PubMedQA数据集详解:生物医学问答基准、功能与应用指南
    PubMedQA
    深入了解PubMedQA生物医学问答数据集,涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用,助力提升NLP模型性能。
    471次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    531次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    551次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    501次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    318次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码