JavaWeb前端（HTML，CSS具體案例）

前言

一直在學習B站黑馬程序員蒼穹外賣。現在已經學的差不多了，但是我學習一直是針對后端開發的，前端也沒太注重去學（他大部分都給課程資料嘻嘻🤪），但我還是比較感興趣，準備先把之前學JavaWeb（黑馬程序員新推出的哦，視頻講的非常好😗可以去看看）時跳過的前端內容學一下，然后再用蒼穹外賣前端內容補上，先從最基礎的開始復習一下（HTML，CSS）嗯，其實之前寫過一個總結，這次更詳細一點，舉幾個具體的例子

概述：

1.web前端主要由三部分組成：

HTML：負責網頁的結構（頁面元素和內容）。
CSS：負責網頁的表現（頁面元素的外觀、位置等頁面樣式，如：顏色、大小等）。
JavaScript：負責網頁的行為（交互效果）。

2.其中還有前端開發中的高級技術Vue、ElementPlus、Axios需要掌握。

1.HTML入門程序（🙌用一個程序看看HTML是干嘛的）

先來看看實現（一個標題，一個圖片（圖片是我隨便找的））：
在這里插入圖片描述
來看看代碼：

1.新建文件夾htmlhhhh
在這里插入圖片描述

2.打開VS-Code打開文件夾，在文件夾里新建文本文件，后綴名改為 .html，命名為：01. html快速入門.html，新建img文件夾，導入 1.png 文件：

在這里插入圖片描述
在01. html快速入門.html寫入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 快速入門</title>
</head>
<body><h1>Hello HTML</h1><img src="img/1.png">
</body>
</html>

🧩擴展：

輸入一個! （要用英文哦），可以快速生成框架：

在這里插入圖片描述
3. 標題標簽 h 系列：

在這里插入圖片描述

效果：h1為一級標題，字體也是最大的； h6為六級標題，字體是最小的。

總結一下吧??，HTML語法:
HTML: HyperText Markup Language，超文本標記語言。

超文本：超越了文本的限制，比普通文本更強大。除了文字信息，還可以定義圖片、音頻、視頻等內容。
標記語言：由標簽 “<標簽名>” 構成的語言
HTML代碼直接在瀏覽器中運行，HTML標簽由瀏覽器解析。

2.CSS入門程序（🙌來看看CSS具體是干嘛的）

先來看看實現吧（新聞發布時間 2024年05月15日 20:07 的字體顏色是灰色的，這個就是用CSS實現的）

在這里插入圖片描述

代碼：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【哈哈哈哈哈哈哈】哈哈哈哈哈哈哈哈哈哈哈哈</title><style>.publish-date {color: gray;}</style>
</head>
<body><!-- 定義網頁標題, 標題內容： 哈哈哈哈哈哈哈 --><h1 id="title">【哈哈哈哈哈哈哈】哈哈哈哈哈哈哈哈哈哈哈哈</h1><!-- 定義一個超鏈接, 鏈接地址：https://news.cctv.com/, 鏈接內容：央視網 --><a href="https://news.cctv.com/" target="_blank">央視網</a><span class="publish-date">2024年05月15日 20:07</span></body>
</html>

其實Css就是選擇前端一個板塊，然后指定樣式。選擇方式：其實有三種，上面是用的最多的一種用CSS選擇器，來看看常用的選擇器吧：

在這里插入圖片描述

前面說了用HTML標簽來寫和裝飾文本，那他是橫著排還是豎著排？我們來看看頁面的布局

盒子模型：
來看看實現（就是把整個文本居中放置，看著更方便了）

在這里插入圖片描述

來看看代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</title><style>/* 設置段落首行縮進 */p {text-indent: 2em; /* 首行縮進2em */line-height: 2; /* 行高2倍 */}/* 新增樣式 */.news-content {width: 70%; /* 寬度占70% */margin: 0 auto; /* 橫向居中 */}</style>
</head>
<body><!-- 包裹新聞內容的容器 --><div class="news-content"><h1 id="title">【哈哈哈哈哈哈哈】哈哈哈哈哈哈哈哈哈哈哈哈</h1><p><strong>hhhhh消息</strong>（hhhh聯播）： 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈     </p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></div>
</body>
</html>

總結一下吧：

盒子：頁面中所有的元素（標簽），都可以看做是一個盒子，由盒子將頁面中的元素包含在一個矩形區域內，通過盒子的視角更方便的進行頁面布局。
盒子模型組成：內容區域（content）、內邊距區域（padding）、邊框區域（border）、外邊距區域（margin）。

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {width: 200px;   /* 內容寬度 */height: 200px;  /* 內容高度 */box-sizing: border-box; /* 指定width height為盒子的高寬 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 內邊距, 上 右 下 左 , 邊距都一行, 可以簡寫: padding: 20px;*/ border: 10px solid red; /* 邊框, 寬度 線條類型 顏色 */margin: 30px 30px 30px 30px; /* 外邊距, 上 右 下 左 , 邊距都一行, 可以簡寫: margin: 30px; */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

在這里插入圖片描述

flex布局

布局有了盒子模型為什么要有flex呢？? 說說他的好處：

它是現代網頁布局的基石，90% 的頁面都需要它。
它解決了傳統布局的痛點：居中難、對齊難、自適應難（只靠 margin/padding 太難了！）。
它簡單直觀：只要記住“父容器控制布局”，就能快速上手。
它兼容性好：所有現代瀏覽器都支持。

還是來看看一個例子：
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#container {display: flex;flex-direction: row;justify-content: space-between;background-color: #aeea6a;width: 400px;height: 300px;}#container div {background-color: #e866ef;width: 100px;height: 50px; }</style>
</head>
<body><div id="container"><div>Flex Item</div><div>Flex Item</div><div>Flex Item</div></div>
</body>
</html>

來總結一下吧：

flex布局相關的CSS樣式：
在這里插入圖片描述

主軸（main axis） → → → → → → →
↓
交叉軸（cross axis）

主軸方向：由 flex-direction 決定（默認是 row 橫向）。
交叉軸：與主軸垂直的方向。

在這里插入圖片描述

如果主軸設置為row，其實就是橫向布局。主軸設置為column，其實就是縱向布局。

在這里插入圖片描述

🌏其實HTML還有好多標簽，Css也是，我們還可以用它做表格，規定整個頁面的布局等等，在這里就不一一列舉了，直接來個實現🤔（作為前面學習內容的應用）：

1.首先：來看看實現功能（是一個表格哦，有點像之前蒼穹外買的菜品，菜品分類的查詢功能）：

在這里插入圖片描述

2.來看看代碼吧：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Tlias智能學習輔助系統</title><style>body {margin: 0;}/* 頂欄樣式 */.header {display: flex;justify-content: space-between;align-items: center;background-color:  #c2c0c0;padding: 10px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 加大加粗標題 */.header h1 {margin: 0;font-size: 24px;font-weight: bold;}/* 文本鏈接樣式 */.header a {text-decoration: none;color: #333;font-size: 16px;}/* 搜索表單區域 */.search-form {display: flex;align-items: center;padding: 20px;background-color: #f9f9f9;}/* 表單控件樣式 */.search-form input[type="text"], .search-form select {margin-right: 10px;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;width: 200px;}/* 按鈕樣式 */.search-form button {padding: 5px 15px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}/* 清空按鈕樣式 */.search-form button.clear {background-color: #6c757d;}.table {min-width: 100%; border-collapse: collapse;}/* 設置表格單元格邊框 */.table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center;}.avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; }/* 頁腳版權區域 */.footer {background-color: #c2c0c0;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}.footer .company-name {font-size: 1.1em;font-weight: bold;}.footer .copyright {font-size: 0.9em;}#container {width: 80%;margin: 0 auto;}</style>
</head>
<body><div id="container"><!-- 頂欄 --><div class="header"><h1>Tlias智能學習輔助系統</h1><a href="#">退出登錄</a></div><!-- 搜索表單區域 --><form class="search-form" action="#" method="post"><input type="text" name="name" placeholder="姓名" /><select name="gender"><option value="">性別</option><option value="male">男</option><option value="female">女</option></select><select name="position"><option value="">職位</option><option value="班主任">班主任</option><option value="講師">講師</option><option value="學工主管">學工主管</option><option value="教研主管">教研主管</option><option value="咨詢師">咨詢師</option></select><button type="submit">查詢</button><button type="reset" class="clear">清空</button></form><table class="table table-striped table-bordered"><thead><tr><th>姓名</th><th>性別</th><th>頭像</th><th>職位</th><th>入職日期</th><th>最后操作時間</th><th>操作</th></tr></thead><tbody><tr><td>令狐沖</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐沖" class="avatar"></td><td>講師</td><td>2021-03-15</td><td>2023-07-30T12:00:00Z</td><td class="btn-group"><button>編輯</button><button>刪除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td><td>學工主管</td><td>2020-04-10</td><td>2023-07-29T15:00:00Z</td><td class="btn-group"><button>編輯</button><button>刪除</button></td></tr><tr><td>岳不群</td><td>男</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td><td>教研主管</td><td>2019-01-01</td><td>2023-07-30T10:00:00Z</td><td class="btn-group"><button>編輯</button><button>刪除</button></td></tr><tr><td>寧中則</td><td>女</td><td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="寧中則" class="avatar"></td><td>班主任</td><td>2018-06-01</td><td>2023-07-29T09:00:00Z</td><td class="btn-group"><button>編輯</button><button>刪除</button></td></tr></tbody></table><!-- 頁腳版權區域 --><footer class="footer"><p class="company-name">江蘇傳智播客教育科技股份有限公司</p><p class="copyright">版權所有 Copyright 2006-2024 All Rights Reserved</p></footer></div></body>
</html>

是不是好長好長😨😱，沒事之后學的Javascript和Vue，會簡化代碼的

雖然很長而且以后可能會白雪，但我們還是要看看，解析解析：

首先來看看HTML標簽（功能里用到的）：

1. 文檔結構標簽<!DOCTYPE html>：定義文檔類型為 HTML5。
<html lang="zh-CN">：根元素，聲明文檔為中文（簡體）語言。
<head>：包含文檔的元數據（如字符集、標題、樣式等）。
<meta>：用于定義字符編碼、視口設置等元信息。
charset="UTF-8"：指定字符編碼為 UTF-8。
name="viewport"：用于響應式設計，控制頁面在移動設備上的縮放。
<title>：定義網頁標題，顯示在瀏覽器標簽頁上。
<style>：嵌入 CSS 樣式代碼。
<body>：包含網頁的主體內容。2. 布局與容器標簽<div>：通用塊級容器，用于布局和分組內容。
如：.header、#container、.search-form 等。
<footer>：語義化標簽，表示頁腳區域。3. 表單與交互標簽
<form>：定義表單，用于用戶輸入和提交數據。
<input type="text">：文本輸入框，用于輸入姓名。
<select>：下拉選擇框，用于選擇性別和職位。
<option>：定義下拉列表中的選項。
<button type="submit">：提交按鈕，用于提交表單。
<button type="reset">：重置按鈕，清空表單內容。4. 表格標簽
<table>：定義表格。
<thead>：表格的頭部區域。
<tbody>：表格的主體區域。
<tr>：表格中的行（table row）。
<th>：表頭單元格（table header），用于列標題。
<td>：標準單元格（table data），用于表格數據。5. 文本與鏈接標簽
<h1>：一級標題，用于頁面主標題。
<a href="#">：超鏈接，此處用于“退出登錄”功能。
<p>：段落標簽，用于頁腳中的版權信息。6. 多媒體標簽
<img>：插入圖片，用于顯示用戶頭像。
使用 src 指定圖片路徑，alt 提供替代文本，class 應用樣式。

來看看Css選擇器，和修飾表示方式（太多了我讓AI干的，有點啰嗦🤪）：

👍一、整體結構與布局：

1.body

body {margin: 0;
}

作用：清除瀏覽器默認的外邊距（margin），使頁面內容緊貼瀏覽器邊緣。
目的：實現更精確的布局控制。

2.#container

#container {width: 80%;margin: 0 auto;
}

作用：
設置容器寬度為父元素（body）的 80%。
margin: 0 auto 實現水平居中。

目的：讓整個頁面內容在視口中居中顯示，留出左右邊距，提升視覺舒適度。

? 二、頭部區域 .header

.header {display: flex;justify-content: space-between;align-items: center;background-color: #c2c0c0;padding: 10px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

display: flex：啟用彈性布局。
justify-content: space-between：兩端對齊，標題在左，“退出登錄”在右。
align-items: center：垂直居中對齊子元素。
背景與陰影：灰色背景 + 輕微下陰影，增強層次感。
內邊距：上下 10px，左右 20px，提供呼吸空間。

.header h1 {margin: 0;font-size: 24px;font-weight: bold;
}.header a {text-decoration: none;color: #333;font-size: 16px;
}

清除標題默認 margin。
鏈接去除下劃線，深灰色文字，可讀性強。

? 三、搜索表單 .search-form

.search-form {display: flex;align-items: center;padding: 20px;background-color: #f9f9f9;
}

彈性布局，方便對齊輸入框和按鈕。
淺灰色背景，與頭部和表格形成區分。
內邊距提供間距

表單控件樣式

.search-form input[type="text"], .search-form select {margin-right: 10px;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;width: 200px;
}

統一輸入框和下拉框樣式。
圓角邊框（border-radius）更現代。
固定寬度便于對齊。

按鈕樣式

.search-form button {padding: 5px 15px;margin-left: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;
}.search-form button.clear {background-color: #6c757d;
}

主按鈕為藍色（Bootstrap 風格），清空按鈕為灰色。
去除邊框，使用背景色突出。
光標變為指針，提示可點擊。

? 四、表格樣式 .table

.table {min-width: 100%;     /* 表格最小寬度撐滿容器 */border-collapse: collapse;  /* 合并邊框，消除雙線 */
}

單元格通用樣式

.table td, .table th {border: 1px solid #ddd;     /* 淺灰色邊框 */padding: 8px;text-align: center;         /* 內容居中 */
}

所有單元格居中對齊，視覺整齊。
border-collapse: collapse 讓表格線條更緊湊美觀

? 五、頭像樣式 .avatar

.avatar {width: 30px;height: 30px;object-fit: cover;     /* 圖像裁剪以填充容器 */border-radius: 50%;     /* 圓形頭像 */
}

實現圓形頭像效果。
object-fit: cover 確保圖片不變形，居中裁剪。

? 六、頁腳 .footer

.footer {background-color: #c2c0c0;color: white;text-align: center;padding: 10px 0;margin-top: 30px;
}

與頭部同色背景，形成首尾呼應。
白色文字提高對比度。
居中對齊文本。
margin-top: 30px 提供與上方內容的間距。

文字樣式細分

.footer .company-name {font-size: 1.1em;font-weight: bold;
}.footer .copyright {font-size: 0.9em;
}

小白啊！！！寫的不好輕噴啊🤯如果覺得寫的不好，點個贊吧🤪（批評是我寫作的動力）

…。。。。。。。。。。。…

…。。。。。。。。。。。… 請添加圖片描述