顏色表示方法3種：
1.關鍵字：
color：green； gray red yellow
2.rgb表示法：紅，綠，藍三原色。rgb（r，g，b），r表示紅色，g表示綠色，b表示藍色。
color: rgb(87, 107, 149);
3.rgba表示法：是rgb表示法的進階，rgb（r，g，b，a），r表示紅色，g表示綠色，b表示藍色，a表示透明度。（0表示完全透明，1表示完全不透明）
color: rgba(87, 107, 149,0.5);
4.十六進制表示法：rgb（r，g，b）的r范圍在0--256之內。可以使用十六進制表示，范圍00--ff。
color: ”#ff0000“;
文字處理 ????????<p></p>表示一個段落
<body>
????????<p>
????????????????文本加粗
? ? ? ? ????????<b>***網消息</b>? ? ? ? ????????<strong>***網消息</strong>
????????????????文本加下劃線
????????????????<u>***網消息</u>
? ? ? ? ????????<ins>***網消息</ins>
????????????????文本傾斜
????????????????<i>***網消息</i>
? ? ? ? ????????<em>***網消息</em>
????????????????文本加刪除線
????????????????<s>***網消息</s>
? ? ? ? ????????<del>***網消息</del>
????????</p>
</body>
文本加粗可使用<b>或者<strong>標簽。
文本加下劃線可使用<u>或者<ins>標簽。
文本傾斜可使用<i>或者<em>標簽。
文本加刪除線可使用<s>或者<del>標簽。
空格可使用  ；
< 可使用 <；
> 可使用 gt；
設置行高
<style>
? ? ? ? p{
? ? ? ? ? ? ? ? line-height:2;
????????}</style>
對于段落，設置2倍行高。
首行縮進
<style>
? ? ? ? p{
? ? ? ? ? ? ? ? text-index：2em； //首行縮進2個字符
????????}</style>
對于段落，首行縮進。
或直接使用 表示空格
<p>
????????<b> ***網消息</b>????????//縮進兩個空格</p>
盒子模型
????????盒子：頁面內所有元素（標簽）都可以看作一個盒子，由盒子將頁面中的元素包含在一個矩形區域內，通過盒子的視角，可以更方便的進行頁面布局。
? ? ? ? 盒子模型的組成：內容區域（content），內邊距區域(padding)，邊框區域(border)，外邊距區域(margin)。
常用的2種標簽：
1.div標簽
一行只顯示一個div標簽（獨占一行）
寬度默認為父元素的寬度，高度默認撐開
可以設置寬高（width，height）
2.span標簽
一行可以顯示多個span標簽
寬度和高度默認由內容撐開
不可以設置寬高（width，height）
盒子模型通常使用div標簽包裹整個內容，統一調節其寬高以及各種邊距。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>員工管理</title><style>#all{width: 80%;margin: 0 auto;}.navbar{background-color: rgb(170, 170, 170);display: flex;/*彈性布局*/justify-content: space-between;/*左右對齊*/align-items: center;/*垂直居中*/padding: 5px;}.navbar h1{margin: 0;/*去掉h1標簽的默認間距*/font-weight: bold;/*加粗*/color: white;/*白色文字*/font-family: "楷體";}.navbar a{color: white;font-weight: bold;/*加粗*/text-decoration: none;/*取消下劃線*/align-items: center;/*垂直居中*/}.search-from{display: flex;flex-wrap: nowrap;/*換行*/align-items: center;/*垂直居中*/gap: 10px;/*間距*/margin-top: 10px;margin-bottom: 10px;}.search-from input,select{padding: 5px;width: 220px;}table{width: 100%;border-collapse: collapse;}th,td{border: 1px solid rgb(0, 0, 0);/*邊框*/padding: 5px;text-align: center;}.footer{background-color: #b5b3b3;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}</style>
</head>
<body>
<div id="all"><div class="navbar"><h1>tlias 智能學習輔助系統</h1><a href="">退出登錄</a></div><form class="search-from" action="/search" method="post"><label for="name">姓名：</label><input type="text" name="name" id="name" placeholder="請輸入姓名"><label for="gender">性別：</label><select name="gender" id="genser"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">職位：</label><select name="position" id="position"><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">清空</button></form><table><!-- 表頭 --><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="img/y2.png"></td><td>班主任</td><td>2020-01-01</td><td>2025-01-01</td><td><button type="button">修改</button><button type="button">刪除</button></td></tr><tr><td>李四</td><td>女</td><td><img src="img/y2.png"></td><td>講師</td><td>2020-01-01</td><td>2025-01-01</td><td><button type="button">修改</button><button type="button">刪除</button></td></tr><tr><td>王五</td><td>男</td><td><img src="img/y2.png"></td><td>班主任</td><td>2020-01-01</td><td>2025-01-01</td><td><button type="button">修改</button><button type="button">刪除</button></td></tr></tbody></table><footer class="footer"><p>cyy有限公司</p><p>版權，時間2025.5.9</p></footer>
</div>
</body>
</html>運行結果：
![[Linux]虛擬地址到物理地址的轉化](http://pic.xiahunao.cn/[Linux]虛擬地址到物理地址的轉化)
