開學前三周先進行企業實訓，主要學習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 聲明的是常量，不能重新賦值