java＋前端学习笔记-育师

部分内容由豆包生成

📚 笔记总览

本笔记整理了Java和前端基础的学习内容，涵盖核心概念、原理和实践要点。

☕ Java 学习笔记

一、Java基础

1. 数组

数组的特点

连续的内存空间
引用数据类型
长度在创建时确定，后续不能改变大小
根据类型有默认值：
- String类型默认null
- int类型默认0
- char类型null
- boolean默认false
通过下标访问数据

三种创建数组的形式

直接确定长度int[] arr = {1, 2, 3};String[] brr = {"JJ"};
先分配空间后赋值int[] arr = new int[5];arr[0] = 1;arr[1] = 2;
声明但不初始化int[] arr;指向null

数组遍历

普通for循环：通过下标改变的是真实的数组值
增强for循环：通过下标改变的是数组的副本

2. 数据类型

Java数据类型分为两大类：

基本数据类型：byte、short、int、long、float、double、boolean、char（八大类型）
引用数据类型：类、接口、数组三种

编程语言分为： •强类型语言：C、C++、Java、C#、GO — 难学、性能好 •弱类型语言：Python、PHP、JavaScript — 简单好学，底层无法使用真实数组，内存消耗大

3. 面向对象

Java是面向对象的语言，与C语言（面向过程）不同：

一个类可以创建多个对象，类是创建对象的模板
通过对象操作数据不会影响类本身的数据
非静态方法必须依托对象存在

值传递

Java传递数据方式只有值传递，没有引用传递。例如：把对象的地址的值传递给方法参数。

二、JVM内存模型与程序执行流程

1. Java程序运行流程

.java和.class文件本质上在磁盘上，需要传到内存中执行
程序包括指令和数据，从磁盘传到内存再传到CPU执行
程序进入内存要分配存储空间，由操作系统分配（为进程开辟空间）

2. JVM内存模型

Java程序运行在JVM虚拟机上，操作系统给JVM开辟内存空间。 JVM把申请到的空间分成三部分：

虚拟机栈：方法执行的内存模型
堆：存放对象实例，线程共享
方法区：存储类信息、常量、静态变量等

进程与线程：•进程：正在执行的程序（操作系统资源调度的基本单位） •线程：程序的执行过程 • 一个进程包含多个线程 • 一个栈对应一个线程的执行过程 • 程序的执行过程 = 方法的不断入栈出栈

三、多线程与并发

1. 多线程基础

线程启动

继承Thread类，创建对象后调用start()方法
start()方法是把线程加入就绪队列，执行顺序不确定（CPU调度决定）
线程之间相互独立，谁也不会等待谁

并发与并行

并发：两个或多个事件在同一时间段发生，宏观上同时发生，微观上交替发生
并行：两个或多个事件在同一时刻发生

线程切换

线程分配的时间片到了以后，该线程被换出。线程在栈中数据不动，只是CPU寄存器的指向从该线程指向下一个线程。

线程等待

t1.join()：main方法等待t1线程执行完毕后再继续执行。

2. 多线程场景与性能

适合多线程的场景

CPU有大量浪费的情况，如网络爬虫（等待数据返回时CPU空闲）

不适合多线程的场景

图像处理：CPU处理图像时一直占着总线，多线程相当于单线程解决方法：把图片切碎，存进高速缓存中

减少上下文切换

上下文切换有开销，需要在并行收益和切换开销之间找平衡。

3. 锁机制

synchronized锁

只能锁引用类型，不能锁基本类型
方法执行完后自动解锁
对象锁：修饰非静态方法，锁住的是对象本身
- t1给整个对象上锁后，其他线程既不能调用该对象的m1也不能调用m2
- 对象锁只能锁住本对象的方法
类锁：修饰静态方法，锁住的是类本身（Class对象）
- 一个线程执行加锁的静态方法时，会阻塞其他线程执行该类中任何加锁的静态方法

死锁两个线程互相持有对方需要的锁，导致都无法继续执行。避免方法：对象要锁就锁全部，或者分开加锁加定时锁。

volatile锁

只保证读，不保证写（轻量级的synchronized）
保证可见性：一个线程更新后，其他线程的缓存失效
禁止指令重排序：通过内存屏障实现

指令重排序

与计算机组成原理的流水线技术有关，流水线技术会导致指令顺序打乱。流水线技术的好处：一次性调整好一种电路的逻辑后执行一个批次的任务，节省电路切换的时间开销。

4. CAS操作

CAS（Compare-And-Swap）是写后读的一种硬件实现：

线程在更新值回内存前，先检查该内存位置的值是否与之前读取的预期值相同
相同则更新成功，否则更新失败，重新读取后再尝试

CAS缺陷

高并发下效果差：一个线程更新成功，其他线程都得重新计算
经常伴随死循环使用（更新不成功一直重新算）

5. 缓存与内存

高速缓存

支持多核CPU
极大增加了传输速率
极大缩短运算距离
缺点：导致并发覆盖问题

缓存行

cache分配存储的最小基本单位是缓存行
一个缓存行64字节（512bit）
操作缓存行会独占导线

缓存行填充

如果整个缓存行的数据都归同一个变量，读取时不会有其他线程竞争总线，读取速度会快很多。缓存行填充：把剩下的字节都占满，减少排队延迟。

缓存一致性

volatile保证可见性的底层原理 = 缓存一致性 + 内存屏障

线程一更新缓存后，先通过总线告诉其他缓存内容已更新
其他缓存将自己的内容设置为无效状态
然后再更新主存

四、集合框架

1. 集合框架概述

Java集合框架主要包括两种类型的容器：

Collection：存储一个元素集合
Map：存储键/值对映射

2. List - ArrayList

特点

动态数组实现
可以存储任何引用类型（不能存基本类型，需用包装类如Integer、Double、Boolean、String等）

常用方法

方法	说明
`.add(Object element)`	向列表尾部添加指定元素
`.add(int index, Object element)`	在指定位置插入元素
`.size()`	返回列表的元素个数
`.get(int index)`	返回指定位置的元素（index从0开始）
`.set(int i, Object element)`	替换索引i位置的元素，返回被替换的元素
`.clear()`	从列表中移除所有元素
`.isEmpty()`	判断列表是否包含元素
`.contains(Object o)`	判断列表是否包含指定元素
`.remove(int index)`	移除指定位置的元素，返回被删元素
`.iterator()`	返回迭代器

遍历方式

普通for循环
for (int i = 0; i < list.size(); i++) { System.out.println(list.get(i)); }
增强for循环
for (String name : list) { System.out.println(name); }
迭代器遍历
Iterator<String> ite = list.iterator(); while(ite.hasNext()){ System.out.print(ite.next()); }

3. Map - HashMap

特点

键值对存储
key不允许重复，只能有一个空的key

常用方法

方法	说明
`.put(K key, V value)`	将键/值映射存放到Map集合中
`.get(Object key)`	返回指定键所映射的值，没有则返回null
`.size()`	返回key-value的组数
`.clear()`	清空Map集合
`.isEmpty()`	判断Map中是否有数据
`.remove(Object key)`	删除指定key的数据并返回对应value
`.containsKey(Object key)`	判断是否含有key
`.containsValue(Object value)`	判断是否含有value
`.putAll(Map map1)`	添加另一个Map的所有数据
`.replace(key, value)`	替换指定key的value

🌐 前端基础学习笔记

一、HTML 基础

1. HTML文档结构与Emmet快捷键

文档基本骨架

<!DOCTYPE html>：文档类型声明
<html lang="en">：根元素
<head>：头部，包含meta、title等
<meta charset="UTF-8">：字符编码
<meta name="viewport">：视口设置
<title>：页面标题
<body>：页面主体（唯一）

Live Server打开方式

右键 → Open with live server，地址为127.0.0.1:5500，更贴近真实部署环境。

Emmet常用缩写

缩写	说明
`!`	生成完整HTML5框架
`div`+ Tab	生成div标签
`p{hello}`	生成带文本的p标签
`li*3`	生成3个li标签
`li*3.item$`	带序号class（item1、item2、item3）
`ul>li`	生成子元素
`div+p`	生成兄弟元素

2. 常用HTML标签

文本标签

<span>：行内元素，横向布局
<div>：块级元素，换行
<h1>~<h6>：标题标签
<p>：段落标签

超链接与窗口

<a href="" target="_blank">：新窗口打开
target="_self"：本窗口打开（默认）
<iframe src="" name="窗口名">：内联窗口，配合a标签的target属性在指定窗口打开

锚点

<a name="demo">：定义锚点位置
<a href="#demo">：跳转到锚点位置

图片

<img src="" alt="替代文字">

src：图片路径（绝对或相对）
alt：加载失败时显示的替代文字

列表

<ul>：无序列表
<ol>：有序列表
<li>：列表项

表格

<table>：表格
<tr>：行
<td>：单元格
属性：border（边框）、cellspacing（间距）、cellpadding（填充）
<thead>：表头
<tfoot>：表尾
<tbody>：主体，便于单独操作

音频

<audio controls src="" autoplay loop muted>

controls：显示播放控件
autoplay：自动播放
loop：循环播放
muted：静音

3. 表单控件

需放在<form action="提交地址">内

类型	说明
`<input type="text">`	单行文本框
`<input type="password">`	密码框
`<input type="radio" name="sex">`	单选框（同名互斥）
`<input type="checkbox">`	多选框
`<input type="file">`	文件上传
`<input type="date">`	日期选择器

二、CSS 样式与布局

1. CSS样式添加方式

行内样式：style="属性:值;"（优先级最高）
内部样式：<head>中的<style>标签
外部样式：独立.css文件，通过<link rel="stylesheet" href="文件路径">引入

优先级：行内 > 内部/外部（后写的覆盖先写的，同级别看顺序）

2. CSS选择器

基础选择器

选择器	说明
`div { }`	元素选择器
`#id名`	ID选择器（唯一）
`.class名`	类选择器（可复用）
`*`	通配选择器（所有元素）

属性选择器

[class]：有class属性
[class^="aa"]：class以aa开头
[class$="aa"]：class以aa结尾
[class*="aa"]：class包含aa

关系选择器

包含选择器：div .xx（后代所有元素）
子选择器：div > .xx（仅一级子元素）
组合选择器：div, p, .class（同时生效）

伪元素选择器

::before/::after：在元素内容前后插入内容
::first-line：首行样式

伪类选择器

:hover：鼠标悬停状态
:focus：输入框获得焦点
:checked：单选/复选框选中状态
:nth-child(2n+2)：结构伪类，n从0开始
:nth-last-child(3)：从最后一个倒数第3个
:first-of-type/:last-of-type：同类型中的第一个/最后一个

优先级规则：ID选择器 > 类选择器 > 元素选择器选择器越长越精确，优先级越高；同级别按书写顺序执行

3. 盒子模型

组成

内容区（content）
内边距（padding）
边框（border）
外边距（margin）

padding

padding: 上右下左（顺时针），可单独设置padding-bottom等

border

border: 1px solid red，可单独设置border-top、border-top-color等

margin

margin: 上右下左
margin: auto：水平居中
相邻margin取最大值（不累加）

盒模型计算

content-box（默认）：width/height只控制内容区，padding+border额外增加盒子总大小
border-box：width/height控制整个盒子总大小，内容区自动缩小

box-sizing: border-box可避免padding/border撑大盒子，推荐使用。

4. 布局方式

显示类型

块级盒子：独占一行，支持宽高（div、h1~h6、ul、li、p）
内联级盒子：横向排列，不支持宽高（span）
内联块级盒子：横向排列，支持宽高（display: inline-block）

弹性盒子（Flexbox）

父元素设置display: flex，子元素默认横向排列。

主轴方向

flex-direction: row：默认从左到右
flex-direction: row-reverse：从右到左
flex-direction: column：从上到下
flex-direction: column-reverse：从下到上

主轴对齐

justify-content: flex-start：开始方向
justify-content: flex-end：结束方向
justify-content: center：居中
justify-content: space-between：两端对齐，中间等距
justify-content: space-around：空白放在元素两侧
justify-content: space-evenly：所有间隙均匀分布

交叉轴对齐

align-items: stretch：默认拉伸填满父容器高度
align-items: flex-start：顶部对齐
align-items: center：垂直居中
align-items: flex-end：底部对齐
align-items: baseline：文字基线对齐

换行与多行对齐

flex-wrap: wrap：允许换行
align-content：多行对齐（类似justify-content但作用于多行）

子元素属性

order: 数字：排序，值越小越靠前
flex-grow: 数字：拉伸比例，按剩余空间分配
flex-shrink: 数字：压缩比例，超出父容器时按比例缩小

5. 其他实用技巧

英文长单词换行：word-break: break-all强制截断
重置样式：* { margin: 0; padding: 0; }清除浏览器默认边距
背景图片：
- background-repeat: no-repeat：不平铺
- background-size: cover：填满容器
- background-attachment: fixed：背景不随滚动而滚动
- background-position：背景位置
图片不变形：object-fit: cover