前端技术文章

  • CSS逐字闪烁动画实现方法
    CSS逐字闪烁动画实现方法
    <ol><li>要实现文字逐字闪烁效果,需将每个字符包裹在span标签中,并通过CSS变量和animation-delay实现交错延迟;2.使用steps()函数可让闪烁呈现分帧式的硬切换效果,模拟老式屏幕的颗粒感;3.结合animation-duration控制整体节奏,steps(1,end)确保状态瞬间切换,避免平滑过渡;4.通过calc(var(--i,0)*0.1s)动态计算每个字符的延迟,实现逐字依次闪烁;5.除闪烁外,steps()还可用于打字机、帧动画等需要离散变化
    文章 · 前端   |  4个月前  |   CSS 291浏览 收藏
  • CSS多列对齐技巧解析
    CSS多列对齐技巧解析
    绝对定位多列不重叠需按内容最大宽度设列宽并加间隙,left用累计偏移计算,父容器须设height防塌陷,IE11避免混合单位calc()。
    文章 · 前端   |  4个月前  |   359浏览 收藏
  • HTML入门指南:初学者必学核心知识
    HTML入门指南:初学者必学核心知识
    HTML不是编程语言,只需掌握标签用法即可构建网页;标签如<h1><p><img>用于定义内容结构而非执行逻辑;必须包含DOCTYPE、lang和charset三要素;应优先使用语义化标签如<nav><main><article>;表单需正确设置action、method、type、name等属性。
    文章 · 前端   |  4个月前  |   344浏览 收藏
  • 流式布局实现技巧与方法解析
    流式布局实现技巧与方法解析
    流式布局需同时控制伸缩边界和盒模型行为:父容器须有明确宽度,所有元素设box-sizing:border-box,优先用flex而非百分比,配合viewportmeta和断点响应式调节。
    文章 · 前端   |  4个月前  |   246浏览 收藏
  • Flex换行后行间距大?调align-content解决
    Flex换行后行间距大?调align-content解决
    Flex换行后行间距“过大”是align-content:stretch默认拉伸整行所致,它将交叉轴剩余高度均分给各行,撑开子项造成视觉错觉;应改用align-content:flex-start关闭拉伸,再配合row-gap设置固定行距。
    文章 · 前端   |  4个月前  |   358浏览 收藏
  • HTMLtime标签用法与语义化实践
    HTMLtime标签用法与语义化实践
    必须用datetime属性,否则time标签无语义价值;需用ISO8601格式(如2024-03-15T09:22+08:00);支持持续时间(PT2H30M);显示文本与datetime可分离;影响SEO和可访问性,但无性能开销。
    文章 · 前端   |  4个月前  |   130浏览 收藏
  • 宝可梦图鉴遍历与渲染技巧
    宝可梦图鉴遍历与渲染技巧
    本文详解如何通过维护当前索引、重构数据结构与分离关注点,实现宝可梦图鉴中按需渲染单个条目(如初始显示妙蛙种子),而非一次性显示全部数据。
    文章 · 前端   |  4个月前  |   486浏览 收藏
  • CSS快速创建盒子:div标签与宽高设置
    CSS快速创建盒子:div标签与宽高设置
    用div创建宽高盒子需同时设置width和height,并推荐添加background-color确认显示;常见不显示原因包括父容器无高度、display被修改、CSS权重不足、overflow裁剪等。
    文章 · 前端   |  4个月前  |   104浏览 收藏
  • CSS全屏布局vhvw使用详解
    CSS全屏布局vhvw使用详解
    100vh在iOSSafari中“不够高”是因为其基于初始布局视口且不响应地址栏动态变化;应优先使用height:env(height)并fallback到-webkit-fill-available和100vh,复杂场景需JS监听visualViewport实时同步。
    文章 · 前端   |  4个月前  |   247浏览 收藏
  • 网页预览图设置:OG:image标签配置教程
    网页预览图设置:OG:image标签配置教程
    og:image必须在HTML的<head>中、<title>之后且<linkrel="canonical">之前硬编码为HTTPS绝对路径,配合显式宽高声明,并通过SSR动态生成,否则社交平台爬虫无法识别。
    文章 · 前端   |  4个月前  |   html 107浏览 收藏
  • HTML中标签的作用与使用技巧
    HTML中标签的作用与使用技巧
    wbr是仅在容器宽度不足且CSS允许折行时才生效的语义断点标记,须插在URL斜杠后、驼峰大写字母前等逻辑分隔处,并配合max-width、overflow-wrap:break-word和white-space:normal才有效。
    文章 · 前端   |  4个月前  |   150浏览 收藏
  • HTML加密工具在线使用教程【附代码】
    HTML加密工具在线使用教程【附代码】
    HTML无法真正加密文本,所有“HTML加密工具”实为前端JS实现的简单编码或混淆,密钥硬编码在页面中,开发者工具可直接查看,完全不安全。
    文章 · 前端   |  4个月前  |   467浏览 收藏
  • 路由跳转导致内存泄漏怎么查?组件未销毁问题解析
    路由跳转导致内存泄漏怎么查?组件未销毁问题解析
    路由跳转内存泄漏核心在于组件未真实卸载或资源未释放:一是框架复用组件导致生命周期钩子未触发,二是全局监听、定时器、订阅等外部引用未清理,需通过钩子打点和浏览器工具双重验证。
    文章 · 前端   |  4个月前  |   426浏览 收藏
  • HTML表单创建与字段设置全解析
    HTML表单创建与字段设置全解析
    HTML表单通过form和input标签实现用户交互,使用action和method属性指定提交地址与方式,结合type类型与label标签可创建登录、注册等功能,合理设置required、name等属性提升可用性与数据准确性。
    文章 · 前端   |  4个月前  |   420浏览 收藏
  • HTML中kbd标签使用详解与示例
    HTML中kbd标签使用详解与示例
    <kbd>标签用于语义化表示用户键盘输入,正确用法是将每个按键拆分为独立<kbd>元素并用文本连接(如<kbd>Ctrl</kbd><span>+</span><kbd>V</kbd>),避免<kbd>Ctrl+V</kbd>式嵌套;需CSS定制样式以模拟物理按键,并注意跨平台差异与使用边界。
    文章 · 前端   |  4个月前  |   336浏览 收藏
查看更多
课程推荐
  • 前端进阶之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模型性能。
    255次使用
  • H2O EvalGPT:开源LLM大模型评估与排行榜工具
    H2O EvalGPT
    H2O EvalGPT是H2O.ai推出的开源LLM评估平台,提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能,助您快速选择最适合项目的高性能大语言模型。
    298次使用
  • LMArena是什么?伯克利AI模型评估平台使用指南与功能解析
    LMArena
    LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制,用户可对比不同大模型回答并生成实时排行榜,助力开发者优化模型及用户选择最佳AI工具。
    274次使用
  • 斯坦福HELM:大语言模型Holistic Evaluation整体评估框架详解
    HELM
    深入了解斯坦福推出的HELM(Holistic Evaluation of Language Models)大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景,涵盖准确性、公平性、鲁棒性等多维度指标,助力开发者全面优化语言模型性能。
    252次使用
  • MMBench详解:多模态大模型基准测试、功能特点与使用指南
    MMBench
    MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台,提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景,助力开发者全面评估多模态模型性能。
    59次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码