文章封面

点击按钮变大字?一行代码教你用JS改网页文字大小

笔记 

你有没有在网页上见过这种操作?点击一个按钮,原本小小的文字“唰”地变大了;或者滑动鼠标,标题字号跟着变化。这些效果的背后,其实都离不开JavaScript(简称JS)对网页元素的控制。今天我们就从最基础的一行代码入手,看看怎么用JS修改网页里的文字大小。 先搞懂这行代码的“身份” 我们今天要研究的代
文章封面

CSS3核心特性-第7章-7.3-伪元素与优先级计算


一、伪元素(Pseudo-elements) 1.1 核心概念 伪元素是CSS中用于创建并设置文档中特定部分样式的虚拟元素,它们不存在于DOM中,但表现得如同真实元素。伪元素以**双冒号::**为前缀(CSS3规范),用于区分伪类(单冒号:)。 核心作用: 生成装饰性内容(如图标、分隔线) 操作文本
文章封面

给编程小白的「数组遍历」指南:JavaScript的.forEach()怎么用?


你有没有过这样的经历?整理书架时,想给每一本书贴上标签;或者点奶茶时,想给每个朋友备注不同的口味。这种「逐个处理一组东西」的需求,在编程里特别常见——尤其是当你要处理一个装满数据的数组时。 今天咱们就聊聊JavaScript里专门干这个事的工具:.forEach()。它就像一个勤劳的小助手,能帮你把
文章封面

CSS3核心特性-第7章-7.2-属性选择器与伪类


学习目标 掌握CSS3属性选择器的语法及使用场景 理解并应用常见伪类选择器(如:nth-child()、:not()等) 能够结合属性选择器与伪类实现复杂选择逻辑 概念讲解 CSS3选择器是样式定位的核心工具,属性选择器和伪类选择器极大扩展了选择能力。属性选择器允许通过HTML元素的属性或属性值筛选
文章封面

当我在代码里种「思维树」:一个编程学习者的认知生长手记


那个卡在「Hello World」之外的下午 去年夏天,我对着屏幕坐了三小时。键盘上落着半凉的咖啡渍,IDE里躺着刚抄完的「用户登录功能」代码——从数据库查询到密码加密,每一行都和教程分毫不差。但当我输入账号密码点击提交时,页面始终跳着刺眼的红色报错:「SQL注入风险」。 我盯着报错信息发懵。明明按
文章封面

CSS3核心特性-第7章-7.1-基础选择器与组合选择器


学习目标 掌握CSS基础选择器(元素、类、ID选择器)的语法与使用场景 理解组合选择器(后代、子元素、相邻兄弟等)的匹配规则 能够通过选择器组合实现复杂元素定位 区分不同选择器的优先级与性能影响 概念讲解 CSS选择器是用于定位HTML元素并应用样式的模式。基础选择器通过元素类型、类名或ID直接匹配
文章封面

HTML5核心特性-第6章-6.3-离线缓存(Application Cache)


学习目标 理解Application Cache的核心作用及工作原理 掌握缓存清单(manifest文件)的创建与配置方法 实现基础的离线资源缓存与更新策略 了解Application Cache的兼容性问题及替代方案 概念讲解 离线缓存(Application Cache) 是HTML5提供的一种
文章封面

HTML5核心特性-第6章-6.2-存储方案对比与应用场景


一、存储方案概述 Web开发中常用的客户端存储方案包括Cookie、localStorage、sessionStorage和IndexedDB,它们在存储容量、生命周期、数据类型支持等方面存在显著差异,适用于不同的业务场景。选择合适的存储方案是优化用户体验和数据处理效率的关键。 二、四大存储方案核心
文章封面

HTML5核心特性-第6章-6.1-localStorage与sessionStorage


一、核心概念与应用场景 localStorage和sessionStorage是HTML5提供的客户端存储方案,用于在浏览器中保存键值对数据,替代传统Cookie的局限性(存储容量小、每次请求携带)。两者均遵循同源策略(仅同一协议、域名、端口下可访问),但在存储周期和作用域上存在关键差异: 特性 l
文章封面

响应式图片:前端性能优化的隐形引擎


在Web性能优化的世界里,图片始终是“流量大户”——据统计,一个普通网页的加载流量中,图片占比可达60%以上。这意味着:如何高效加载图片,直接决定了用户的等待时间和体验满意度。 而“响应式图片”(Responsive Images)正是解决这一问题的核心技术。它不是某种“炫技”的代码技巧,而是W3C
文章封面

JavaScript入门必学3:if条件判断核心逻辑——比较运算符与逻辑运算符详解

笔记 

开篇:点外卖时的「隐形判断」,你每天都在做 想象你晚上点外卖,页面显示「预计30分钟送达」。你心里会默默做几个判断: 「现在已经7点了,30分钟后是7:30,还没到睡觉时间」→ 可以下单 「如果下雨的话,配送时间可能延长到45分钟」→ 需要看天气 这些「如果…就…」「不…就…」的思考过程,在Java
文章封面

JavaScript入门必学2:变量赋值从`=`到`+=`的快捷操作让代码更高效

笔记 

开篇:你给手机充电的方式,和代码赋值很像 想象你有一部手机,电量是0%。当你插上充电器时,相当于执行了一次「赋值操作」——把充电器提供的电量(比如+20%)存到手机的电量变量里。在JavaScript中,变量就像手机的「电量槽」,而赋值运算符就是帮你「给槽里充电」的工具。 上一篇我们学会了用算术运算
文章封面

JavaScript入门必学1:加减乘除和基础算术运算符


开篇:为什么这些符号是编程的第一块积木? 想象你刚开始学说话时,首先学会的是"爸爸"、"妈妈"这些基础词汇。在JavaScript世界里,+、-、*、/ 这些运算符就是你的"编程基础词汇"——它们是你用代码表达数学计算能力的起点。 无论是计算购物车总价、游戏得分,还是处理时间日期,算术运算符都是你最
文章封面

HTML5核心特性-第5章-5.3-Canvas绘图基础


一、学习目标 掌握Canvas元素的基本使用方法,包括获取绘图上下文 熟悉2D绘图API的常用方法(矩形、路径、文本绘制) 能够实现简单的图形绘制和动态效果 二、概念讲解 Canvas是HTML5引入的绘图元素,通过JavaScript可以在其上面绘制2D图形、动画、图表等。它提供了一个矩形区域,开
文章封面

HTML5核心特性-第5章-5.2-原生音频播放(audio)


一、概念定义 HTML5通过<audio>标签提供原生音频播放功能,无需依赖Flash等插件,支持多种音频格式(MP3、WAV、Ogg等),并提供基础播放控制(播放/暂停、音量调节等)。相较于传统插件方案,原生音频播放具有更高的兼容性、更低的性能消耗和更灵活的定制能力。 二、语法规则 2.1 基础语