颜色表示方法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>运行结果：
