JavaWeb前端（HTML，CSS具体案例）
前言
一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了，但是我学习一直是针对后端开发的，前端也没太注重去学（他大部分都给课程资料嘻嘻🤪），但我还是比较感兴趣，准备先把之前学JavaWeb（黑马程序员新推出的哦，视频讲的非常好😗可以去看看）时跳过的前端内容学一下，然后再用苍穹外卖前端内容补上，先从最基础的开始复习一下（HTML，CSS）嗯，其实之前写过一个总结，这次更详细一点，举几个具体的例子
概述：
1.web前端主要由三部分组成：
- HTML：负责网页的结构（页面元素和内容）。
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
- JavaScript：负责网页的行为（交互效果）。
2.其中还有前端开发中的高级技术Vue、ElementPlus、Axios需要掌握。
1.HTML入门程序（🙌用一个程序看看HTML是干嘛的）
先来看看实现（一个标题，一个图片（图片是我随便找的））：
来看看代码：
1.新建文件夹htmlhhhh
2.打开VS-Code打开文件夹，在文件夹里新建文本文件，后缀名改为 .html，命名为：01. html快速入门.html，新建img文件夹，导入 1.png 文件：
在01. html快速入门.html写入：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 快速入门</title>
</head>
<body><h1>Hello HTML</h1><img src="img/1.png">
</body>
</html>
🧩扩展：
-
输入一个! （要用英文哦），可以快速生成框架：
3. 标题标签 h 系列：
效果：h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。
总结一下吧✌️，HTML语法:
HTML: HyperText Markup Language，超文本标记语言。
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签 “<标签名>” 构成的语言
HTML代码直接在浏览器中运行，HTML标签由浏览器解析 。
2.CSS入门程序（🙌来看看CSS具体是干嘛的）
先来看看实现吧（新闻发布时间 2024年05月15日 20:07 的字体颜色是灰色的，这个就是用CSS实现的）
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【哈哈哈哈哈哈哈】哈哈哈哈哈哈哈哈哈哈哈哈</title><style>.publish-date {color: gray;}</style>
</head>
<body><!-- 定义网页标题, 标题内容： 哈哈哈哈哈哈哈 --><h1 id="title">【哈哈哈哈哈哈哈】哈哈哈哈哈哈哈哈哈哈哈哈</h1><!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 --><a href="https://news.cctv.com/" target="_blank">央视网</a><span class="publish-date">2024年05月15日 20:07</span></body>
</html>
其实Css就是选择前端一个板块，然后指定样式。选择方式：其实有三种 ，上面是用的最多的一种用CSS选择器，来看看常用的选择器吧：
前面说了用HTML标签来写和装饰文本，那他是横着排还是竖着排？我们来看看页面的布局
- 盒子模型：
来看看实现（就是把整个文本居中放置，看着更方便了）
来看看代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</title><style>/* 设置段落首行缩进 */p {text-indent: 2em; /* 首行缩进2em */line-height: 2; /* 行高2倍 */}/* 新增样式 */.news-content {width: 70%; /* 宽度占70% */margin: 0 auto; /* 横向居中 */}</style>
</head>
<body><!-- 包裹新闻内容的容器 --><div class="news-content"><h1 id="title">【哈哈哈哈哈哈哈】哈哈哈哈哈哈哈哈哈哈哈哈</h1><p><strong>hhhhh消息</strong>（hhhh联播）： 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p><p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></div>
</body>
</html>
总结一下吧：
-
盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
-
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。
<!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>
- flex布局
布局有了盒子模型为什么要有flex呢？✅ 说说他的好处：
- 它是现代网页布局的基石，90% 的页面都需要它。
- 它解决了传统布局的痛点：居中难、对齐难、自适应难（只靠 margin/padding 太难了！）。
- 它简单直观：只要记住“父容器控制布局”，就能快速上手。
- 它兼容性好：所有现代浏览器都支持。
还是来看看一个例子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#container {display: flex;flex-direction: row;justify-content: space-between;background-color: #aeea6a;width: 400px;height: 300px;}#container div {background-color: #e866ef;width: 100px;height: 50px; }</style>
</head>
<body><div id="container"><div>Flex Item</div><div>Flex Item</div><div>Flex Item</div></div>
</body>
</html>
来总结一下吧：
flex布局相关的CSS样式：
主轴（main axis） → → → → → → →
↓
交叉轴（cross axis）
- 主轴方向：由 flex-direction 决定（默认是 row 横向）。
- 交叉轴：与主轴垂直的方向。
如果主轴设置为row，其实就是横向布局。 主轴设置为column，其实就是纵向布局。
🌏其实HTML还有好多标签，Css也是，我们还可以用它做表格，规定整个页面的布局等等，在这里就不一 一列举了，直接来个实现🤔（作为前面学习内容的应用）：
1.首先：来看看实现功能（是一个表格哦，有点像之前苍穹外买的菜品，菜品分类的查询功能）：
2.来看看代码吧：
<!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>body {margin: 0;}/* 顶栏样式 */.header {display: flex;justify-content: space-between;align-items: center;background-color: #c2c0c0;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;}/* 搜索表单区域 */.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;}.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: #c2c0c0;color: white;text-align: center;padding: 10px 0;margin-top: 30px;}.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>Tlias智能学习辅助系统</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>
是不是好长好长😨😱，没事之后学的Javascript和Vue，会简化代码的
虽然很长而且以后可能会白雪，但我们还是要看看，解析解析：
- 首先来看看HTML标签（功能里用到的）：
1. 文档结构标签<!DOCTYPE html>：定义文档类型为 HTML5。
<html lang="zh-CN">：根元素，声明文档为中文（简体）语言。
<head>：包含文档的元数据（如字符集、标题、样式等）。
<meta>：用于定义字符编码、视口设置等元信息。
charset="UTF-8"：指定字符编码为 UTF-8。
name="viewport"：用于响应式设计，控制页面在移动设备上的缩放。
<title>：定义网页标题，显示在浏览器标签页上。
<style>：嵌入 CSS 样式代码。
<body>：包含网页的主体内容。2. 布局与容器标签<div>：通用块级容器，用于布局和分组内容。
如：.header、#container、.search-form 等。
<footer>：语义化标签，表示页脚区域。3. 表单与交互标签
<form>：定义表单，用于用户输入和提交数据。
<input type="text">：文本输入框，用于输入姓名。
<select>：下拉选择框，用于选择性别和职位。
<option>：定义下拉列表中的选项。
<button type="submit">：提交按钮，用于提交表单。
<button type="reset">：重置按钮，清空表单内容。4. 表格标签
<table>：定义表格。
<thead>：表格的头部区域。
<tbody>：表格的主体区域。
<tr>：表格中的行（table row）。
<th>：表头单元格（table header），用于列标题。
<td>：标准单元格（table data），用于表格数据。5. 文本与链接标签
<h1>：一级标题，用于页面主标题。
<a href="#">：超链接，此处用于“退出登录”功能。
<p>：段落标签，用于页脚中的版权信息。6. 多媒体标签
<img>：插入图片，用于显示用户头像。
使用 src 指定图片路径，alt 提供替代文本，class 应用样式。- 来看看Css选择器，和修饰表示方式（太多了我让AI干的，有点啰嗦🤪）：
👍一、整体结构与布局：
1.body
body {margin: 0;
}
作用：清除浏览器默认的外边距（margin），使页面内容紧贴浏览器边缘。
目的：实现更精确的布局控制。
2.#container
#container {width: 80%;margin: 0 auto;
}
作用：
设置容器宽度为父元素（body）的 80%。
margin: 0 auto 实现水平居中。
目的：让整个页面内容在视口中居中显示，留出左右边距，提升视觉舒适度。
✅ 二、头部区域 .header
.header {display: flex;justify-content: space-between;align-items: center;background-color: #c2c0c0;padding: 10px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
- display: flex：启用弹性布局。
- justify-content: space-between：两端对齐，标题在左，“退出登录”在右。
- align-items: center：垂直居中对齐子元素。
- 背景与阴影：灰色背景 + 轻微下阴影，增强层次感。
- 内边距：上下 10px，左右 20px，提供呼吸空间。
.header h1 {margin: 0;font-size: 24px;font-weight: bold;
}.header a {text-decoration: none;color: #333;font-size: 16px;
}
- 清除标题默认 margin。
- 链接去除下划线，深灰色文字，可读性强。
✅ 三、搜索表单 .search-form
.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;
}
- 统一输入框和下拉框样式。
- 圆角边框（border-radius）更现代。
- 固定宽度便于对齐。
按钮样式
.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;
}
- 主按钮为蓝色（Bootstrap 风格），清空按钮为灰色。
- 去除边框，使用背景色突出。
- 光标变为指针，提示可点击。
✅ 四、表格样式 .table
.table {min-width: 100%; /* 表格最小宽度撑满容器 */border-collapse: collapse; /* 合并边框，消除双线 */
}
单元格通用样式
.table td, .table th {border: 1px solid #ddd; /* 浅灰色边框 */padding: 8px;text-align: center; /* 内容居中 */
}
- 所有单元格居中对齐，视觉整齐。
- border-collapse: collapse 让表格线条更紧凑美观
✅ 五、头像样式 .avatar
.avatar {width: 30px;height: 30px;object-fit: cover; /* 图像裁剪以填充容器 */border-radius: 50%; /* 圆形头像 */
}
- 实现圆形头像效果。
- object-fit: cover 确保图片不变形，居中裁剪。
✅ 六、页脚 .footer
.footer {background-color: #c2c0c0;color: white;text-align: center;padding: 10px 0;margin-top: 30px;
}
- 与头部同色背景，形成首尾呼应。
- 白色文字提高对比度。
- 居中对齐文本。
- margin-top: 30px 提供与上方内容的间距。
文字样式细分
.footer .company-name {font-size: 1.1em;font-weight: bold;
}.footer .copyright {font-size: 0.9em;
}
小白啊！！！写的不好轻喷啊🤯如果觉得写的不好，点个赞吧🤪（批评是我写作的动力）
…。。。。。。。。。。。…
…。。。。。。。。。。。…