• textContent的作用及使用场景详解
    textContent的作用及使用场景详解
    textContent属性用于获取或设置节点及其后代的文本内容,忽略HTML标签。1.获取内容:element.textContent;2.设置内容:element.textContent="新内容"。textContent与innerText区别在于其不考虑CSS样式,且为W3C标准;与innerHTML区别在于其不解析HTML标签,更安全。避免XSS的方法是优先使用textContent,对用户输入进行验证和HTML编码。高效使用方式包括一次性设置、使用DocumentFragment和模板引擎。兼容
    文章 · 前端   |  1天前  |   219浏览 收藏
  • 1px边框优化,移动端CSS技巧分享
    1px边框优化,移动端CSS技巧分享
    移动端CSS优化1px边框的核心思路是利用伪元素结合transform缩放来“欺骗”视觉,解决高清屏下边框变粗的问题。1.使用伪元素:before或:after创建边框,通过transform:scaleY(0.5)在2倍屏上将1px高度缩小至视觉上的1px;2.设置transform-origin:00确保缩放原点正确,避免位置偏移;3.添加pointer-events:none防止伪元素遮挡交互;4.针对不同DPR屏幕,可通过JavaScript获取devicePixelRatio并动态设置CSS变量
    文章 · 前端   |  2天前  |   CSS 移动端 伪元素 transform 1px边框 218浏览 收藏
  • HTML工具提示可访问性设置方法
    HTML工具提示可访问性设置方法
    传统的title属性不足以满足可访问性需求,因为它存在屏幕阅读器支持不一致、键盘不可访问、无法控制显示时机和样式、移动设备支持差以及内容限制等问题。为实现可访问的HTML工具提示,需采用ARIA属性与JavaScript结合的方式:1.使用语义化HTML结构,将工具提示内容置于独立元素中;2.应用ARIA属性,如aria-describedby关联触发元素与提示内容,role="tooltip"定义语义角色,aria-hidden控制可见性;3.实现键盘导航,包括焦点触发、Esc键关闭及合理管理焦点;4.
    文章 · 前端   |  1天前  |   218浏览 收藏
  • 网页结构详解与HTML基础教程
    网页结构详解与HTML基础教程
    要创建一个简单的HTML页面,只需使用文本编辑器编写包含DOCTYPE、html、head和body结构的代码,保存为.html文件后用浏览器打开即可;这段代码中,DOCTYPE声明HTML5文档类型,html标签为根元素,head内设置字符编码、视口和标题等元数据,body中使用h1、p、a等标签组织标题、段落和链接内容,语义化标签如header、nav、main、section、article和footer能提升页面结构的清晰度和可访问性,便于浏览器、搜索引擎和开发者理解与维护,最终形成一个层次分明、
    文章 · 前端   |  7小时前  |   218浏览 收藏
  • HTML代码缩进规范及示例详解
    HTML代码缩进规范及示例详解
    缩进HTML代码的核心在于保持一致性,推荐使用2个或4个空格,确保每个子元素比父元素多一个缩进层级,关闭标签与对应开始标签缩进相同;2.使用现代IDE如VSCode或WebStorm的自动格式化功能,配合Prettier等工具在保存时自动统一代码风格;3.统一选择空格或制表符并全项目保持一致,空格保证视觉一致性,制表符提供灵活性,但需团队统一设置;4.规范缩进提升代码可读性、团队协作效率和长期可维护性,避免技术债务;5.推荐使用Prettier、ESLint、HTML-CSS-JSPrettify等工具实
    文章 · 前端   |  2天前  |   217浏览 收藏
  • CSS图片素描效果实现方法详解
    CSS图片素描效果实现方法详解
    CSS制作图片素描效果的核心是使用filter属性组合滤镜,1.首先通过grayscale(100%)将图片转为灰度图;2.使用blur()添加模糊模拟素描质感;3.用contrast()增强对比度使线条更清晰;4.调整brightness()让效果更自然;5.可叠加多个blur和contrast实现更复杂纹理;6.尝试invert()结合brightness和contrast创建负片素描;7.利用mix-blend-mode与原始图层混合提升艺术感;8.应用于悬停效果、加载占位、艺术类网站等场景;9.注
    文章 · 前端   |  1天前  |   CSS 性能 图片 filter 素描效果 217浏览 收藏
  • CSS中文标点压缩技巧:text-space-collapse详解
    CSS中文标点压缩技巧:text-space-collapse详解
    text-space-collapse属性是用于精细控制文本中空白字符处理的CSS新提案,尤其针对中文标点周围的多余间距问题。1.其collapse值会将多个连续空白折叠为一个,有助于消除标点后误输入的半角空格,使中文标点与前后字符间距更紧凑;2.discard值则更激进,直接丢弃所有可折叠空白,实现极致紧密排版,更符合传统中文阅读习惯;3.与white-space等属性不同,text-space-collapse专注处理非语义性视觉空白,而非整体空白或换行策略;4.实际应用中需谨慎,因该属性尚处草案阶段
    文章 · 前端   |  11小时前  |   CSS 排版 空白字符 text-space-collapse 中文标点 217浏览 收藏
  • JavaScript事件循环与同步执行顺序详解
    JavaScript事件循环与同步执行顺序详解
    JavaScript中同步代码的执行优先级最高,它会先被彻底执行完,之后事件循环才会处理异步任务。1.同步代码立即推入调用栈按先进后出顺序执行,是阻塞式的。2.异步任务如定时器、网络请求会被交给宿主环境处理,完成后回调放入任务队列。3.事件循环检查调用栈是否为空,若空则优先清空微任务队列(如Promise回调),再从宏任务队列(如setTimeout)取一个任务执行。4.微任务优先级高于宏任务,且每次事件循环周期中,所有微任务会在宏任务前被处理完。5.异步错误处理和流程控制推荐使用Promise结合asy
    文章 · 前端   |  7小时前  |   217浏览 收藏
  • JS弱引用与WeakMap使用详解
    JS弱引用与WeakMap使用详解
    WeakMap通过弱引用键解决内存泄漏问题,适用于关联对象私有数据、缓存和DOM状态管理,其键必须为对象且不可遍历,与Map的强引用和通用性形成对比,适合需生命周期同步的场景。
    文章 · 前端   |  5小时前  |   217浏览 收藏
  • 事件循环优化UI流畅更新技巧
    事件循环优化UI流畅更新技巧
    不阻塞主线程是实现平滑UI更新的核心;2.通过任务切片、requestAnimationFrame、setTimeout(0)/Promise、WebWorkers四种策略错峰执行任务;3.事件循环机制确保宏任务与微任务有序执行,留出UI渲染时间窗口,从而避免页面卡顿,提升用户体验。
    文章 · 前端   |  5小时前  |   217浏览 收藏
  • async函数执行顺序解析
    async函数执行顺序解析
    async函数的执行顺序基于Promise和事件循环,是一种非阻塞的“暂停与恢复”机制。1.当调用async函数时,它会立即执行同步代码,直到遇到第一个await表达式;2.此时函数会挂起,并将后续代码作为微任务放入队列,控制权交还主线程;3.被await的Promise完成后,函数从暂停处恢复执行;4.整个过程不阻塞主线程,确保应用响应性;5.await不会真正并行执行任务,而是利用事件循环实现异步协作;6.错误处理通过try...catch捕获await的拒绝,未被捕获的拒绝需在外部用.catch()
    文章 · 前端   |  1天前  |   216浏览 收藏
  • Node.js事件循环idle阶段的作用是处理异步I/O回调,执行用户代码,并在没有任务时进入等待状态。
    Node.js事件循环idle阶段的作用是处理异步I/O回调,执行用户代码,并在没有任务时进入等待状态。
    Node.js事件循环中没有明确的“idle阶段”。其核心阶段包括:1.定时器阶段(执行setTimeout/setInterval回调);2.待定回调阶段(处理系统级回调);3.轮询阶段(执行I/O回调并等待新事件);4.检查阶段(执行setImmediate回调);5.关闭回调阶段(执行close事件回调)。所谓的“空闲”状态是指事件循环完成当前任务后等待新I/O事件的状态,而非可编程阶段。替代方案包括:使用setImmediate在检查阶段执行低优先级任务;使用process.nextTick调度高
    文章 · 前端   |  2天前  |   215浏览 收藏
  • HTML中width属性的3种用法解析
    HTML中width属性的3种用法解析
    width属性在HTML中用于指定元素的宽度,有三种取值方式:1.像素值(如width="300"),适合固定尺寸设计,但不利于响应式设计;2.百分比值(如width="50%"),灵活但可能导致复杂计算;3.自动值(width="auto"),适合文本内容但可能导致布局不一致。
    文章 · 前端   |  2天前  |   215浏览 收藏
  • JS使用sumBy计算对象数组总和方法
    JS使用sumBy计算对象数组总和方法
    使用Lodash的_.sumBy()可快速计算对象数组中某属性的总和,它接收集合和迭代器(属性名或函数)作为参数;2.相比reduce,sumBy代码更简洁、意图更明确,且能避免空数组或非数字值导致的错误;3.在无外部库时,可用reduce手写customSumBy函数,支持字符串属性名或函数提取值,并对非数字值视为0处理,确保健壮性;最终选择取决于项目对依赖、体积与开发效率的权衡。
    文章 · 前端   |  1天前  |   215浏览 收藏
  • JavaScript闭包生成序列化方法
    JavaScript闭包生成序列化方法
    闭包的核心价值在于为序列化函数提供私有且持久的环境以维护状态,如通过WeakMap追踪已访问对象来处理循环引用;2.利用闭包可实现循环引用检测,即在外部函数中创建WeakMap记录遍历路径,内部序列化函数通过闭包访问该Map进行重复对象判断;3.自定义类型处理通过闭包捕获配置选项实现,如日期、正则、函数等特殊类型的转换规则可在工厂函数中定义并由内部函数继承;4.实际应用中,闭包序列化器可用于前端状态持久化,将复杂状态(含Class实例、Map/Set)安全序列化用于服务端渲染或本地存储;5.在WebWor
    文章 · 前端   |  5小时前  |   JavaScript 自定义类型 闭包 序列化 循环引用 214浏览 收藏
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
    542次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
    511次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
    498次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
    484次学习
  • Golang深入理解GPM模型
    Golang深入理解GPM模型
    Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
    474次学习
查看更多
AI推荐
  • 千音漫语:智能声音创作助手,AI配音、音视频翻译一站搞定!
    千音漫语
    千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
    167次使用
  • MiniWork:智能高效AI工具平台,一站式工作学习效率解决方案
    MiniWork
    MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
    164次使用
  • NoCode (nocode.cn):零代码构建应用、网站、管理系统,降低开发门槛
    NoCode
    NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
    169次使用
  • 达医智影:阿里巴巴达摩院医疗AI影像早筛平台,CT一扫多筛癌症急慢病
    达医智影
    达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
    171次使用
  • 智慧芽Eureka:更懂技术创新的AI Agent平台,助力研发效率飞跃
    智慧芽Eureka
    智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
    185次使用
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码