javaWeb-html、css-常见标签样式
顶部导航栏
<!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>/* 重置默认 margin 和 padding */* {margin: 0;padding: 0;box-sizing: border-box;}/* 顶部导航栏样式 */.navbar {background-color: gray; /* 灰色背景 */padding: 0 20px; /* 左右内边距，让内容不贴边 */height: 60px; /* 固定高度，可根据需要调整 */display: flex; /* 使用 flex 弹性布局 */justify-content: space-between; /* 左右对齐*/align-items: center;color: white; /* 文字颜色设为白色以提高可读性 */}.navbar-title {font-size: 24px; /* 字体加大 */font-weight: bold; /* 加粗 *//* 设置字体为楷体 */font-family: "楷体", "KaiTi", sans-serif;}.navbar-link {color: white;text-decoration: none; /* 去掉下划线 */font-size: 16px;}.navbar-link:hover {text-decoration: underline; /* 鼠标悬停时加下划线，提升交互感 */}</style>
</head>
<body><nav class="navbar"><div class="navbar-title">Tlias智能学习辅助系统</div><a href="#" class="navbar-link">退出登录</a></nav>
</body>
</html>
flex布局
flex是flexible Box的缩写，指弹性布局，是一种一维的布局模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局</title><style>/* body{margin: 0;} */#container{background-color: #f1eeee;width: 500px;height: 300px;display: flex;/* 弹性布局*/flex-direction: row; /* 默认是row水平布局，设置主轴；也可以设置为column垂直布局*//* flex-start:从头开始排列flex-end:从尾部开始排列center:在主轴上居中排列space-around:在主轴上均等分剩余空间space-between:先两边贴边展示，再平分剩余空间*/justify-content: space-between;}.item{background-color: rgb(185, 235, 185);border: 1px solid black;width: 100px;height: 50px;}</style>
</head>
<body><div id="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>
搜索表单制作
表单标签
表单：在网页中主要负责数据采集，如注册登录等
- 标签：< form>
属性：
- action：规定提交表单时向何处发送表单数据，URL地址
- method：规定发送表单数据的方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单标签</title>
</head>
<body><!-- form表单：action:指定表单数据提交的地址method:指定表单数据提交的方式get:默认，将表单数据拼接在url后面提交，形式：/save?name=xxx&age=xxx特点：1、若表单中包含隐私数据，get方式不安全，不推荐使用2、浏览器中get请求的大小有限，不适合提交大数据的表单post:将表单数据放在请求体（消息体）中提交到服务器特点：1、安全2、请求大小没有限制注意事项：表单项要想能够采集数据，必须设置name属性，表示为当前表单名字--><form action="/save" method="get">姓名：<input type="text" name="name">年龄：<input type="text" name="age"><input type="submit" value="提交"></input></form>
</body>
</html>
表单项
表单项：
- < input>：定义表单项，通过type属性控制输入形式
- < select>：定义下拉列表，< option>定义列表项
- < textarea>：定义文本域
属性：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单标签</title>
</head>
<body><!-- form表单：action:指定表单数据提交的地址method:指定表单数据提交的方式get:将表单数据拼接在url后面提交post:将表单数据放在请求体中提交注意事项：表单项要想能够采集数据，必须设置name属性，表示为当前表单名字--><br action="/save" method="post">姓名：<input type="text" name="name"><br></br>密码：<input type="password" name="password"><br></br>年龄：<input type="text" name="age"><br></br>性别：<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="2">女</input><br></br>爱好：<label><input type="checkbox" name="hobby" value="java">java</label><label><input type="checkbox" name="hobby" value="c++">c++</label><label><input type="checkbox" name="hobby" value="python">python</label><label><input type="checkbox" name="hobby" value="c">c</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="education"><option value="">------请选择------</option><option value="1">高中</option><option value="2">大学</option><option value="3">研究生</option></select><br></br>描述：<textarea name="desc" cols="30" rows="10"></textarea><br></br><input type="hidden" name="id" value="1"><!-- 常见按钮 --><input type="submit" value="提交"></input><input type="reset" value="重置"></input><input type="button" value="按钮"></input><br></form>
</body>
</html>
搜索表单区域
<!-- 搜索表单区域 -->
<div class="search-form"><form id="searchForm" action="/search" method="post"><!-- 姓名输入框 --><label>姓名：<input type="text" name="name" placeholder="请输入姓名" /></label><!-- 性别下拉 --><label>性别：<select name="gender"><option value="">--请选择--</option><option value="男">男</option><option value="女">女</option></select></label><!-- 职位下拉 --><label>职位：<select name="position"><option value="">--请选择--</option><option value="班主任">班主任</option><option value="讲师">讲师</option><option value="学工主管">学工主管</option><option value="教研主管">教研主管</option><option value="咨询师">咨询师</option></select></label><!-- 操作按钮 --><button type="submit">查询</button><button type="reset">清空</button></form>
</div><style>/* 表单区域样式 */.search-form {padding: 20px;background-color: #f9f9f9;border-bottom: 1px solid #eee;}.search-form form {display: flex;align-items: center;gap: 16px; /* 元素之间的间距 */flex-wrap: wrap; /* 小屏设备可换行，避免溢出 */}.search-form label {display: flex;align-items: center;font-size: 14px;white-space: nowrap;}.search-form label span {margin-right: 6px;}.search-form input,.search-form select{padding: 6px 10px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;width: 150px;}.search-form button {padding: 6px 10px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;}.search-form button {background-color: #007bff;color: white;cursor: pointer;}.search-form button[type="reset"] {background-color: #6c757d;}.search-form button:hover {opacity: 0.9;}
</style>
表格数据展示区域
<!-- 表格展示区 -->
<div class="table-container"><table class="data-table"><!-- 表头 --><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>吟诗</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体 --><tbody><!-- 测试数据 1 --><tr><td>古月方源</td><td>男</td><td><img src="https://img1.baidu.com/it/u=3320591219,641134059&fm=253&app=138&f=JPEG?w=865&h=800" alt="古月方源" /></td><td>早岁已知世事艰，仍许飞鸿荡云间。<br>一路寒风身如絮，命海浮沉客独行。<br>千磨万击心铸铁，殚精竭虑铸一剑。<br>今朝剑指叠云处，炼蛊炼人还炼天。<br></td><td>教研主管</td><td>2023-05-12</td><td>2025-10-15 14:30</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr><!-- 测试数据 2 --><tr><td>白凝冰</td><td>女</td><td><img src="https://img0.baidu.com/it/u=363143214,1117765197&fm=253&fmt=auto&app=120&f=JPEG?w=537&h=402" alt="白凝冰" /></td><td>万丈红尘缤纷彩，天涯云水路遥长。<br>此刻风流归天地，不胜水中明月光。<br></td><td>讲师</td><td>2022-11-03</td><td>2025-10-14 09:15</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr><!-- 测试数据 3 --><tr><td>秦百胜</td><td>男</td><td><img src="https://img0.baidu.com/it/u=3584086968,426499028&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1486" alt="秦百胜" /></td><td>历经五十四次劫，劫云仍旧漫遮天。<br>胸中魂光压众生，拳里剑气纵北原。<br>时来时去四百载，无死何能生新颜。<br>弃此残躯换清风，席卷苍穹复光年。<br></td><td>学工主管</td><td>2021-08-20</td><td>2025-10-16 11:45</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr><!-- 测试数据 4 --><tr><td>凤九歌</td><td>男</td><td><img src="https://img1.baidu.com/it/u=2541298785,2527335638&fm=253&fmt=auto&app=138&f=JPEG?w=821&h=800" alt="凤九歌" /></td><td>魔不魔，正不正，天地自有凤九歌。<br>走不走，留不留，死生皆在我心头。<br></td><td>学工主管</td><td>2021-08-20</td><td>2025-10-16 11:45</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr></tbody></table>
</div><style>.table-container {padding: 20px;overflow-x: auto; /* 小屏横向滚动 */}.data-table {width: 100%;border-collapse: collapse;font-size: 14px;text-align: center;}.data-table th,.data-table td {padding: 12px 8px;border: 1px solid #ddd;}.data-table th {background-color: #f5f5f5;font-weight: bold;}.data-table img {width: 40px;height: 40px;border-radius: 4px;object-fit: cover;}.data-table button {margin: 0 4px;padding: 6px 10px;font-size: 12px;border: none;border-radius: 4px;cursor: pointer;}.btn-edit {background-color: #28a745;color: white;}.btn-delete {background-color: #dc3545;color: white;}.btn-edit:hover,.btn-delete:hover {opacity: 0.9;}
</style>
底部版权区域
<!-- 页脚版权区域 -->
<footer class="footer"><div class="footer-content"><div class="company-name">天地一家大爱盟</div><div class="copyright">© 2025 版权所有</div></div>
</footer><style>.footer {background-color: gray; /* 灰色背景 */color: white; /* 白色文字 */text-align: center;padding: 20px 0;margin-top: auto; /* 若页面使用 flex 布局，可将 footer 推到底部 */}.footer-content > div {margin: 4px 0; /* 两行之间留一点间距 */font-size: 14px;}.company-name {font-size: 16px;}.copyright {font-size: 13px;}
</style>
总代码
<!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>/* 重置默认 margin 和 padding */* {margin: 0;padding: 0;box-sizing: border-box;}/* 顶部导航栏样式 */.navbar {background-color: gray; /* 灰色背景 */padding: 0 20px; /* 左右内边距，让内容不贴边 */height: 60px; /* 固定高度，可根据需要调整 */display: flex; /* 使用 flex 弹性布局 */justify-content: space-between; /* 左右对齐*/align-items: center;color: white; /* 文字颜色设为白色以提高可读性 */}.navbar-title {font-size: 24px; /* 字体加大 */font-weight: bold; /* 加粗 *//* 设置字体为楷体 */font-family: "楷体", "KaiTi", sans-serif;}.navbar-link {color: white;text-decoration: none; /* 去掉下划线 */font-size: 16px;}.navbar-link:hover {text-decoration: underline; /* 鼠标悬停时加下划线，提升交互感 */}/* 表单区域样式 */.search-form {padding: 20px;background-color: #f9f9f9;border-bottom: 1px solid #eee;}.search-form form {display: flex;align-items: center;gap: 16px; /* 元素之间的间距 */flex-wrap: wrap; /* 小屏设备可换行，避免溢出 */}.search-form label {display: flex;align-items: center;font-size: 14px;white-space: nowrap;}.search-form label span {margin-right: 6px;}.search-form input,.search-form select{padding: 6px 10px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;width: 150px;}.search-form button {padding: 6px 10px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;}.search-form button {background-color: #007bff;color: white;cursor: pointer;}.search-form button[type="reset"] {background-color: #6c757d;}.search-form button:hover {opacity: 0.9;}/* 表格展示区样式 */.table-container {padding: 20px;overflow-x: auto; /* 小屏横向滚动 */}.data-table {width: 100%;border-collapse: collapse;font-size: 14px;text-align: center; /* 居中 */}.data-table th,.data-table td {padding: 12px 8px;border: 1px solid #ddd;}.data-table th {background-color: #f5f5f5;font-weight: bold;}.data-table img {width: 40px;height: 40px;border-radius: 4px;object-fit: cover;}.data-table button {margin: 0 4px;padding: 6px 10px;font-size: 12px;border: none;border-radius: 4px;cursor: pointer;}.btn-edit {background-color: #28a745;color: white;}.btn-delete {background-color: #dc3545;color: white;}.btn-edit:hover,.btn-delete:hover {opacity: 0.9;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中 */padding: 20px 0; /* 上下内边距 */margin-top: auto; /* 若页面使用 flex 布局，可将 footer 推到底部 */margin-top: 30px;}.footer-content > div {margin: 4px 0; /* 两行之间留一点间距 */font-size: 14px;}.company-name {font-size: 16px;}.copyright {font-size: 13px;}#container { width: 80%;margin: 0 auto;}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><nav class="navbar"><div class="navbar-title">Tlias智能学习辅助系统</div><a href="#" class="navbar-link">退出登录</a></nav><!-- 搜索表单区域 --><div class="search-form"><form id="searchForm" action="/search" method="post"><!-- 姓名输入框 --><label>姓名：<input type="text" name="name" placeholder="请输入姓名" /></label><!-- 性别下拉 --><label>性别：<select name="gender"><option value="">--请选择--</option><option value="1">男</option><option value="2">女</option></select></label><!-- 职位下拉 --><label>职位：<select name="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></label><!-- 操作按钮 --><button type="submit">查询</button><button type="reset">清空</button></form></div><!-- 表格展示区 --><div class="table-container"><table class="data-table"><!-- 表头 --><thead><tr><th>姓名</th><th>性别</th><th>头像</th><th>吟诗</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体 --><tbody><!-- 测试数据 1 --><tr><td>古月方源</td><td>男</td><td><img src="https://img1.baidu.com/it/u=3320591219,641134059&fm=253&app=138&f=JPEG?w=865&h=800" alt="古月方源" /></td><td>早岁已知世事艰，仍许飞鸿荡云间。<br>一路寒风身如絮，命海浮沉客独行。<br>千磨万击心铸铁，殚精竭虑铸一剑。<br>今朝剑指叠云处，炼蛊炼人还炼天。<br></td><td>教研主管</td><td>2023-05-12</td><td>2025-10-15 14:30</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr><!-- 测试数据 2 --><tr><td>白凝冰</td><td>女</td><td><img src="https://img0.baidu.com/it/u=363143214,1117765197&fm=253&fmt=auto&app=120&f=JPEG?w=537&h=402" alt="白凝冰" /></td><td>万丈红尘缤纷彩，天涯云水路遥长。<br>此刻风流归天地，不胜水中明月光。<br></td><td>讲师</td><td>2022-11-03</td><td>2025-10-14 09:15</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr><!-- 测试数据 3 --><tr><td>秦百胜</td><td>男</td><td><img src="https://img0.baidu.com/it/u=3584086968,426499028&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1486" alt="秦百胜" /></td><td>历经五十四次劫，劫云仍旧漫遮天。<br>胸中魂光压众生，拳里剑气纵北原。<br>时来时去四百载，无死何能生新颜。<br>弃此残躯换清风，席卷苍穹复光年。<br></td><td>学工主管</td><td>2021-08-20</td><td>2025-10-16 11:45</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr><!-- 测试数据 4 --><tr><td>凤九歌</td><td>男</td><td><img src="https://img1.baidu.com/it/u=2541298785,2527335638&fm=253&fmt=auto&app=138&f=JPEG?w=821&h=800" alt="凤九歌" /></td><td>魔不魔，正不正，天地自有凤九歌。<br>走不走，留不留，死生皆在我心头。<br></td><td>学工主管</td><td>2021-08-20</td><td>2025-10-16 11:45</td><td><button class="btn-edit">编辑</button><button class="btn-delete">删除</button></td></tr></tbody></table></div><!-- 页脚版权区域 --><footer class="footer"><div class="footer-content"><div class="company-name">天地一家大爱盟</div><div class="copyright">© 2025 版权所有</div></div></footer>
</div></body>
</html>