Web前端基礎:HTML-CSS

1.標題

1.1標題排版

超鏈接 a 標簽：
標簽：<a href="....." target=".....">央視網</a>
屬性：

href: 指定資源訪問的url
target: 指定在何處打開資源鏈接
- _self: 默認值，在當前頁面打開
- _blank: 在空白頁面打開

1.2標題樣式

1.2.1CSS引入方式

名稱	語法描述	示例
行內樣式	在標簽內使用style屬性，屬性值是css屬性鍵值對。	`<h1 style="xxx:xxx;">`中國新聞網`</h1>`
內部樣式	定義`<style>`標簽，在標簽內部定義css樣式	`<style>` h1 {…} `</style>`
外部樣式	定義`<link>`標簽，通過href屬性引入外部css文件	`<link rel="stylesheet" href="css/news.css">`

行內樣式：會出現大量的代碼冗余，不方便后期的維護，所以不常用（常配合JS使用）。
內部樣式：通過定義css選擇器，讓樣式作用于當前頁面的指定的標簽上。（可以寫在頁面任何位置，但通常約定寫在head標簽中）
外部樣式：html和css實現了完全的分離，企業開發常用方式。

1.2.2顏色表示方式

表示方式	屬性值	說明	取值
關鍵字	顏色英文單詞	red、green、	red、green、
rgb表示法	rgb(r, g, b)	紅綠藍三原色，每項取值范圍：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
rgba表示法	rgba(r, g, b, a)	紅綠藍三原色，a表示透明度，取值：0-1	rgb(0,0,0,0.3)、rgb(255,255,255,0.5)
十六進制表示法	#rrggbb	#開頭，將數字轉換成十六進制表示	#000000、#ff0000、#cccccc，簡寫：#000、#ccc

1.2.3設置字體顏色

color:設置文本內容的顏色

1.2.4CSS選擇器

1.最為常見的三類選擇器的寫法?
元素選擇器:標簽名{…}
類選擇器:.class屬性值{…}
id選擇器:#id屬性值{…}
2.優先級:id選擇器->類選擇器->元素選擇器

選擇器名   {css樣式名：css樣式值;css樣式名：css樣式值;
}

選擇器	寫法	示例	示例說明
元素選擇器	元素名稱 {…}	h1 {…}	選擇頁面上所有的`<h1>`標簽
類選擇器	.class屬性值 {…}	.cls {…}	選擇頁面上所有class屬性為cls的標簽
id選擇器	#id屬性值 {…}	#hid {…}	選擇頁面上id屬性為hid的標簽
分組選擇器	選擇器1,選擇器2{…}	h1,h2 {…}	選擇頁面上所有的`<h1>`和`<h2>`標簽
屬性選擇器	元素名稱[屬性] {…}	input[type] {…}	選擇頁面上有type屬性的`<input>`標簽
屬性選擇器	元素名稱[屬性名=“值”] {…}	input[type=“text”] {…}	選擇頁面上type屬性為text的`<input>`標簽
后代選擇器	元素1元素2{…}	form input {…}	選擇`<form>`標簽內的所有`<input>`標簽

設置超鏈接取消下劃線效果

    a {text-decoration: none;}

2.正文

2.1正文排版

2.1.1基本實現

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>標題</title><!-- 2. 內部樣式 --><style>.publish-date {color: #b2b2b2;}/* 設置超鏈接取消下劃線效果 */a {text-decoration: none;}</style>
</head>
<body><!-- 定義網頁標題, 標題內容： xxx --><h1 id="title">xxx</h1><!-- 定義一個超鏈接, 鏈接地址：https://x.x.x/, 鏈接內容：xx網 --><a href="https://x.x.x/" target="_blank">xx網</a><span class="publish-date">2024年05月15日 20:07</span><br><br><!-- 定義一個視頻, video/news.mp4 --><video src="video/news.mp4" controls  width="80%"></video><p>內容</p><p>內容</p><!-- 定義一張圖片, img/1.gif --><img src="img/1.gif" alt=""  width="100%"><p>內容</p><p>內容</p><p>內容</p><img src="img/2.jpg" width="100%"><p>內容</p><p>內容</p><img src="img/3.jpg" width="100%"><p>內容</p><p>內容</p><img src="img/4.jpg" width="100%"><p>內容</p><p>內容</p><p>內容</p><img src="img/5.jpg" width="100%"><p>內容</p><img src="img/6.jpg"></body>
</html>

2.1.2常見標簽

<video> 視頻標簽
- src：指定視頻的url
- url（絕對路徑/相對路徑）
- controls：是否顯示播放控件
- width：寬度（像素/相對于父元素百分比）；備注: 一般width 和 height 我們只會指定一個，另外一個會自動的等比例縮放。
- height：高度（像素/相對于父元素百分比）；備注: 一般width 和 height 我們只會指定一個，另外一個會自動的等比例縮放。
<img> 圖片標簽
- src, width，height
<p> 段落標簽
<br>換行標簽
<b>/ <strong> 加粗 <strong> 具有強調語義
<u>/ <ins> 下劃線 <ins> 具有強調語義
<i> / <em> 傾斜 <em> 具有強調語義
<s> / <del> 刪除線 <del> 具有強調語義
  空格
< <
> >

2.1.3路徑表示

絕對路徑
- 絕對磁盤路徑(D:/xxx.jpg)
- 絕對網絡路徑(https://xxx.jpg)
相對路徑
- 當前目錄:./(可以省略)
- 上一級目錄: . . /

2.2正文樣式

    /* 設置段落首行縮進 */p {text-indent: 2em; /* 首行縮進2em */line-height: 2; /* 行高2倍 */}

3.布局

完成了標簽及正文部分的排版制作，以及樣式處理之后，那最后一步，我們就要來完成頁面整體布局的設置了。頁面是出于整個版面的正中心的，那這種呢，在布局中也稱為 版心居中。

3.1功能實現

    /* 新增樣式 */.news-content {width: 70%; /* 寬度占70% */margin: 0 auto; /* 橫向居中 */<!-- 包裹新聞內容的容器 --><div class="news-content">}</div>

3.2盒子模型

組成:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)
注意事項:如果只需要設置某一個方位的邊框、內邊距、外邊距,可以在在屬性名后加上一位置,如:padding-top、padding-left, padding-right …

3.2.1布局標簽

標簽：<div> <span>
特點：
<div>標簽：
- 一行只顯示一個（獨占一行）
- 寬度默認是父元素的寬度，高度默認由內容撐開
- 可以設置寬高（width、height）
<span>標簽：
- 一行可以顯示多個
- 寬度和高度默認由內容撐開
- 不可以設置寬高（width、height）

3.2.2代碼實現

<!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>

我們可以，通過瀏覽器的開發者工具，清晰的看到這個盒子，以及每一個部分的大小：
在這里插入圖片描述
備注：

上述的padding、margin屬性值，可以是4個值、也可以是兩個值、也可以是一個值，具體的含義如下：
padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；
padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；
padding: 20px; -----------------------------> 表示上、右、下、左都是20px；

4.案例

4.1需求

參照Tlias智能學習輔助系統，完成員工管理頁面的制作。

在這里插入圖片描述

4.2代碼實現

4.2.1頂部導航欄

在這里插入圖片描述

4.2.1.1基本實現

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hmhvictory員工管理系統</title><style>body {margin: 0;}/* 頂欄樣式 */.header {display: flex;justify-content: space-between;align-items: center;background-color: #f1f1f1;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;}</style>
</head>
<body><!-- 頂欄 --><div class="header"><h1>hmhvictory員工管理系統</h1><a href="#">退出登錄</a></div><!-- 其他部分可以在這里添加 -->
</body>
</html>

4.2.1.2flex布局

flex是flexible Box的縮寫，意為"彈性布局"。采用flex布局的元素，稱為Flex容器（container），它的所有子元素自動成為容器成員，稱為Flex項目（item）。
通過給父容器添加flex屬性,來控制子元素的位置和排列方式。
flex布局相關的CSS樣式：

4.2.2搜索表單

在這里插入圖片描述

4.2.2.1表單標簽

在這里插入圖片描述
上述的整個窗口是一個表單，而表單是一項一項的，這個我們稱為表單項或表單元素。

表單場景: 表單就是在網頁中負責數據采集功能的，如：注冊、登錄的表單。
表單標簽: <form>
表單屬性:
- action: 規定表單提交時，向何處發送表單數據，表單提交的URL。
- method: 規定用于發送表單數據的方式，常見為： GET、POST。
  - GET：表單數據是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能攜帶的表單數據大小是有限制的。
  - POST：表單數據是在請求體（消息體）中攜帶的，大小沒有限制。
表單項標簽: 不同類型的input元素、下拉列表、文本域等。
- input: 定義表單項，通過type屬性控制輸入形式
- select: 定義下拉列表
- textarea: 定義文本域

演示：
1). GET方式提交的表單

<!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>HTML-表單</title>
</head>
<body><!-- form表單屬性: action: 表單提交的url, 往何處提交數據 . 如果不指定, 默認提交到當前頁面method: 表單的提交方式 .get: 在url后面拼接表單數據, 比如: ?username=Tom&age=12 , url長度有限制 . 默認值post: 在消息體(請求體)中傳遞的, 參數大小無限制的.-->   <form action="" method="get">用戶名: <input type="text" name="username">年齡: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表單編寫完畢之后，通過瀏覽器打開此表單，然后再表單項中錄入值之后，點擊提交，我們會看到表單的數據在url后面提交到服務端，格式為：?username=Tom&age=12。
在這里插入圖片描述
2). POST方式提交表單
將上述的表單提交方式由get，改為post

<!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>HTML-表單</title>
</head>
<body><!-- form表單屬性: action: 表單提交的url, 往何處提交數據 . 如果不指定, 默認提交到當前頁面method: 表單的提交方式 .get: 在url后面拼接表單數據, 比如: ?username=Tom&age=12 , url長度有限制 . 默認值post: 在消息體(請求體)中傳遞的, 參數大小無限制的.-->   <form action="" method="post">用戶名: <input type="text" name="username">年齡: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表單編寫完畢之后，通過瀏覽器打開此表單，然后再表單項中錄入值之后，點擊提交，我們會看到表單的數據在url后面提交到服務端，格式為：?username=Tom&age=12。
在這里插入圖片描述
注意事項：
表單中的所有表單項，要想能夠正常的采集數據，在提交的時候能提交到服務端，表單項必須指定name屬性。否則，無法提交該表單項。

用戶名: <input type="text" name="username">

4.2.2.2表單項標簽

在一個表單中，可以存在很多的表單項，而雖然表單項的形式各式各樣，但是表單項的標簽其實就只有三個，分別是：

<input>: 表單項 , 通過type屬性控制輸入形式。
<select>: 定義下拉列表, 定義列表項
<textarea>: 文本域

演示：
創建一個新的表單項的html文件，具體內容如下：

<!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>HTML-表單項標簽</title>
</head>
<body><!-- value: 表單項提交的值 -->
<form action="/save" method="post">姓名: <input type="text" name="name"> <br><br>密碼: <input type="password" name="password"> <br><br> 性別: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>愛好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>圖像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>時間: <input type="time" name="time"> <br><br>日期時間: <input type="datetime-local" name="datetime"> <br><br>學歷: <select name="degree"><option value="">----------- 請選擇 -----------</option><option value="1">大專</option><option value="2">本科</option><option value="3">碩士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表單常見按鈕 --><input type="button" value="按鈕"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>

通過瀏覽器打開上述的表單項html文件，最終展示出的表單信息如下：
在這里插入圖片描述
而對于<input type="hidden">，是一個隱藏域，在表單中并不會顯示出來，但是在提交表單的時候，是會提交到服務端的。接下來，我們就點擊提交按鈕，來提交當前表單，看看提交的數據：

4.2.2.3搜索表單實現

代碼實現如下:

      /* 搜索表單區域 */.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;}<!-- 搜索表單區域 --><form class="search-form"><input type="text" name="name" placeholder="姓名" /><select name="gender"><option value="">性別</option><option value="1">男</option><option value="2">女</option></select><select name="job"><option value="">職位</option><option value="1">班主任</option><option value="2">講師</option><option value="3">學工主管</option><option value="4">教研主管</option><option value="5">咨詢師</option></select><button type="submit">查詢</button><button type="reset" class="clear">清空</button></form>

4.2.3表格數據展示

在這里插入圖片描述

4.2.3.1基本實現

      .table {min-width: 100%; border-collapse: collapse;margin: 0 20px;}/* 設置表格單元格邊框 */.table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center;}.avatar { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; }<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://via.placeholder.com/50" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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>

4.2.3.2表格標簽

在這里插入圖片描述

4.2.4底部版權區域

      /* 頁腳版權區域 */.footer {background-color: #8f8c8c;color: white;text-align: center;padding: 20px 0;margin-top: 30px;}.footer .company-name {font-size: 1.1em;font-weight: bold;}.footer .copyright {font-size: 0.9em;}<!-- 頁腳版權區域 --><footer class="footer"><p class="company-name">豪大大有限公司</p><p class="copyright">版權所有 Copyright 2006-2024 All Rights Reserved</p></footer>

4.2.5版心居中

代碼實現:

    #container {width: 80%;margin: 0 auto;}<div id="container">內容...</div>

總體代碼:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hmhvictory員工管理系統</title><style>body {margin: 0;}/* 頂欄樣式 */.header {display: flex;justify-content: space-between;align-items: center;background-color:  hwb(195 54% 4%);padding: 10px 20px;box-shadow: 0 2px 5px rgba(142, 204, 9, 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: white;}/* 表單控件樣式 */.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: hwb(195 54% 4%);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: #64bcd7;color: white;text-align: center;padding: 10px 0;margin-top: 150px}.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>hmhvictory員工管理系統</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>