前端技术文章

  • Flexbox响应式网格制作教程
    Flexbox响应式网格制作教程
    使用Flexbox可高效创建响应式图片画廊。1.建立包含多个.item子项的.gallery容器;2.设置display:flex与flex-wrap:wrap,实现项目自动换行并用gap控制间距;3.通过flex:11250px等设置让项目可伸缩,适配不同屏幕;4.结合媒体查询,在768px和480px断点下调整item尺寸,实现多设备兼容布局。
    文章 · 前端   |  1个月前  |   407浏览 收藏
  • 如何用 MessageChannel 实现 Web Worker 与主线程的双向异步通信
    如何用 MessageChannel 实现 Web Worker 与主线程的双向异步通信
    MessageChannel是提供两个隔离MessagePort实例的双向通信机制,相比postMessage可避免消息队列竞争、支持零拷贝传输、实现端口专属与复用。
    文章 · 前端   |  1个月前  |   407浏览 收藏
  • 如何利用 structuredClone() 处理具备 ImageBitmap 原始资源的图形对象拷贝
    如何利用 structuredClone() 处理具备 ImageBitmap 原始资源的图形对象拷贝
    structuredClone()无法拷贝ImageBitmap,因其是不可序列化的原生图形资源句柄,不属于结构化克隆白名单类型,调用会抛出DataCloneError;替代方案包括转为ImageData中转、Transferable句柄移交或clone()复用。
    文章 · 前端   |  1个月前  |   407浏览 收藏
  • 如何用 Service Worker 实现 Web Push 网页原生推送通知
    如何用 Service Worker 实现 Web Push 网页原生推送通知
    WebPush实现需三步:注册ServiceWorker并监听push事件、申请用户授权后获取PushSubscription、后端用VAPID私钥加密发送消息;须遵守HTTPS、userVisibleOnly、公私钥匹配等安全限制。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • GitHubPages表格不显示分数怎么解决
    GitHubPages表格不显示分数怎么解决
    本文详解因JavaScript语法错误(多余闭合大括号、重复变量声明、未定义变量引用)导致leaderboard表格数据无法渲染的典型问题,并提供可直接部署的修复代码与调试建议。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • 斗鱼HTML代码使用技巧与要点
    斗鱼HTML代码使用技巧与要点
    斗鱼平台仅允许使用<b>、<i>、<u>、<s>、<sub>、<sup>等基础格式化标签,禁用所有脚本、嵌入式标签及CSS样式;弹幕中HTML会被转义为纯文本,公告栏可用<br>换行,推荐使用内置富文本工具实现加粗、斜体等效果。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • HTML5BroadcastChannel实现多标签通信方法
    HTML5BroadcastChannel实现多标签通信方法
    BroadcastChannel是浏览器原生支持的同源跨标签页广播通信机制,仅限同协议、域名、端口页面间使用,不兼容IE,消息自动送达所有同名频道监听页但不包括发送方自身,需手动close()防泄漏。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • HTMLoutput标签与oninput事件使用教程
    HTMLoutput标签与oninput事件使用教程
    output标签本身不计算,只负责语义化显示;实时更新依赖oninput事件配合JavaScript表达式,推荐绑定在form上以自动代理子元素事件,优先使用value属性赋值并注意空值兜底处理。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • article、section、aside、nav 语义化标签真实用法对比
    article、section、aside、nav 语义化标签真实用法对比
    语义化标签需按内容角色而非样式选用:article用于可独立分发的内容单元,section用于同主题逻辑分组,aside用于非核心补充信息,nav专用于导航链接集合。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • 首行缩进两字符,CSStext-indent设置方法
    首行缩进两字符,CSStext-indent设置方法
    text-indent无效的首要原因是作用于行内元素(如<span>、),它仅对块级元素或display设为block/inline-block的元素生效;需检查元素类型、父容器布局及是否被其他样式覆盖。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • 标签详解:保留空格换行的文本展示方法
    标签详解:保留空格换行的文本展示方法
    <pre>标签在HTML中用于保留文本的原始格式。1)它适用于展示代码、诗歌等需要保持格式的文本。2)使用时需在文本前后加上<pre>和</pre>。3)结合<code>标签可更好展示代码。4)使用时需注意文本默认使用等宽字体和可能影响页面布局。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • CSS如何用:not()精准排除元素控制样式
    CSS如何用:not()精准排除元素控制样式
    答案::not()伪类可排除特定元素实现精准样式控制。通过:not(选择器)语法,如p:not(.highlight)或input:not([disabled]),能为不匹配条件的元素应用样式,常用于跳过特殊类、状态或结构的元素,结合属性与结构选择器可实现高级过滤,但需注意仅支持单个简单参数、不兼容旧版IE且不可选伪元素,现代浏览器广泛支持,合理使用可提升代码简洁性与维护性。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • HTML制作sitemap站点地图方法【速查】
    HTML制作sitemap站点地图方法【速查】
    HTML站点地图是供用户阅读的语义化导航页,须用<h2><ul><li><a>等标准标签构建,禁用XML结构;XML站点地图须程序生成、严格校验格式与URL有效性,超限需分片并通过sitemapindex.xml聚合。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • BEM命名法解决CSS维护难题
    BEM命名法解决CSS维护难题
    根本原因是类名层级未真正解耦,BEM要求样式严格基于单个类名匹配、禁用结构选择器与动态拼接,需统一修饰符前缀、硬编码类名、避免CSSModules破坏可读性,并通过工具校验和协作对齐保障体系落地。
    文章 · 前端   |  2个月前  |   407浏览 收藏
  • vw vh单位在响应式中的应用方法
    vw vh单位在响应式中的应用方法
    vw和vh是基于视口宽度和高度的CSS单位,1vw等于视口宽度的1%,1vh等于高度的1%,可实现元素尺寸的响应式自适应。它们适用于全屏布局(如height:100vh)、响应式字体(如calc(16px+2vw))、等比容器(如width:80vw;height:80vw)及弹性间距控制。使用时需注意移动端地址栏导致的100vh异常、小屏文字溢出问题,建议结合clamp()限定范围,并为老浏览器提供px回退方案,以提升兼容性与体验一致性。
    文章 · 前端   |  2个月前  |   407浏览 收藏
查看更多
课程推荐
  • 前端进阶之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 工作流和沉淀团队常用智能体能力。
    3365次使用
  • MELO音乐 - AI 音乐生成平台,支持多模态创作能力
    MELO音乐
    MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
    3113次使用
  • UniScribe - AI 免费在线音视频转文字平台
    UniScribe
    UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
    3071次使用
  • 剧云 - 免费 AI 智能中文剧本创作平台
    剧云
    剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
    3274次使用
  • 万象有声 - AI 一站式有声内容创作平台
    万象有声
    万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
    3230次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码