xdr_gitea/JavaWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

学习第一天完

Browse Source
This commit is contained in:
syx_computer
2025-10-11 21:43:25 +08:00
commit 12bbede917
24 changed files with 1201 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
Readme.md Normal file
View File

@@ -0,0 +1,150 @@
# 学习计划
| **阶段** | **时长** | **内容** | 课时 |
| :---------: | :------: | :---------------------------------------------------- | ------- |
| Web前端基础 | 2天 | HTML、CSS、JS、Vue3、Ajax | 1-30 |
| Web后端基础 | 4天 | Maven、HTTP协议、Spring IOC、DI、MySQL、JDBC、Mybatis | 31-132 |
| Web后端实战 | 6天 | Tlias案例（基于案例讲解web开发的核心知识） | 160-181 |
| Web后端进阶 | 2天 | SpringAOP、SpringBoot原理、自定义Starter、Maven高级 | 133-152 |
| 前端web实战 | 4天 | Vue工程化、ElementPlus、Tlias案例 | 153-159 |
| 项目部署 | 2天 | Linux、Docker | 182-200 |
# git的使用方法
""和''中间的内容是需要修改的 （）部分是需要修改成对应信息的
首次使用git需要对git初始化
```
git config --global user.name "用户名”
git config --global user.emai "邮箱”
```
首先在需要建仓的地方
```
git init
```
克隆仓库
```
git clone ssh://git@8.152.216.76:2222/xdr_gitea/JavaWeb.git
```
添加到暂存区
```
git add "文件名（所有.）"
```
添加到本地仓库（待提交到云端）
```
git commit -m "需要添加的信息"
```
查看节点
```
git log
```
查看每个版本的区别
```
git log --stat
或
git diff (commit id)
```
回退版本
```
git reset --hard (commit id)
```
查看分支
```
git branch
```
*master：自动创建，一般用于保存稳定的代码
创建分支
```
git checkout -b （develop）
```
*develop：一般用来保存开法过程中的代码
切换分支
```
git checkout （分支）
```
合并分支内容
```
git merge （分支）
```
关联远程仓库
1. 检查现有远程配置
```
git remote -v
```
- 若未显示 origin 或 URL 不正确，需关联或更新远程仓库：
```
git remote add （origin变量名代指地址） (地址)/（用户名）/（仓库名）.git
git remote add origin ssh://git@8.152.216.76:2222/xdr_gitea/JavaWeb.git
```
推送至远程仓库
```
git push -u origin （master分支名）
```
### 🛠️ 完整解决步骤（Windows PowerShell）
#### 1. 彻底清除旧密钥记录
powershell
复制
```
# 删除该主机所有旧的密钥记录
ssh-keygen -R "8.152.216.76:2222"
ssh-keygen -R "[8.152.216.76]:2222"
```
#### 2. 手动编辑 known_hosts 文件（双重保险）
1. 打开文件资源管理器，进入：`C:\Users\syx\.ssh`
2. 右键用记事本打开 `known_hosts`文件
3. **删除所有包含 `8.152.216.76`或 `[8.152.216.76]:2222`的行**
4. 保存文件
#### 3. 重新获取并信任新密钥
```
# 获取新密钥并添加到 known_hosts
ssh-keyscan -p 2222 8.152.216.76 | Out-File -FilePath "$env:USERPROFILE\.ssh\known_hosts" -Append -Encoding ASCII
# 强制验证连接（会提示确认指纹）
ssh -p 2222 git@8.152.216.76
```
当出现 `Are you sure you want to continue connecting (yes/no)?`时：
- 先核对指纹是否与之前显示的 `SHA256:FBNJ48Ps1b1k2szbW+1S+n0yl2RIQekHV1OzOD/KkkE`一致
- 确认一致后输入 `yes`

19
前端Web(HTML+CSS)/01.快速入门.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 设置页面显示宽度，页面宽度等于设备宽度 以及 页面缩放比例 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML快速入门</title>
</head>
<body>
<h1>HTML的快速入门</h1>
<img src="img/1.png">
<!-- 定义一个一级标题，标题内容：Hello HTML -->
<h1>Hello HTML</h1>
</body>
</html>

23
前端Web(HTML+CSS)/03.央视新闻-标题-排班.html Normal file
View File

@@ -0,0 +1,23 @@
<!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>
<!-- 定义一个标题， 标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示，央视网 -->
<!-- a 超链接标签：
href 属性：超链接地址
target 属性：超链接打开方式
_self：当前窗口打开
_blank：新窗口打开
默认为_self
-->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
2024年05月15日 20:07
</body>
</html>

41
前端Web(HTML+CSS)/04.央视新闻-标题-样式.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<!-- 方式二：内部样式 -->
<!-- <style>
span{
color: gray;
}
</style> -->
<!-- 方式三：外部样式 -->
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<!-- 定义一个标题， 标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示，央视网 -->
<!-- a 超链接标签：
href 属性：超链接地址
target 属性：超链接打开方式
_self：当前窗口打开
_blank：新窗口打开
默认为_self
-->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<!-- 方式一：行内样式 -->
<!-- <span style="color: gray;">2024年05月15日 20:07</span> -->
<span>2024年05月15日 20:07</span>
<!-- <span>000000</span> -->
</body>
</html>

40
前端Web(HTML+CSS)/05.央视新闻-标题-样式(选择器).html Normal file
View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<!-- 方式二：内部样式 -->
<style>
/* id选择器 */
#time{
color: red;
}
</style>
</head>
<body>
<!-- 定义一个标题， 标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，里面展示，央视网 -->
<!-- a 超链接标签：
href 属性：超链接地址
target 属性：超链接打开方式
_self：当前窗口打开
_blank：新窗口打开
默认为_self
-->
<a href="https://www.cctv.com/" target="_blank">央视网</a>
<!-- 方式一：行内样式 -->
<!-- <span style="color: gray;">2024年05月15日 20:07</span> -->
<span class="cls" id="time">2024年05月15日 20:07</span>
</body>
</html>

107
前端Web(HTML+CSS)/06.央视新闻-正文-排版.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<!-- 2. 内部样式 -->
<style>
/* 设置超链接取消下划线效果 */
a {
text-decoration: none;
}
</style>
<!-- 3. 外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
<!-- 外部样式 -->
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<!-- 定义网页标题, 标题内容： 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
<a href="https://news.cctv.com/" target="_blank">央视网</a>
<!-- 1. 行内样式 -->
<!-- <span style="color: #b2b2b2;">2024年05月15日 20:07</span> -->
<span class="publish-date">2024年05月15日 20:07</span>
<!-- 导入视频 video/news.mp4 -->
<video src="video/news.mp4" controls width="100%"></video>
<!-- 正文：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。习近平总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。 -->
<p>
央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>
行走在长江沿线，科研人员发现很多可喜现象。
</p>
<!-- 导入一张图片 img/1.gif -->
<img src="img/1.gif" alt="1.gif" width="100%">
<!-- 正文：在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。 -->
<p>
在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
</p>
<!-- 正文：在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。 -->
<p>
在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
</p>
<!-- 正文：在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。 -->
<p>
在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
</p>
<!-- 导入照片 img/2.jpg -->
<img src="img/2.jpg" alt="2.jpg" width="100%">
<!-- 正文：水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。 -->
<p>
水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
</p>
<!-- 正文：实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。 -->
<p>
实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
</p>
<!-- 导入一张照片 img/3,jpg -->
<img src="img/3.jpg" alt="3.jpg" width="100%">
<!-- 正文：按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。 -->
<p>
按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
</p>
<!-- 正文：实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。 -->
<p>
实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
</p>
<!-- 导入照片 img/4.jpg -->
<img src="img/4.jpg" alt="4.jpg" width="100%">
<p>
安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
</p>
<p>
在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
</p>
<p>
在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
</p>
<img src="img/5.jpg" alt="5.jpg" width="100%">
<p>
长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
</p>
</body>
</html>

92
前端Web(HTML+CSS)/07.央视新闻-正文-样式.html Normal file
View File

@@ -0,0 +1,92 @@
<!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: #b2b2b2;
}
/* 设置超链接取消下划线效果 */
a {
text-decoration: none;
}
/* 设置段落首行缩进 */
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>
<!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
<a href="https://news.cctv.com/" target="_blank" >央视网</a>
<span class="publish-date">2024年05月15日 20:07</span>
<br>
<br>
<!-- 定义一个视频, video/news.mp4 -->
<video src="video/news.mp4" controls width="100%"></video>
<p>
<strong>央视网消息</strong>（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。总书记指出，长江禁渔是为全局计、为子孙谋的重要决策。牢记总书记嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>
行走在长江沿线，科研人员发现很多可喜现象。
</p>
<!-- 定义一张图片, img/1.gif -->
<img src="img/1.gif" alt="" width="100%">
<p>
在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
</p>
<p>
在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
</p>
<p>
在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
</p>
<img src="img/2.jpg" width="100%">
<p>
水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。
</p>
<p>
实施长江十年禁渔，是以同志为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，总书记多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
</p>
<img src="img/3.jpg" width="100%">
<p>
按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
</p>
<p>
实施长江十年禁渔，解决好渔民上岸后的生产生活问题，禁渔才有稳定扎实的社会基础。
</p>
<img src="img/4.jpg" width="100%">
<p>
安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
</p>
<p>
在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
</p>
<p>
在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
</p>
<img src="img/5.jpg" width="100%">
<p>
长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。下一步，沿江省市还将加强水生生物重要栖息地修复，建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
</p>
</div>
</body>
</html>

37
前端Web(HTML+CSS)/09. 盒子模型.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
#div1 {
width: 400px; /* 宽度: 400像素; 默认是内容展示区域的宽度 */
height: 300px; /* 高度: 300像素; 默认是内容展示区域的高度 */
background-color: #ffff00;
padding: 30px; /* 内边距: 30像素 */
box-sizing: border-box;
border: 20px solid #ff00ff; /* 边框: 20像素 */
margin: 30px auto; /* 外边距: 20像素 */
}
</style>
</head>
<body>
<div id="div1">
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 A A A A A A A A A A
</div>
<!-- <div id="div2">
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 A A A A A A A A A A
</div>
<span>
B B B B B B B B B B B B B B B B
</span>
<span>
B B B B B B B B B B B B B
</span> -->
</body>
</html>

39
前端Web(HTML+CSS)/10.tlias案例-顶部导航栏.html Normal file
View File

@@ -0,0 +1,39 @@
<!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>
/* 顶部导航栏样式 */
.navbar {
background-color: #767474; /* 灰色背景 */
padding: 15px 20px;
display: flex; /* 水平排列 */
justify-content: space-between; /* 两侧对齐 */
align-items: center;
}
.navbar h1 {
margin: 0;
font-weight: bold; /* 加粗显示标题 */
}
.navbar a {
color: #333;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
<h1>Tlias智能学习辅助系统</h1> <!-- 标题居左 -->
<a href="#">退出登录</a> <!-- 退出登录链接居右 -->
</div>
</body>
</html>

41
前端Web(HTML+CSS)/11. flex布局.html Normal file
View File

@@ -0,0 +1,41 @@
<!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弹性布局 */
flex-direction: row; /* 默认为row水平布局, 设置主轴 */
/* flex-start: 从头开始排列 */
/* flex-end: 从尾部开始排列 */
/* center: 在主轴上居中对齐 */
/* space-around: 平分剩余空间 */
/* space-between: 先两边贴边, 再平分剩余空间 */
justify-content: space-between;
}
.item {
background-color: rgb(184, 246, 184);
border: 1px solid rgb(141, 138, 138);
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>

32
前端Web(HTML+CSS)/12.表单标签.html Normal file
View File

@@ -0,0 +1,32 @@
<!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表单
get: 提交数据时, 数据会以参数的形式发送给服务器
post: 提交数据时, 数据会以请求体的形式发送给服务器
action: 表单提交时, 数据发送到的服务器地址
method: 默认是get
method: get/post
enctype: 表单提交时, 数据的编码方式
enctype: application/x-www-form-urlencoded
enctype: multipart/form-data
enctype: text/plain
注意:
1. get方法提交的数据, 会显示在地址栏中, 不安全
2. post方法提交的数据, 不会显示在地址栏中, 安全
-->
<form action="/save" method="post">
姓名: <input type="text" name="name"></input>
年龄: <input type="text" name="age"></input>
<input type="submit" value="提交">
</form>
</body>
</html>

53
前端Web(HTML+CSS)/13. 表单项标签.html Normal file
View File

@@ -0,0 +1,53 @@
<!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>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="/save" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
<!-- label: 表单标签, 描述表单项的含义 -->
性别: <input type="radio" name="gender" value="1"> 男
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </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="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>

98
前端Web(HTML+CSS)/14.tlias案例-搜索表单区域.html Normal file
View File

@@ -0,0 +1,98 @@
<!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: #f1f1f1;
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;
}
</style>
</head>
<body>
<!-- 顶栏 -->
<div class="header">
<h1>Tlias智能学习辅助系统</h1>
<a href="#">退出登录</a>
</div>
<!-- 搜索表单区域 -->
<form class="search-form">
<input type="text" name="name" placeholder="姓名" />
<select name="gender">
<option value="">性别</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<select name="job">
<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" class="clear">清空</button>
</form>
</body>
</html>

187
前端Web(HTML+CSS)/15.tlias案例-表格数据展示区.html Normal file
View File

@@ -0,0 +1,187 @@
<!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: #f1f1f1;
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;
margin: 0 20px;
}
/* 设置表格单元格边框 */
.table td,
.table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.avatar {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 顶栏 -->
<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="1">男</option>
<option value="2">女</option>
</select>
<select name="job">
<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" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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>
</body>
</html>

218
前端Web(HTML+CSS)/16.tlias案例-底部版权区域.html Normal file
View File

@@ -0,0 +1,218 @@
<!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: #f1f1f1;
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;
margin: 0 20px;
}
/* 设置表格单元格边框 */
.table td,
.table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.avatar {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50%;
}
/* 页脚版权区域 */
.footer {
background-color: #8f8c8c;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 30px;
}
.footer .company-name {
font-size: 1.1em;
font-weight: bold;
}
.footer .copyright {
font-size: 0.9em;
}
#app {
width: 80%; /* 宽度 */
margin: 0 auto; /* 居中 */
}
</style>
</head>
<body>
<div id="app">
<!-- 顶栏 -->
<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="1">男</option>
<option value="2">女</option>
</select>
<select name="job">
<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" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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://via.placeholder.com/50" 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>

BIN
前端Web(HTML+CSS)/audio/news.mp3 Normal file
View File

Binary file not shown.

24
前端Web(HTML+CSS)/css/news.css Normal file
View File

@@ -0,0 +1,24 @@
span {
/* color: gray; */
/* rgb表示法 */
/* color: rgb(255, 0, 0); */
/* rgba表示法 */
/* color: rgba(255, 0, 0, 0.5); */
/* 16进制表示法 */
/* color: #0000ff; */
/* color: #00f; */
color: #b2b2b2;
/* 设置段落首行缩进 */
}
p {
text-indent: 2em;
/* 首行缩进2em */
line-height: 2;
/* 行高2倍 */
}

BIN
前端Web(HTML+CSS)/img/1.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

BIN
前端Web(HTML+CSS)/img/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
前端Web(HTML+CSS)/img/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
前端Web(HTML+CSS)/img/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 275 KiB

BIN
前端Web(HTML+CSS)/img/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

BIN
前端Web(HTML+CSS)/img/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 KiB

BIN
前端Web(HTML+CSS)/video/news.mp4 Normal file
View File

Binary file not shown.