网页前端开发（基础进阶1）
颜色表示方法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>运行结果：
