芜青-优快云博客

原创 HTML+CSS：浮动详解

摘要：浮动（float）是CSS中实现元素脱离文档流排列的经典技术，常用于文字环绕图片和多栏布局。其核心特性包括元素脱离文档流但保留文本环绕、自动收缩宽度及并排排列。但浮动会导致父元素高度坍塌，需通过清除浮动（如伪元素法、overflow法）解决。虽然Flexbox/Grid逐渐替代浮动布局，但掌握浮动仍是前端基础，尤其适用于简单横向排列和传统布局场景。使用时需注意高度坍塌问题并及时清除浮动。

2025-08-20 16:20:23 337

原创 JavaScript手录18-ajax：异步请求与项目上线部署

本文系统介绍了Web开发中的前后端协作流程与AJAX技术。主要内容包括：开发流程与分工：详细说明产品、UI、前后端、测试、运维的协作流程，明确前后端职责边界。服务器基础：分析物理服务器、云服务器和虚拟主机的特点，对比主流云服务商，介绍域名注册与解析流程。 AJAX技术：重点讲解异步交互原理，通过代码示例演示XMLHttpRequest的使用步骤，包括请求创建、发送、状态监听和响应处理。数据流转：完整描述用户操作触发的前后端数据交互链路，从前端请求到数据库查询再返回渲染的全过程。文章采用技术对比表格、

2025-08-20 15:09:39 783

原创 JavaScript手录17-原型

本文深入解析JavaScript中的原型与继承机制。原型是JS实现继承的核心，作为共享属性的存储空间，所有实例通过[[prototype]]属性访问原型。构造函数通过new关键字创建实例，其底层原理包括：1)创建空对象；2)建立原型链；3)添加属性；4)返回对象。文章还区分了自有属性和共有属性的特点，阐述了原型链的查找规则。在继承方面，通过原型链实现子类复用父类属性和方法的能力，并提供了具体实现示例。理解这些概念对掌握JavaScript面向对象编程至关重要。

2025-08-16 15:14:48 687

原创 JavaScript手录16-定时器

防抖像“电梯”：按下按钮后，电梯会等10秒关门；如果有人再按，重新等10秒，直到没人按才关门。节流像“红绿灯”：红灯亮起后，无论多少车来，都要等30秒绿灯才放行，固定间隔执行。根据场景选择：需要“等待操作结束”用防抖，需要“控制执行频率”用节流。

2025-08-13 15:34:33 1120

原创 JavaScript手录15-【this】

本文探讨了JavaScript中this关键字的特性与不同场景下的指向规则。核心原则是this由函数调用方式决定，而非定义位置。在DOM事件中指向触发元素，对象方法中指向调用对象，全局作用域中指向window。文章通过案例分析了常见错误（如循环事件绑定）及正确使用this的解决方案，并对比了箭头函数与传统函数的this差异。最后介绍了三种改变this指向的方法：call()、apply()和bind()，分别用于强制指定this并传递参数。掌握this的动态特性对编写健壮的JavaScript代码至关重要。

2025-08-13 10:10:40 1020

原创实现文字在块元素中水平/垂直居中详解

本文总结了四种CSS文字居中方案：1. 单行文字用line-height匹配高度；2. 多行/弹性布局推荐Flexbox，通过justify-content和align-items实现；3. 兼容旧浏览器用table-cell模拟表格；4. 通用方案采用定位+transform微调。对比显示Flexbox最灵活，定位方案兼容性好，line-height仅限单行，table-cell适合多行旧浏览器场景。建议优先使用Flexbox或定位方案。

2025-08-12 21:52:02 741

原创 JavaScript手录14-DOM事件

本文介绍了DOM事件的基础概念、绑定方式和常见事件类型。DOM事件是HTML文档与用户交互的机制，包括点击、键盘输入等操作通知。事件绑定方式有三种：HTML内联事件（不推荐）、DOM0级属性绑定和DOM2级addEventListener方法（推荐）。常见事件类型包括鼠标事件（click、mouseover等）和键盘事件。文章通过示例代码展示了如何实现鼠标悬停效果和跟踪鼠标位置，帮助读者理解DOM事件的实际应用。

2025-08-09 09:50:16 973

原创 JavaScript手录13-DOM

DOM（文档对象模型）是前端开发的核心概念，它将HTML/XML文档转换为树形结构对象，使JavaScript能够动态操作网页内容、结构和样式。DOM提供API让开发者可通过代码查找、修改、添加或删除页面元素，并绑定交互事件。DOM树由文档节点、元素节点、文本节点等组成，形成父子关系的层级结构。主要操作包括：元素选择（如getElementById）、创建插入（createElement/appendChild）、内容修改（textContent/innerHTML）、样式调整（style/classLis

2025-08-04 15:34:11 395

原创 JavaScript手录12-内置对象【Date对象】

JavaScript中的Date对象是处理日期和时间的核心工具，它提供了创建、获取、设置和计算日期时间的方法。摘要要点包括：1) 通过new Date()创建实例，支持时间戳、字符串或参数形式；2) 提供getFullYear()、getMonth()等方法获取时间各部分；3) 使用set系列方法修改日期；4) 可通过拼接实现自定义格式化；5) 通过比较时间戳进行日期计算。特别注意月份从0开始计数，星期从0（周日）开始等易错点。Date对象适用于倒计时、日历等时间相关功能的开发。

2025-08-04 15:28:41 658

原创 JavaScript手录11-内置对象【Number&Math】

本文介绍了JavaScript中处理数值的两个核心对象：Number和Math。Number对象既可作为构造函数创建数值对象，也可提供静态方法和属性进行数值检查与转换（如isNaN()、parseInt()等），同时包含实例方法（如toFixed()、toString()）用于数值格式化。Math对象则是纯静态工具对象，提供数学常数（如PI）和计算方法（如取整、随机数、三角函数等）。两者的核心区别在于：Number侧重数值处理与转换，Math专注数学运算功能，且Math不能实例化。掌握这两个对象能有效提升J

2025-07-31 15:29:13 509

原创 JavaScript手录10-内置对象【正则表达式 RegExp】

正则表达式（RegExp）是JavaScript中用于字符串匹配的强大工具，支持两种创建方式：字面量形式（/pattern/flags）和构造函数形式（new RegExp()）。它由模式和标志位组成，支持基础元字符、字符集、预定义字符集、分组、选择匹配等功能。常用方法包括test()、exec()和字符串的match()、replace()等。广泛应用于表单验证、信息提取和字符串格式化，但需注意转义字符和性能问题。

2025-07-29 09:30:00 809

原创 JavaScript手录09-内置对象【String对象】

本文介绍了JavaScript中的内置对象和面向对象编程概念。主要内容包括： JavaScript内置对象是由ECMAScript标准定义的26个可直接使用的对象，提供数据处理、DOM操作等功能。对比了面向对象编程(OOP)和面向过程编程(POP)的特点，OOP通过封装、继承和多态实现代码复用，而POP注重步骤化的函数实现。解释了JavaScript中的基本包装类型机制，当基本类型(string/number/boolean)调用方法时，JS引擎会自动创建临时包装对象并销毁，使得基本类型也能使用对象方法

2025-07-28 20:29:11 735

原创 JavaScript手录08-对象

JavaScript 数据类型的核心差异与应用 JavaScript 数据类型分为基本类型和引用类型。基本类型（Number、String、Boolean等）存储在栈内存，具有不可变性，赋值时传递值副本；引用类型（Object、Array等）存储在堆内存，变量保存引用地址，赋值时传递引用，具有可变性。类型判断可使用 typeof（基本类型）、instanceof（引用类型）或 Object.prototype.toString.call()。对象作为核心引用类型，可通过字面量、构造函数或 Object.cr

2025-07-28 19:51:57 919

原创 JavaScript手录07-数组

JavaScript数组核心知识摘要：数组是有序元素集合，支持多种数据类型，长度动态可变。创建方式包括字面量、构造函数和Array.of()。常用方法分为两类：修改原数组的方法（push/pop/unshift/shift/splice/reverse/sort）和不修改原数组的方法（concat/slice/join等）。数组操作涉及索引访问、长度控制及多种遍历方法，具有灵活的数据处理能力，是JavaScript中最基础且实用的数据结构之一。（150字）

2025-07-27 22:36:28 781

原创 JavaScript手录06-函数

JavaScript函数是封装可复用代码块的核心机制，支持多种定义方式（函数声明、表达式、箭头函数等），具有参数传递、作用域控制、返回值等特性。函数声明存在提升，而表达式和箭头函数则需先定义后调用。参数支持默认值和剩余参数语法，调用方式（普通调用、方法调用、构造函数调用等）会影响this指向。作用域分为全局、函数和块级作用域，其中var变量存在提升，let/const具有块级作用域。函数通过模块化逻辑实现代码复用和抽象，是JavaScript编程的基础构建块。

2025-07-26 17:40:15 667

原创 JavaScript手录04-【if-else&switch】语句

本文介绍了JavaScript中的基本语法结构，包括表达式、语句、函数以及流程控制语句。主要内容涵盖：表达式与语句：表达式可计算得出值（如算术运算、函数调用等），语句是执行操作的基本单位（如if、for等），函数是封装的可重用代码块。条件控制语句： if-else语句：根据条件执行不同代码分支 switch语句：多条件匹配结构，使用严格相等比较，需注意break的穿透效应函数定义与调用：三种定义方式：函数声明（存在提升）、函数表达式、箭头函数函数调用通过函数名+参数列表实现箭头函数具有简写语法和

2025-07-24 17:30:10 945

原创 JavaScript手录05-循环语句

摘要：JavaScript提供了多种循环结构来实现代码的重复执行，包括for、while、do-while等基本循环，以及for...in（遍历对象属性）和for...of（遍历可迭代对象）等高级循环方式。每种循环适用于不同场景，如for适合已知循环次数，while适合不确定次数但已知终止条件的情况。循环控制语句break和continue可分别用于终止循环或跳过当前迭代。此外，嵌套循环中可使用标签实现特定层的跳出。通过示例和练习，可以掌握各类循环的特性和应用场景。

2025-07-24 17:09:53 818

原创 JavaScript手录03-运算符

JavaScript运算符详解：包括算术、赋值、比较、逻辑等运算符，重点讲解==与===区别，++/--的前后置差异，以及三元运算符和短路求值特性。涵盖运算符优先级及常见使用场景，附带类型检测和实例判断方法，适合快速查阅核心语法要点。

2025-07-15 20:48:57 630

原创 JavaScript手录02-变量与数据类型

本文介绍了JavaScript中的内存机制、变量和数据类型三个核心概念。在内存部分，解释了RAM的特性及变量与内存地址的关系，展示了变量声明和函数调用时的内存操作。变量部分详细说明了var、let、const三种声明方式的区别，并提供了变量命名规则与最佳实践。数据类型部分区分了7种基本数据类型和引用数据类型，介绍了typeof、instanceof和Object.prototype.toString.call()三种类型检测方法。文章通过代码示例直观展示了各知识点的实际应用，帮助读者理解JavaScript

2025-06-25 21:25:57 693

原创 JavaScript手录01-概念篇

摘要计算机语言是人机交互的核心工具，JavaScript作为浏览器唯一原生语言，在网页开发中占据关键地位。本文系统阐述了计算机语言基础概念、软硬件区别及程序本质，重点介绍了JavaScript的特性、发展历程和四种引入方式（行内事件、内部脚本、外部引入和动态加载），并对比了各方式的适用场景。同时提供了常见编程语言应用领域表，以及脚本加载顺序控制技巧（defer/async属性），为开发者提供了全面的技术参考。

2025-06-23 13:48:00 611

原创 HTML+CSS：如何解决margin塌陷问题

摘要：margin塌陷指相邻元素或父子元素的垂直外边距合并现象。5种解决方案：1) 触发BFC（推荐display: flow-root或overflow: hidden）；2) 添加透明边框/内边距；3) 改用Flex/Grid布局；4) 伪元素隔离法；5) 首尾子元素改用padding。建议优先使用BFC或现代布局方案，既无副作用又能保持代码整洁。特殊场景需注意兼容性，如旧浏览器可用边框/内边距替代。

2025-06-12 15:53:03 203

原创 HTML+CSS：清除浮动的6种方案

摘要：清除浮动常用6种方法：1)空元素+clear属性（需添加空标签）；2)伪元素法（推荐，通过::after伪元素清除）；3)overflow法（触发BFC，可能影响溢出内容）；4)display:flow-root（现代方案，兼容IE11+）；5)父元素浮动（影响文档流）；6)邻近元素设置clear（通用性差）。推荐优先使用伪元素法或现代flow-root方案，需根据兼容性和布局需求选择合适方法。

2025-06-12 15:01:55 393

原创 HTML ：Table元素与表格布局详解

本文系统介绍了HTML表格的构建与优化技巧。主要内容包括：1）基础表格元素（table、tr、th/td等）和结构化标签（caption、thead等）；2）布局技巧如边框控制、斑马纹效果和表头固定；3）响应式设计方案（水平滚动/堆叠布局）；4）高级特性包括列样式、排序指示和单元格合并。

2025-06-11 08:30:00 868

原创 HTML+CSS 元素居中全解

CSS居中布局方法总结：水平居中可通过text-align、margin auto、Flexbox、Grid和绝对定位实现；垂直居中可用line-height、Flexbox、Grid、绝对定位和表格布局。水平垂直居中推荐使用Flexbox（justify-content+align-items）或Grid（place-items），未知尺寸时用绝对定位+transform。现代项目首选Flexbox/Grid，旧浏览器可用表格布局或负边距。注意解决文本换行、多行文本等特殊场景，响应式设计可结合媒体查询。

2025-06-10 20:42:44 485

原创 CSS文字排版全指南

CSS文本排版核心属性摘要：控制文本呈现的关键属性包括：1)字间距(letter-spacing)调节字符间距，数值可正可负；2)行高(line-height)建议使用1.5-1.8无单位值优化可读性；3)换行属性(overflow-wrap/word-break)处理长文本断行；4)对齐方式(text-align/vertical-align)实现水平和垂直对齐。响应式排版推荐使用clamp()函数，印刷体优化建议搭配Garamond字体与1.5行高。多语言排版需特殊处理，如英文启用hyphens:aut

2025-06-10 20:32:35 304

原创 CSS半透明效果实现方案详解

HTML/CSS半透明效果实现指南本文介绍了五种实现网页半透明效果的CSS技术：1) RGBA/HSLA颜色模式，通过alpha通道设置背景透明度；2) opacity属性，调整整个元素的透明度；3) 伪元素覆盖，在不添加HTML元素的情况下创建透明层；4) 毛玻璃效果，结合透明度和模糊滤镜；5) 渐变背景，创建平滑的透明过渡。每种方法都附有代码示例和可视化演示，并对比了它们的适用场景和浏览器兼容性。文章还提供了综合应用示例和最佳实践建议，如确保内容可读性、性能优化等。最后包含一个可直接运行的完整代码示例

2025-06-05 14:25:19 618

原创 CSS 伪元素详解

CSS伪元素是创建装饰性内容的高效工具，通过双冒号语法（如::before）选择元素特定部分。核心伪元素包括内容生成（::before/::after）、文本修饰（::first-letter/::first-line）和交互效果（::selection/::placeholder）。使用时需注意：必须配合content属性、默认行内特性以及对替换元素的限制。典型应用包括清除浮动、自定义列表符号、文本特效和表单美化，但要注意不可替代关键HTML内容。伪元素与伪类的本质区别在于前者创建虚拟节点，后者选择元素状

2025-06-03 18:07:07 274

原创 CSS中伪类详解

CSS伪类是特殊选择器，用于选择元素的特定状态或位置，无需修改HTML结构。主要分为用户交互伪类（如:hover、:active）、链接状态伪类（:link、:visited）、表单状态伪类（:checked、:valid）、结构位置伪类（:first-child、:nth-child）等类型。伪类可组合使用，支持参数化选择，在交互反馈、数据表格优化、导航菜单等场景有广泛应用。与伪元素不同，伪类不创建新元素而是选择元素状态。使用时需注意性能影响、浏览器兼容性和可访问性要求。合理运用伪类能提升界面交互体验和视

2025-06-03 18:05:53 530

空空如也

空空如也