网站概述

本站，无商业用途、无收费业务、无广告推广、无对外服务功能。主要用于记录个人编程学习历程、技术心得、练习项目展示，仅作为自我总结与技术交流使用。

网站建设初衷是为了系统化记录/巩固前端开发、后端开发、服务器部署、网站优化等相关技术知识，所有内容均为原创学习总结。本页面汇总大量学习笔记，包含CSS、JavaScript、PHP、Python，方便随时查阅复习。

CSS 学习笔记

1. CSS 基础概念

CSS全称层叠样式表（Cascading Style Sheets），作用是控制HTML页面的外观样式，包括颜色、字体、间距、布局、动画等。HTML负责页面结构，CSS负责表现，JavaScript负责交互，三者是前端开发的基础三件套。CSS的引入方式分为三种：行内样式、内部样式、外部样式。开发项目中，推荐使用外部样式表，将CSS写在单独的.css文件中，使用link标签引入，方便代码维护和复用。行内样式写在HTML标签style属性内，优先级最高，但不利于统一管理，只适合临时调试。内部样式写在head标签内的style标签中，适合单页面少量样式。

CSS选择器是用来选中HTML元素的规则。常用选择器包含元素选择器、类选择器、ID选择器、后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类、伪元素。选择器存在优先级计算规则：!important > 行内样式 > ID选择器 > 类、伪类、属性选择器 > 元素、伪元素选择器。权重计算不会进位，多个类选择器叠加，权重高于单个元素选择器。

2. 盒模型

CSS盒模型是核心基础，每一个HTML元素都可以看作一个盒子，由content内容区、padding内边距、border边框、margin外边距四部分组成。标准盒模型下，width和height只代表content宽度高度，元素实际宽度 = width + padding + border。IE怪异盒模型（box-sizing:border-box），width包含content、padding、border，实际宽度等于设置的width，布局开发中绝大多数场景推荐设置box-sizing:border-box，减少布局计算麻烦。

margin存在外边距合并（塌陷）现象。垂直方向两个块级元素的margin会合并，取两者最大值。父子元素，如果父元素没有边框、内边距、内容隔离，子元素margin-top会传递给父元素，造成布局错乱。解决方案：给父元素设置border、padding，或者设置overflow:hidden。行内元素上下margin不生效，只有左右margin有效。

3. 浮动与清除浮动

float浮动最初用于文字环绕图片，早期大量用来做多栏布局。元素设置float:left或right之后，脱离普通文档流，元素横向排列。浮动带来的副作用：父元素高度塌陷，父盒子高度变成0。清除浮动常用方法：1、给父元素设置overflow:hidden；2、伪元素清除浮动（最推荐，无副作用）；3、在浮动元素末尾添加空div设置clear:both。伪元素清除浮动代码：.clearfix::after{content:"";display:block;clear:both;visibility:hidden;height:0;}。

4. Flex弹性布局

Flex布局是现代网页布局首选，适合一维布局。给父容器设置display:flex，父容器叫flex容器，子元素叫flex项目。父容器常用属性：flex-direction设置主轴方向，row水平向右，column垂直向下；justify-content主轴对齐方式，center居中，space-between两端对齐，space-around均分留白；align-items交叉轴对齐，center垂直居中；flex-wrap是否自动换行，nowrap不换行，wrap自动换行。子元素属性flex，是flex-grow、flex-shrink、flex-basis简写。flex:1代表均分剩余空间。

/* Flex 简单示例 */
.box{
  display:flex;
  justify-content:center;
  align-items:center;
}
.item{
  flex:1;
  padding:10px;
}

5. Grid网格布局

Grid是二维布局系统，同时控制行和列，适合卡片、规整栅格页面。display:grid开启网格。grid-template-columns定义每一列宽度，grid-template-rows定义每一行高度。可以使用repeat()简化写法，repeat(3,1fr)代表三列均分。gap设置行列间距。

6. 定位 position

static默认文档流；relative相对定位，不脱离文档流，相对于自身原始位置偏移；absolute绝对定位，脱离文档流，相对于最近的非static父元素定位；fixed固定定位，相对于浏览器视口，滚动页面位置不变；sticky粘性定位，滚动到阈值时固定，常用于导航栏。

7. CSS 过渡与动画

transition过渡，用来实现属性平滑变化，需要触发条件（hover、点击等）。animation关键帧动画，自动循环播放，无需触发。@keyframes定义动画不同阶段样式。transform变形，包含translate位移、scale缩放、rotate旋转、skew倾斜。transform不会改变文档流布局，不会影响其他元素。

/* 过渡动画 */
.btn{
  transition: all 0.3s ease;
}
.btn:hover{
  transform:scale(1.05);
}

8. 响应式与媒体查询

媒体查询@media，根据屏幕宽度加载不同样式，实现移动端适配。移动端开发必须设置meta视口标签。常用断点：768px平板，992px中屏，1200px大屏。优先移动端优先（mobile first）写法，从小屏幕写起，逐步向上适配大屏幕。

@media (max-width:768px){
  .nav{
    flex-direction:column;
  }
}

9. CSS变量

CSS自定义变量，--color:#409eff; 在父级定义，子元素var(--color)调用，方便统一管理主题颜色，动态修改主题。

10. BEM命名规范

BEM：Block块、Element元素、Modifier修饰符。例如 .card__title，.card--active。减少命名冲突，便于团队维护。

JavaScript 学习笔记

1. JS基础介绍

JavaScript是一门弱类型、动态类型的解释型脚本语言。最初用于网页表单校验，现在可以做前端页面交互、Node.js后端开发、小程序、APP、桌面程序、游戏开发。JS代码可以写在script标签内，或者外部.js文件，script标签可以放在head或者body底部，推荐放在body末尾，保证DOM加载完成再执行JS。

变量声明：var、let、const。var存在变量提升，没有块级作用域，容易污染全局；let拥有块级作用域，可以修改值，不能重复声明；const常量，声明时必须赋值，引用类型可以修改内部属性，不能直接重新赋值。开发优先使用const，需要修改再用let，尽量不用var。

数据类型分为原始类型和引用类型。原始类型：string字符串、number数字、boolean布尔、null空、undefined未定义、symbol唯一标识、bigint大整数。引用类型：Object对象、Array数组、Function函数、Date、RegExp等。原始值存储在栈内存，赋值是拷贝值；引用类型栈内存存地址，堆内存存真实数据，赋值只是拷贝地址，修改会互相影响。

2. 运算符与判断循环

== 和 === 区别：==会自动类型转换，只比较值；===严格相等，值和类型全部一致，开发永远推荐使用===。

条件语句if else、switch。循环：for、while、do while、for...in遍历对象键名，for...of遍历可迭代对象（数组、Map）。break跳出整个循环，continue跳过本次循环。

3. 函数

函数是封装一段可重复执行代码。函数声明function fn(){}，函数表达式const fn=function(){}，箭头函数const fn=()=>{}。箭头函数没有this，没有arguments，不能作为构造函数。this指向：普通函数this指向调用者；箭头函数this继承外层作用域this；DOM事件处理函数this指向触发DOM元素。

参数：形参、实参，参数默认值，剩余参数...rest。闭包：函数A内部返回函数B，B可以访问A的变量，即使A执行完毕，变量依然保留。闭包优点：保存私有变量；缺点：内存不会释放，使用不当容易内存泄漏。

// 简单闭包示例
function createCounter(){
  let count = 0;
  return function(){
    count++;
    console.log(count);
  }
}
const c = createCounter();
c();
c();

4. 数组常用API

push末尾添加，pop末尾删除，shift头部删除，unshift头部添加。splice可以增删改数组；slice截取，不修改原数组。遍历：forEach遍历，无返回；map遍历返回新数组；filter过滤返回符合条件新数组；reduce累加、汇总；find查找第一个符合条件元素；some任意一个满足返回true；every全部满足返回true。map、filter不会修改原数组。

5. DOM文档对象模型

DOM把HTML文档转化为树状对象，JS用来操作页面元素。获取元素：document.getElementById，document.querySelector，querySelectorAll。操作内容：innerText纯文本，innerHTML可以解析HTML标签。属性操作：setAttribute、getAttribute，直接element.xxx读写属性。样式操作element.style.xxx，只能操作行内样式；getComputedStyle获取计算后的样式。事件：click点击、mouseover、mouseout、mousemove鼠标移动、input输入事件。事件冒泡：子元素事件向上传递到父元素；event.stopPropagation()阻止冒泡；event.preventDefault()阻止默认行为（a跳转、表单提交）。事件委托：利用事件冒泡，给父元素绑定事件，代理子元素，减少事件绑定数量，动态新增元素也能生效。

// 事件委托简单例子
document.querySelector('.list').addEventListener('click',function(e){
  if(e.target.tagName === 'LI'){
    console.log(e.target.innerText);
  }
})

6. BOM浏览器对象模型

BOM操作浏览器窗口。window全局对象；location地址栏，href跳转页面，reload刷新；history前进后退；navigator获取浏览器信息；setTimeout延时执行，setInterval定时器循环执行，记得清除定时器防止内存占用。

7. 异步、Promise、async/await

JS是单线程，异步用来处理耗时操作：网络请求、定时器。早期回调函数容易产生回调地狱。Promise用来处理异步，三种状态pending等待、fulfilled成功、rejected失败，状态一旦改变不能回滚。.then成功回调，.catch捕获错误。async函数内部可以使用await等待Promise完成，写法像同步代码，是现代推荐写法。

async function fetchData(){
  try{
    let res = await fetch('/api/test');
    let data = await res.json();
    console.log(data);
  }catch(err){
    console.log('请求失败',err);
  }
}

8. JSON 数据格式

JSON是前后端交换数据格式，本质字符串。JSON.stringify()对象转JSON字符串；JSON.parse()JSON字符串转回JS对象。JSON只能支持简单数据类型，不能存放函数、undefined。

9. 原型与原型链

JS所有对象都有__proto__隐式原型，函数拥有prototype显式原型。对象查找属性，自身找不到，沿着__proto__向上查找，直到Object.prototype，就是原型链。原型继承可以实现方法复用，节省内存。class是ES6语法糖，底层还是原型。

10. 前端存储

localStorage永久本地存储，浏览器关闭数据保留；sessionStorage会话存储，页面关闭清除；cookie可以设置过期时间，每次请求自动带给后端，容量小。

PHP 学习笔记

1. PHP基础概述

PHP是服务端脚本语言，嵌入HTML运行，常用于web后端开发，适合网站、表单处理、动态页面、数据库交互。PHP代码写在<?php ?>标签内部。PHP是弱类型语言，变量以$符号开头。变量命名区分大小写，字母下划线开头，不能数字开头。注释：//单行，/* */多行。

数据类型：字符串string、int整数、float浮点数、bool布尔、array数组、object对象、null。字符串拼接使用.点运算符，不是加号。PHP加号只做数学运算。

2. 数组

PHP分索引数组和关联数组。索引数组下标数字；关联数组key=>value键值对，类似JS对象。array()或者[]创建数组。常用函数：count()获取数组长度；array_push末尾追加；array_pop弹出末尾；array_merge合并数组；in_array判断值是否存在；array_key_exists判断键是否存在；foreach循环遍历数组。

'张三',
  'age'=>22
];
echo $user['name'];
foreach($user as $k=>$v){
  echo $k . ':' . $v;
}
?>

3. 条件与循环

if else、elseif、switch。循环for、while、do while、foreach。break跳出循环，continue跳过本次。

4. 函数

function 函数名(参数){}，支持参数默认值，return返回结果。全局变量需要global关键字引入函数内部。静态变量static，函数多次调用保留上一次值。

5. 表单接收 GET / POST

$_GET获取url参数；$_POST获取post表单提交数据；$_REQUEST可以同时获取GET和POST。接收用户输入，一定要做过滤、转义，防止XSS注入、SQL注入。htmlspecialchars()把特殊字符转义，防止XSS攻击。

6. 文件操作

file_get_contents读取文件；file_put_contents写入文件；fopen、fread、fclose传统读写。文件操作注意权限，Linux服务器注意目录chmod权限。

7. MySQL数据库操作（PHP）

PHP操作数据库推荐PDO，安全，支持预处理，防SQL注入。尽量不要使用mysql扩展（已经废弃），mysqli也可以，PDO更通用。预处理语句prepare，绑定参数execute，避免直接拼接SQL字符串。SQL注入根源是直接把用户输入拼进SQL语句。

8. Cookie与Session

setcookie设置cookie，$_COOKIE读取cookie。Session服务端存储用户会话，session_start()开启session，$_SESSION读写会话数据，常用于登录状态保持。Session依赖cookie存储sessionid。

9. 包含文件 include require

include引入文件，失败警告继续执行；require引入文件，报错终止程序；include_once、require_once防止重复引入。开发中用于拆分公共头部、底部模板，MVC模板开发经常使用。

10. PHP模板开发（Mymps等分类模板原理）

PHP模板引擎原理：读取html模板文件，正则替换模板标签{xxx}，动态渲染变量输出页面。很多开源CMS、分类信息程序都是这套逻辑。模板标签本质是占位符，PHP后台查询数据库，赋值变量，替换模板占位符，输出最终HTML页面。Mymps就是典型的PHP分类信息源码，通过模板标签调用数据，修改前端页面不用大量改动PHP逻辑。二次开发时，主要修改模板HTML、CSS，少量修改PHP逻辑。开发注意：关闭错误提示，线上环境不要显示PHP报错信息，防止泄露服务器路径信息。

Python 学习笔记

1. Python基础介绍

Python是解释型、高级、动态语言，语法简洁，缩进代替大括号。用途：后端接口、数据分析、AI、爬虫、自动化脚本、运维脚本。Python使用缩进来划分代码块，缩进必须统一，推荐4空格。注释#单行，""" """多行文档字符串。

变量不需要声明类型，直接赋值。命名下划线命名法snake_case。基础数据类型：int、float、str字符串、bool布尔、None空。字符串可以单引号、双引号、三引号多行文本。字符串切片 s[0:3]，左闭右开。

2. 容器类型：列表、元组、字典、集合

列表list[]可变有序；元组tuple()不可变；字典dict{}键值对，key必须不可变；集合set{}去重，无序。列表常用方法append追加，pop删除，insert插入。字典取值dict['key']或者get()，get可以设置默认值避免报错。for循环遍历。

# Python简单示例
user = {
    "name":"小明",
    "age":24
}
print(user.get("name"))
for k,v in user.items():
    print(k,v)

3. 判断、循环

if、elif、else。for in遍历可迭代对象；while循环。break终止循环，continue跳过本次。

4. 函数

def定义函数，return返回结果。参数：位置参数、关键字参数、默认参数、可变参数*args、**kwargs。函数内部global修改全局变量。

5. 文件读写

with open() as f: 上下文管理器，自动关闭文件。r读，w覆盖写，a追加。推荐使用with，不用手动close。

with open("test.txt","r",encoding="utf-8") as f:
    text = f.read()
print(text)

6. 模块与包

import导入模块，pip包管理器安装第三方库。pip install xxx。项目文件夹下__init__.py代表Python包。

7. 异常处理 try except

try捕获可能出错代码，except捕获异常，else无异常执行，finally无论是否报错都会执行。防止程序直接崩溃。

try:
    num = int("abc")
except ValueError as e:
    print("转换失败",e)

8. FastAPI 后端开发笔记

FastAPI现代高性能Python Web框架，自动生成接口文档，类型提示，异步支持。安装pip install fastapi uvicorn。uvicorn用来运行web服务。@app.get("/")定义get接口，路径参数、查询参数，请求体使用Pydantic模型校验。适合开发轻量API，图片处理接口，数据服务。

# FastAPI最简示例
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def index():
    return {"msg":"hello fastapi"}
# 启动命令 uvicorn main:app --reload

9. rembg AI抠图学习

rembg是Python抠图库，基于深度学习模型，本地运行图片去除背景。安装rembg，下载模型，读取图片，执行抠图，输出透明PNG。适合本地批量图片处理，可封装FastAPI接口对外调用。注意模型体积较大，服务器部署需要足够内存。批量处理图片时，注意循环控制，避免一次性加载大量图片导致内存溢出。

10. 爬虫基础

requests库请求网页，获取页面源码。BeautifulSoup解析HTML提取内容。爬虫一定要遵守robots协议，控制请求频率，不要高频请求，避免给对方服务器造成压力，遵守法律法规，禁止爬取隐私、涉密数据。

服务器运维与网站部署笔记

Linux服务器基础，宝塔面板管理服务器，可视化创建网站、数据库、FTP。域名解析A记录指向服务器公网IP。ICP备案个人网站规则，个人网站不能做经营性业务，不能有交互评论、论坛、电商交易功能。静态网站部署直接上传html文件到网站根目录。Nginx/Apache是web服务软件，负责接收浏览器请求，返回网页。CDN加速，静态资源缓存，减轻源站压力，提升全国各地访问速度。缓存控制，添加no-cache头，防止浏览器缓存旧页面。网站安全：修改服务器默认端口，设置强密码，定期更新系统，禁止目录浏览，上传文件校验后缀，防止上传木马。

网站优化方向：图片压缩、静态资源压缩合并、减少http请求，开启gzip，懒加载图片。排查网站访问异常：看服务器日志，检查端口、防火墙、域名解析、CDN缓存。备案注意：网站实际内容必须和备案填报信息一致，个人站点不要出现企业、盈利相关描述，否则备案审核驳回。