一月内热门-前端技术文章-Golang学习网

分类:

最新
热门

一月内

三天内一周内一月内三月内

<"> <">

<">picture标签的作用是为不同设备和屏幕尺寸提供更灵活的响应式图片解决方案。它允许你定义多个source元素，每个source可以指定不同的媒体查询、图片格式或分辨率，浏览器会根据当前环境选择最合适的图片加载。响应式图片加载方式：使用标签： <

<picture>标签通过结合<source>和<img>实现响应式图片加载，能根据设备特性选择最合适的图片资源；2.它支持基于媒体查询的“艺术方向”调整和图片格式切换（如WebP/AVIF），而<img>仅支持分辨率切换；3.srcset提供多版本图片资源，sizes定义不同视口下图片的布局宽度，浏览器据此计算并选择最优图片；4.其他响应式方案包括：使用<img>的srcset和sizes、CSS背景图配合媒体查询、JavaScript动态加载

文章 · 前端 | 1星期前 | 423浏览收藏
CSS选择器有哪些？常用选择器全面解析

CSS选择器类型包括元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子选择器、伪类选择器和伪元素选择器。1.元素选择器通过标签名选择元素，如div。2.类选择器通过class属性选择元素，如.my-class。3.ID选择器通过id属性选择元素，如#my-id。4.属性选择器通过元素属性选择，如a[href]。5.后代选择器选择元素的后代，如ulli。6.子选择器选择直接子元素，如div>p。7.伪类选择器根据元素状态选择，如a:hover。8.伪元素选择器根据元素位置选择，如p::fir

文章 · 前端 | 6天前 | 423浏览收藏
让JS原型链属性不可配置，可使用Object.defineProperty()或Object.defineProperties()方法，并将configurable设置为false。这样可以防止该属性被删除或重新定义。示例代码：functionPerson(){}//定义原型属性Object.defineProperty(Person.prototype,'name',{value:'John',

要让JavaScript原型链上的属性不可配置，必须使用Object.defineProperty方法作用于属性所在的原型对象；2.将该属性的configurable描述符设为false，即可防止属性被删除或重新配置；3.一旦设为不可配置，就无法再通过defineProperty修改其属性描述符，也无法删除该属性；4.实例可通过定义同名自有属性来遮蔽原型属性，但不会影响原型上属性的不可变性。此操作能有效保护核心属性不被意外修改或删除，提升代码健壮性和行为一致性，适用于需要确保原型属性稳定不变的场景。

文章 · 前端 | 6天前 | 423浏览收藏
CSS实现视差滚动背景效果

1.实现视差滚动的核心方法是使用CSS的background-attachment:fixed属性，通过将背景图固定在视口上，而内容正常滚动，形成视觉深度感。2.具体步骤包括：为容器设置背景图并应用background-attachment:fixed、background-size:cover和background-position:center以确保适配性。3.该方法存在局限，如不支持多层不同速度滚动、移动端兼容性问题、图片加载性能影响以及可能引发用户不适。4.优化措施包括图片压缩与格式选择、使用媒体

文章 · 前端 | 4天前 | 423浏览收藏
表单音效添加与播放技巧详解

答案是使用HTML5的<audio>标签结合JavaScript监听用户操作来实现表单音效，通过预加载音频并在点击、提交成功或失败时触发播放，提升交互体验。需注意浏览器自动播放策略、音频格式兼容性、加载时机和用户体验，避免滥用。

文章 · 前端 | 2天前 | JavaScript 用户体验 HTML5audio 表单音效自动播放策略 423浏览收藏
I/O阶段是什么？事件循环关键解析

I/O阶段是事件循环中负责收集已完成异步I/O操作回调并放入执行队列的机制，它不执行I/O而是接收操作系统通知；2.它确保程序非阻塞运行，像调度员一样让主线程持续处理任务而不被外部资源等待卡住；3.非阻塞I/O是其基础，操作系统通过epoll/kqueue等机制通知事件循环哪些I/O已就绪；4.优化方式包括：用异步API替代同步、合并小I/O操作、使用流式处理大文件、限制并发I/O数量、合理利用缓存减少重复读写，最终提升应用响应速度和资源效率。

文章 · 前端 | 3星期前 | 422浏览收藏
iframe内联HTML：srcdoc使用详解

srcdoc属性允许在iframe中直接嵌入HTML内容，无需外部请求，适用于小型、动态或需隔离的场景。1.使用srcdoc可避免HTTP请求，提升渲染速度，适合预览用户输入的HTML、展示代码片段或组件；2.与src属性相比，srcdoc为内联内容，而src加载外部资源，前者适合静态或动态小内容，后者适合大型或频繁更新的页面；3.安全性方面，srcdoc默认具有唯一源隔离，但必须配合sandbox属性使用，如sandbox="allow-scripts"可允许脚本执行，同时限制其他权限，防止XSS攻击；

文章 · 前端 | 3星期前 | 422浏览收藏
parseInt与parseFloat区别详解

parseInt用于提取字符串中的整数部分，遇到非数字字符或小数点即停止解析，例如parseInt("10.5")结果为10；parseFloat则能处理小数点，解析至第二个小数点或非数字字符为止，如parseFloat("10.5px")结果为10.5。两者均忽略开头的空格和正负号，但parseFloat不支持基数参数，始终以十进制解析；而parseInt通过指定第二个参数（如parseInt("08",10)）可避免因进制猜测导致的错误。使用时需注意：1.对于非数字开头的字符串（如"hello123"

文章 · 前端 | 3星期前 | 422浏览收藏
JavaScript闭包缓存API数据技巧

闭包能实现API响应数据的缓存，因为它通过内部函数引用外部函数的变量，使这些变量在外部函数执行后仍保留在内存中，不会被垃圾回收；2.选择闭包缓存的优势在于其私有性和持久性，缓存数据被封装在函数作用域内，仅通过返回的函数访问，避免了全局污染，且每个闭包实例独立，互不干扰；3.实际应用场景包括缓存用户配置、静态资源列表等不频繁更新但高频访问的数据，也可用于函数结果的记忆化以提升性能；4.需要注意的陷阱包括内存泄漏风险（因闭包长期持有数据）和数据新鲜度问题（缺乏自动失效机制），需自行实现过期策略或手动清除；5.

文章 · 前端 | 3星期前 | 422浏览收藏
CSS如何设置mix-blend-mode混合模式？

mix-blend-mode是CSS属性，用于设置元素与其下方内容的混合模式，以实现视觉叠加效果。1.它接受多种混合模式值，如normal、multiply、screen、overlay等，决定元素颜色如何与下方内容进行计算；2.常用于文本与背景图像融合、创建镂空或蒙版效果、图形叠加等场景；3.与background-blend-mode不同，mix-blend-mode作用于元素整体与页面内容的混合，而background-blend-mode仅作用于元素内部的多个背景图像之间；4.使用时需注意浏览器兼

文章 · 前端 | 2星期前 | 422浏览收藏
Webpackoutput作用与使用场景详解

webpack的output配置核心是定义打包文件的存储位置（path）、文件命名规则（filename）及浏览器引用路径（publicPath）；2.path为本地绝对路径（如dist目录），publicPath为资源在浏览器中的URL前缀（如/assets/），二者作用维度不同易混淆；3.处理图片字体等静态资源时，webpack5推荐使用assetModuleFilename配合占位符（如[name].[hash][ext]）控制输出格式；4.多页面应用中通过[name]占位符实现各页面JS独立命名，

文章 · 前端 | 2星期前 | 422浏览收藏
CSS选择器类型有哪些？全面解析分类

CSS选择器类型包括类型选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器。1.类型选择器通过标签名选择元素，建议结合类选择器提高灵活性。2.类选择器通过class属性选择元素，优于ID选择器，因其可复用性高。3.ID选择器通过id属性选择元素，使用时需谨慎避免耦合性增加。4.属性选择器通过元素属性值选择元素，可结合正则表达式处理复杂匹配。5.伪类选择器根据元素状态选择元素，6.伪元素选择器创建不存在于DOM中的元素，建议结合CSS动画但注意渲染负担。

文章 · 前端 | 2星期前 | 422浏览收藏
如何调整HTML字体大小？实用技巧分享

调整HTML字体大小最推荐使用CSS的font-size属性，结合rem、em、px、%和视口单位等灵活设置；2.推荐通过外部样式表应用CSS，实现结构与样式的分离，提升可维护性；3.rem相对于根元素（html）字体大小，适合全局控制和响应式设计，em相对于父元素，适合组件内部相对缩放；4.最佳实践包括设定合理基准字体、优先使用rem、在组件内谨慎使用em、结合媒体查询响应式调整、关注line-height与letter-spacing，并避免滥用px或em、忽视可访问性；5.使用CSS变量（如:roo

文章 · 前端 | 2星期前 | 422浏览收藏
HTML表格关联显示数据的几种技巧包括使用嵌套表格、CSS样式控制、JavaScript动态加载以及结合数据库实现联动效果。这些方法能够提升数据展示的清晰度和用户体验。

HTML表格可通过后端预关联或前端JavaScript动态处理实现数据关联显示。常见方式包括：1.后端SQLJOIN操作生成扁平化数据集，前端直接渲染；2.前端通过多API获取数据并用JS匹配关联；3.嵌套子表格展开显示关联信息；4.使用视觉链接导航到关联页面。针对大型数据集，应采用分页加载、虚拟滚动、服务器端筛选及懒加载策略。前端实现时需注意性能优化、内存泄漏防范、数据同步及XSS防护，同时推荐使用现代框架或库提升开发效率和可维护性。此外，卡片布局、图表、树形视图、交互式数据网格和时间轴等现代展示方式也

文章 · 前端 | 1星期前 | 422浏览收藏
CSS固定侧边栏自适应高度技巧

要让CSS侧边栏既能固定高度又能适应动态内容，需结合Flexbox和vh单位；首先设置html,body{margin:0;padding:0;height:100%;}，然后为容器使用display:flex;min-height:100vh;实现整体布局撑满视口；对于侧边栏与主内容等高且随内容扩展的情况，利用Flexbox默认的align-items:stretch特性，使侧边栏自动拉伸，无需设置高度；对于侧边栏固定100vh且内部可滚动的情况，则设置.container{height:100vh;}

文章 · 前端 | 1星期前 | 布局 FLEXBOX vh单位动态高度 CSS侧边栏 422浏览收藏

1 108 109 110 500

查看更多

课程推荐

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

542次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

511次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

498次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

484次学习
Golang深入理解GPM模型

Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。

474次学习

查看更多

AI推荐

千音漫语

千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com

251次使用
MiniWork

MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。

245次使用
NoCode

NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。

242次使用
达医智影

达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。

253次使用
智慧芽Eureka

智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。

271次使用