开学前三周先进行企业实训，主要学习Javaweb并实现一些小的项目，本篇笔记主要记录第一周实训的知识总结以及个人遇到的问题及解答，用于日后复习回顾和知识巩固，希望可以帮到同样在学Javaweb的大家

D1

html基础

文本居中：text-align:center

无序链表：<ul><li> 快捷键 ul>li*3

换行：<br>

空元素：<br/>

表结构：快捷键 table>tr*2>td{单元格}

• <table>标签创建表格，<tr>定义行，<th><td>定义单元格
• 使用border-collapse: collapse优化边框显示
• 表头行通过background-color设置背景色
• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度

加粗：<strong>或font-weight: bold或<b>

图片：

• 路径使用技巧：
  • 同一目录下直接写文件名：src="pic.jpg"
  • 上级目录使用../：src="../images/pic.jpg"
  • 子目录直接写目录名：src="images/pic.jpg"
  • object-fit: cover保持图片比例并填充容器

超链接：

• <a>标签创建超链接，href属性指定链接目标
• target="_blank"使链接在新窗口打开
• 去除下划线：text-decoration: none

图片链接：

• 将<img>标签嵌套在<a>标签内部即可实现图片链接
• 去除图片链接默认边框：border: none
• cursor: pointer使鼠标悬停时显示手型图标

D2

块元素与行内元素

• 块元素特性：
  • 每个块元素独占一行（自动换行）
  • 可设置width和height属性
  • margin和padding的上下左右都有效
  • 默认宽度为父容器的 100%
• 行内元素特性：
  • 多个行内元素并排显示（不自动换行）
  • 设置width和height无效
  • margin和padding仅左右有效，上下无效
  • 宽度由内容本身决定

元素类型转换

/* 行内元素转块元素 */
.inline-to-block {display: block;
}
/* 块元素转行内元素 */
.block-to-inline {display: inline;width: 200px; /* 无效 */height: 40px; /* 无效 */
}
/* 块元素转行内块元素 */
.block-to-inline-block {display: inline-block;
}

• display: block：行内元素拥有块元素特性（独占一行 + 可设宽高）
• display: inline：块元素拥有行内元素特性（并排显示 + 宽高无效）
• display: inline-block：兼具两者特性（并排显示 + 可设宽高）

元素类型	排列方式	宽高设置	边距特性	常见标签
块元素	独占一行	可设置	margin/padding 全有效	div、p、h1-h6、ul、li
行内元素	并排显示	不可设置	仅左右 margin/padding 有效	span、a、strong、em
行内块元素	并排显示	可设置	margin/padding 全有效	img、input（默认）

CSS选择器

基础选择器

/* 1. 元素选择器：通过标签名选择元素 */
p {color: #333;line-height: 1.6;
}
/* 2. 类选择器：通过class属性选择元素（.开头） */
.highlight {background-color: #fff3cd;padding: 5px;
}
/* 3. ID选择器：通过id属性选择元素（#开头，唯一） */
#special {color: #dc3545;font-weight: bold;border-left: 3px solid #dc3545;padding-left: 10px;
}
/* 4. 多类选择器：同时匹配多个class */
.highlight.important {border: 2px dashed #ffc107;
}
/* 5. 通配符选择器：选择所有元素（*） */
* {margin: 0;padding: 0;box-sizing: border-box;
}

组合选择器

/* 1. 后代选择器：选择父元素内的所有后代元素（空格分隔） */
.parent p {color: #28a745;
}
/* 2. 子选择器：仅选择父元素的直接子元素（>连接） */
.parent > p {font-style: italic;border-bottom: 1px solid #28a745;
}
/* 3. 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素（+连接） */
h3 + p {color: #17a2b8;margin-top: 5px;
}
/* 4. 通用兄弟选择器：选择指定元素后的所有兄弟元素（~连接） */
h3 ~ p {margin-left: 10px;
}

还有伪类选择器和属性选择器

选择器类型	语法示例	作用说明	优先级
元素选择器	p { ... }	选择所有指定标签元素	低
类选择器	.class { ... }	选择所有带指定 class 的元素	中
ID 选择器	#id { ... }	选择带指定 id 的唯一元素	高
通配符选择器	* { ... }	选择所有元素	最低
后代选择器	div p { ... }	选择父元素内的所有后代元素	低
子选择器	div > p { ... }	选择父元素的直接子元素	低
相邻兄弟选择器	h3 + p { ... }	选择紧接在指定元素后的第一个兄弟元素	低
通用兄弟选择器	h3 ~ p { ... }	选择指定元素后的所有兄弟元素	低
伪类选择器	a:hover { ... }	根据元素状态或位置选择（如 hover、first-child）	中
属性选择器	input[type="text"]	根据元素属性及属性值选择	中

子选择器vs后代选择器：

.container > div（子选择器）

css.container > div {border-radius: 10px;
}

• 只选择 .container 的直接子元素（一级子元素）
• 不包括更深层的嵌套元素
• 是一种严格的父子关系

.container div（后代选择器）

css.container div {border-radius: 10px;
}

• 选择 .container 内部的所有 div 元素（无论嵌套多深）
• 包括直接子元素和间接子元素
• 是一种包含关系

外观样式

字体：font-family: "Microsoft YaHei", sans-serif; /* 优先使用微软雅黑，无则用系统默认无衬线字体 */

字体大小：font-size: 18px; /* 字体大小，单位px/em/rem等 */

加粗：font-weight: bold; /* 加粗，可选值：normal/bold/100-900 */

斜体：font-style: italic; /* 斜体，可选值：normal/italic/oblique */

行高：line-height: 1.8; /* 行高，可设数值、百分比或长度单位 */

背景颜色：background-color: #3498db;

背景图片：

background-image: url('https://picsum.photos/200/80'); /* 背景图片 */

background-position: center; /* 背景图片居中显示 */

background-size: cover; /* 背景图片覆盖容器，可能裁剪 */

文本颜色：color: #e74c3c;

文本对齐方式：text-align: center; /* left/center/right/justify */

文本装饰：text-decoration: underline; /* none/underline/overline/line-through */

大小写转换：text-transform: uppercase; /*none/uppercase/lowercase/capitalize */

首行缩进：text-indent: 2em; /*2em表示2个字符宽度 */

字符间距：letter-spacing: 3px;

属性类别	核心属性	作用说明	常用值示例
字体属性	font-family	设置字体类型，多个字体用逗号分隔，最后加通用字体族作为备选	“Microsoft YaHei”, sans-serif
	font-size	定义字体大小，可使用 px、em、rem 等单位	16px、1.2em、1rem
	font-weight	控制字体粗细，数值范围 100-900（400=normal，700=bold）	normal、bold、700
	font-style	设置字体风格	normal、italic（斜体）、oblique（倾斜）
	line-height	控制行间距，无单位时为字体大小的倍数	1.5、1.8em、24px
背景属性	background-color	设置背景颜色，支持十六进制、rgb ()、rgba () 等	#3498db、rgb(52,152,219)、rgba(52,152,219,0.8)
	background-image	引入背景图片，使用 url () 函数	url(‘image.jpg’)
	background-repeat	控制背景图片是否重复	repeat（默认）、no-repeat、repeat-x、repeat-y
	background-position	设置背景图片位置，支持方向词或百分比 / 像素值	center、top right、50% 50%
	background-size	定义背景图片尺寸	cover（覆盖）、contain（包含）、100% 100%
文本属性	color	设置文本颜色，同 background-color 支持的格式	#e74c3c、rgb(231,76,60)
	text-align	控制文本水平对齐方式	left、center、right、justify
	text-decoration	添加文本装饰线	none、underline（下划线）、line-through（删除线）
	text-transform	转换文本大小写（主要对英文有效）	uppercase（大写）、lowercase（小写）、capitalize（首字母大写）
	text-indent	设置首行缩进，常用 em 单位（1em = 当前字体大小）	2em
	letter-spacing/word-spacing	分别控制字符间距和单词间距	3px、8px
表格属性	border-collapse	控制表格边框是否合并	collapse（合并）、separate（分离）
	border-spacing	设置边框间距，仅在 border-collapse: separate 时有效	2px
	border（th/td）	定义单元格边框	1px solid #ddd
	padding（th/td）	设置单元格内边距，增加内容与边框的距离	12px 15px

盒子模型

（1）标准盒子模型（W3C 盒子模型）

• 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
• 总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
• 说明：width 和 height 仅作用于内容区，不包含内边距和边框。

（2）怪异盒子模型（IE 盒子模型）

• 总宽度 = width + margin-left + margin-right（width 已包含内容区、内边距和边框）
• 总高度 = height + margin-top + margin-bottom（height 已包含内容区、内边距和边框）
• 说明：通过 box-sizing: border-box 可将元素设置为怪异盒子模型（实际开发中更常用）。

属性	作用范围	常用值示例	注意事项
width/height	内容区（标准模型）	200px、50%	怪异模型中包含内边距和边框
padding	内容区与边框之间	10px、5px 10px	不能为负值，会影响盒子内部空间
border	内边距外侧的线条	2px solid #f00、dashed	会增加盒子总尺寸（标准模型）
margin	盒子与其他元素的间距	15px、0 auto（水平居中）	可能产生外边距合并（相邻元素 margin 重叠）
box-sizing	盒子模型模式	content-box（标准）、border-box（怪异）	全局设置 border-box 可简化布局计算

D3

弹性盒布局

注意：

在最低级div的class中，前面加一个box，之后在css中定义一个box就可以给所有区块统一设置颜色

<div class="box right-small"></div>--------------------------------------
.box {background-color: #66b1ff; /* 教学一专属浅蓝色，区分教学二灰色系 */border-radius: 4px; /* 可选：添加圆角，优化视觉效果 */
}

/* 全局样式重置：消除默认边距，统一盒模型 */
* {margin: 0;padding: 0;box-sizing: border-box;
}

• box-sizing: border-box：让元素的width和height包含内边距（padding）和边框（border），避免尺寸计算偏差，简化布局调试。

/* 外层容器：作为弹性盒根节点，控制整体垂直布局 */
.container {width: 75%;margin: 20px auto; /* 上下留白20px，左右自动居中 */padding: 15px;display: flex; /* 开启弹性盒布局 */flex-direction: column; /* 子元素垂直排列（从上到下） */gap: 12px; /* 各子区域（如顶部色块、行容器）之间的间距 */border: 1px solid #eee; /* 可选：添加边框便于观察容器范围 */
}

• display: flex + flex-direction: column：构成页面纵向骨架，使.container内的顶部色块、各row、底部色块按垂直顺序排列，符合效果图整体结构。
• gap：替代传统margin控制元素间距，避免 “外边距折叠” 问题，且仅作用于弹性盒子元素，布局更精准。

实现效果	用到的弹性盒属性 / 技巧	核心说明
整体垂直布局框架	flex-direction: column（.container）	构建页面纵向骨架，使顶部、各行列、底部色块按垂直顺序排列，匹配效果图整体结构。
行内色块水平排列	display: flex（.row）	让每行内的多个色块水平分布，实现 “一行多块” 的基础布局，是横向排列的核心。
等宽 / 不等宽分配	flex: 1 / flex: 2（各类色块）	通过flex数值比例控制宽度占比：数值相同则等宽（如第一行），数值不同则按比例分配（如第二行 1:2、第三行 2:1）。
复杂混合布局（左大右小）	弹性盒嵌套（.row-third 水平 + .right-group 垂直）	外层水平控制左右区域占比，内层垂直控制右侧色块排列，解决 “一行内既有水平又有垂直布局” 的复杂需求。
统一间距控制	gap（.container、.row、.right-group）	仅作用于弹性盒子元素，避免外边距折叠，确保全局间距统一（12px），布局更整洁。
垂直等高分块	calc(50% - 6px)（.right-small）	结合flex-direction: column，通过计算确保垂直排列的色块平分父容器高度，同时兼

D4

CSS定位

定位类型	属性值	特点
静态定位	position: static	默认值，元素按文档流正常布局，top/bottom/left/right 属性无效
相对定位	position: relative	元素相对于其正常位置偏移，仍占据文档流空间，常用于作为绝对定位的容器
绝对定位	position: absolute	元素脱离文档流，相对于最近的已定位祖先元素定位，不占据空间
固定定位	position: fixed	元素脱离文档流，相对于浏览器窗口固定位置，滚动时不移动

圆角与阴影

特性	属性	核心作用	常用场景
圆角	border-radius	控制元素边角的弧度	按钮、卡片、头像（圆形）
盒子阴影	box-shadow	给元素添加外阴影或内阴影	增强元素立体感、模拟分层
文本阴影	text-shadow	给文本添加阴影，增强可读性或装饰性	标题美化、特殊文本效果

圆角

/* 统一设置四个角的圆角半径 */
.element {border-radius: 10px; /* 所有角都是10px圆角 */
}
/* 分别设置四个角（顺时针：上左、上右、下右、下左） */
.element {border-radius: 5px 10px 15px 20px;
}
/* 圆形效果（宽高相等时） */
.circle {width: 100px;height: 100px;border-radius: 50%; /* 半径为宽高的一半，形成正圆 */
}
/* 椭圆效果（宽高不等时） */
.oval {width: 200px;height: 100px;border-radius: 50%; /* 形成椭圆 */
}

阴影

/* 基础阴影：水平偏移 垂直偏移 模糊半径 阴影大小 颜色 内外阴影 */
.element {    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 外阴影 */
}
/* 内阴影（添加inset关键字） */
.element {    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* 内阴影 */
}
/* 多重阴影（用逗号分隔） */
.element {    box-shadow: 0 0 10px #f00, /* 红色发光效果 */                5px 5px 15px rgba(0, 0, 0, 0.3); /* 黑色阴影 */
}

参数说明：

• 水平偏移（必选）：正数向右，负数向左
• 垂直偏移（必选）：正数向下，负数向上
• 模糊半径（可选）：值越大阴影越模糊
• 阴影大小（可选）：值越大阴影范围越大
• 颜色（可选）：默认与文本颜色一致，建议用 rgba 设置透明度
• inset（可选）：添加后为内阴影，默认外阴影

文本阴影（text-shadow）

用于给文本添加阴影效果。

/* 基础文本阴影：水平偏移 垂直偏移 模糊半径 颜色 */
.text {    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 多重文本阴影 */
.text {    text-shadow: 1px 1px 2px #000, /* 黑色阴影 */                 0 0                  10px #fff; /* 白色发光效果 */
}

动画

动画属性	作用说明	常用值示例
@keyframes	定义动画关键帧，描述元素在不同时间点的样式	0% { ... }、50% { ... }、100% { ... }
animation-name	指定要绑定到元素的动画名称	自定义名称（如colorChange、breathe）
animation-duration	动画持续时间（必选，否则动画不执行）	3s（3 秒）、2000ms（2000 毫秒）
animation-timing-function	动画速率曲线	linear（匀速）、ease-in-out（先加速后减速）
animation-delay	动画开始前的延迟时间	1s（延迟 1 秒）
animation-iteration-count	动画循环次数	3（3 次）、infinite（无限循环）
animation-direction	动画播放方向	normal（正向）、alternate（交替反向）
animation-play-state	控制动画播放状态	running（播放）、paused（暂停）

D5 js

基本类型

Undefined、Null、Boolean、Number、String

• Number (数字类型) 3 3.3 -4
• String (字符串) ‘’ “”
• Boolean (布尔) true false

运算符

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 算术运算符：console.log(2 * 3);          //6console.log(2 * '3');        //6console.log('2' * '3');      //6//*（乘法）时，JS 引擎会强制把两边的操作数都转成数字，然后再相乘。// 也就是说：* 只能用于数字之间的运算，所以 JS 会自动尝试把字符串转成数字console.log(2 * '3a');       //NaN/* '3a' 是一个字符串，包含非数字字符 a,JS 试图用 Number('3a') 转换它Number('3a') → NaN（因为 3a 不是有效数字）2 * NaN → NaN  */// 任何数与 NaN 运算都得 NaN//NaN 表示：一个本该是数字，但无法表示为有效数字的值// 它是 number 类型的一个“异常值”console.log(2 * true);       //2//true 是布尔值,JS 用 Number(true) 转换 → 1console.log(2 * false);      //0console.log(2 * null);       //0console.log(2 * undefined);  //NaN//undefined 表示“未定义”,Number(undefined) → NaNconsole.log(5 % 2);          //1console.log(5 % 5);          //0console.log(5 % '2');        //1console.log(5 % true);       //0console.log(5 % false);      //NaN//任何数对 0 取模都是“未定义”的console.log(2 % 5);          //2console.log(3 % 5);          //3// 关系运算符：console.log(3 > 2);          //trueconsole.log(1 >= '1');       //true    Number('1') → 1console.log(0 >= 'false')    //false   Number('false') → NaNconsole.log(0 <= false);     //true    false 是布尔值 Number(false) → 0console.log(0 >= null);      //true    Number(null) → 0console.log('100' > '2')     //false   两边都是字符串 → 按字典序（字符串比较）console.log(2 > NaN);        //false   任何比较中出现 NaN，结果都是 falseconsole.log(2 == '2');       //true    == 是宽松相等，会进行类型转换console.log(2 === '2');      //false   === 是严格相等，不会进行类型转换console.log(2 != '2');       //false   != 是松散不等，会进行类型转换console.log(2 !== '2');      //true    !== 是严格不等 2 === '2' 是 false → 所以 2 !== '2' trueconsole.log(null == 0);      //false   null == 0：null 不会转换为 0 来比较,null 只在 == undefined 时为 trueconsole.log(null == false);  //false   null和false类型不同 Number(null) → 0，但 == 不会自动转成数字比较console.log(null == '');     //false   null 和空字符串 '' 类型不同，Number('') → 0，但 null == '' 没有特殊规则console.log(null == undefined);      //trueconsole.log(null === undefined);     //false   === 严格相等：类型必须相同console.log(NaN === NaN);           //false    NaN 表示“不是一个有效数字”它不等于任何值，包括它自己console.log(11111111111111111111111111111111111111111111111111111111111111);// 分割线// 逻辑运算符：console.log(!0);            //trueconsole.log(!false);        //trueconsole.log(!'');           //trueconsole.log(!null);         //trueconsole.log(!undefined);    //trueconsole.log(!NaN);          //trueconsole.log(!8);            //falseconsole.log(!-8);           //falseconsole.log(!!8);           //true// 赋值运算符：var i = 5;var a = 3;a += ++i + ++i - i++ + i++; //a = 17var b=a++ + i++ + ++a + a++ + "a++"; //a = 20 // 求：i、a、b的值分别是多少？console.log(i,a,b);// i = 10, a = 20, b = "64a++"//加法从左到右执行，当遇到字符串时，会触发字符串拼接// 特殊运算符：console.log(typeof 3);         //numberconsole.log(typeof '3');       //stringconsole.log(typeof true);      //booleanconsole.log(typeof null);      //objectconsole.log(typeof undefined); //undefined</script>
</body>
</html>

undefined和null

特性	undefined	null
含义	“未定义” —— 变量声明了但没赋值	“空值” —— 明确表示“没有对象”
类型	undefined	object（历史 bug！）
谁设置的	JavaScript 自动设置	开发者主动设置
使用场景	变量未初始化、函数无返回值	表示“有意为空”

let a;
console.log(a);           // undefined（声明了但没赋值）function foo() { }
console.log(foo());       // undefined（函数没有 return）let obj = {};
console.log(obj.b);       // undefined（属性不存在）

👉 undefined 表示：这里应该有个值，但现在还没有

let person = null;        // 明确表示“现在没有人”let element = document.getElementById('not-exist');
console.log(element);     // null（DOM 查询不到元素）// 清空对象引用
let data = { name: '张三' };
data = null;              // 明确释放内存

👉 null 表示：我特意把这个值设为空

document.getElementById('result').textContent = advice;

把变量 advice 的值，显示在网页中 id 为 'result' 的 HTML 元素内部

• let vs var：let 有块级作用域，而 var 有函数作用域
• let vs const：let 声明的变量可以重新赋值，而 const 声明的是常量，不能重新赋值