Web前端入门及基础代码
以下代码均使用Microsoft VS Code下运行，代码来源为学习java过程中所写代码。交流学习使用。
1-HTML-CSS
01. HTML快速入门
<html><head><title>HTML快速入门</title></head><body><h1>Hello HTML</h1><img src="img/1.png"></body>
</html>02. HTML快速入门2
<!-- 告诉浏览器当前文档类型为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"><!-- 生成一个二级标签 --><h2>我是一个二级标签</h2><!-- 生成一个三级标签 --><h3>我是一个三级标签</h3> </body>
</html>03. 标题-排版
<!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><!-- 定义一个超链接, 里面展示 B站 --><!-- a 超链接标签:href: 链接地址 - url地址target: 打开方式 _blank: 新窗口打开_self: 本窗口打开(默认)--><a href="https://www.bilibili.com/" target="_blank">B站</a> 2025年05月15日 20:07</body>
</html>04. 标题-样式
span{color: gray;
}<!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; *//* RGB表示法 *//* color: rgb(255, 120, 0); *//* RGBA表示法 *//* color: rgba(255, 120, 0, 0); *//* 十六进制表示法 *//* color: #0000ff; */color: #b2b2b2;}</style><!-- 方式三: 外部样式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head><body><!-- 定义一个标题, 标题内容: 【我是标题】我还是标题 --><h1>【我是标题】我还是标题</h1><!-- 定义一个超链接, 里面展示 B站 --><a href="https://www.bilibili.com/" target="_blank">B站</a> <!-- 方式一: 行内样式 --><!-- <span style="color: gray;">2024年05月15日 20:07</span> --><span>2025年05月15日 20:07</span></body>
</html>05. 标题-样式(选择器)
<!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: #b2b2b2;} *//* 类选择器 *//* .cls {color: #ff0000;} *//* ID选择器 */#time {color: #b2b2b2;}a {/* 去除超链接下方的下划线 */text-decoration: none;}</style>
</head><body><!-- 定义一个标题, 标题内容: 【我是标题】标标题题--><h1>【我是标题】我是标题内容</h1><!-- 定义一个超链接, 里面展示 哔哩哔哩 --><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a> <span class="cls" id="time">2025年05月15日 20:07</span></body>
</html>06. 正文-排版
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【我是标题】我是标题</title><style>#time {color: #b2b2b2;}a {/* 去除超链接下方的下划线 */text-decoration: none;}</style>
</head><body><!-- --------------------------- 标题 -------------------------------- --><!-- 定义一个标题, 标题内容: 【标题】我是大标题 --><h1>【标题】我是大标题</h1><!-- 定义一个超链接, 里面展示 B站 --><!-- a 超链接标签:href: 链接地址 - url地址target: 打开方式 _blank: 新窗口打开_self: 本窗口打开(默认)--><a href="https://www.bilibili.com/" target="_blank">B站</a><span class="cls" id="time">2025年05月15日 20:07</span><br><br><!-- --------------------------- 正文 -------------------------------- --><!-- 定义一个视频, 引入 video/news.mp4 --><!-- video标签属性 src: 视频地址controls: 显示播放控件autoplay: 自动播放width: 视频宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放)height: 视频高度单位: px: 像素%: 百分比 (相对于父元素的百分比)--><video src="video/news.mp4" controls width="80%"></video><!-- <audio src="audio/news.mp3" controls></audio> --><p>最新计算机专业突击就业指南，更适合应届生程序员的就业指南！</p><p>最新计算机专业突击就业指南，更适合应届生程序员的就业指南！</p><!-- 定义一张图片, 引入 img/1.gif --><!-- img标签属性: src: 图片的访问地址1. 绝对路径1.1 绝对磁盘路径: C:\Users\Administrator\Desktop\img\1.gif (不推荐)1.2 绝对网络路径: https://www.baidu.com/img/1.gif2. 相对路径2.1 ./ : 当前目录 (可以省略) , 如: ./img/1.gif2.2 ../: 上一级目录width: 图片宽度(建议: 宽度和高度只设置一个即可, 另一个会等比例缩放)height: 图片高度--><img src="img/1.gif" width="80%"></img><p>最新计算机专业突击就业指南，更适合应届生程序员的就业指南！</p><img src="img/2.jpg" width="80%"></img><img src="img/3.jpg" width="80%"></img><img src="img/4.jpg" width="80%"></img><img src="img/5.jpg" width="80%"></img><p>最新计算机专业突击就业指南，更适合应届生程序员的就业指南！</p></body>
</html>07. 正文-样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【biaoti】标题</title><style>#time {color: #b2b2b2;}a {/* 去除超链接下方的下划线 */text-decoration: none;}p {/* 设置行高 */line-height: 2; /* 行高: 2倍行高 *//* 设置首行缩进 */text-indent: 2em; /* 首行缩进2个字符 */}</style>
</head><body><!-- --------------------------- 标题 -------------------------------- --><!-- 定义一个标题, 标题内容: 【标题】我是大标题 --><h1>【标题】我是标题</h1><!-- 定义一个超链接, 里面展示 B站 --><!-- a 超链接标签:href: 链接地址 - url地址target: 打开方式 _blank: 新窗口打开_self: 本窗口打开(默认)--><a href="https://www.bilibili.com/" target="_blank">B站</a><span class="cls" id="time">2025年05月15日 20:07</span><br><br><!-- --------------------------- 正文 -------------------------------- --><!-- 定义一个视频, 引入 video/news.mp4 --><video src="video/news.mp4" controls width="80%"></video><p><!-- <b>消息</b> --><!-- <strong> 消息</strong> --><strong>消息</strong><br><br/>(B站)：最新计算机专业突击就业指南，更适合应届生程序员的就业指南！</p><p>更适合应届生程序员的就业指南！</p><!-- 定义一张图片, 引入 img/1.gif --><img src="img/1.gif" width="80%"></img><img src="img/2.jpg" width="80%"></img><img src="img/3.jpg" width="80%"></img><p>更适合应届生程序员的就业指南！</p><p>更适合应届生程序员的就业指南！</p><img src="img/4.jpg" width="80%"></img><img src="img/5.jpg" width="80%"></img><p>更适合应届生程序员的就业指南！</p></body>
</html>08. 正文-整体布局
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【我是标题】标标题题--</title><style>#time {color: #b2b2b2;}a {/* 去除超链接下方的下划线 */text-decoration: none;}/* 标签 */p {/* 设置行高 */line-height: 2; /* 行高: 2倍行高 *//* 设置首行缩进 */text-indent: 2em; /* 首行缩进2个字符 */}/* ID *//* 整体版面居中显示 */#content-container {width: 70%; /* 宽度: 70% */margin: 0 auto;}</style>
</head><body><div id="content-container"><!-- --------------------------- 标题 -------------------------------- --><!-- 定义一个标题, 标题内容: 标题 --><h1>【标题】我是标题</h1><!-- 定义一个超链接, 里面展示 B站 --><a href="https://www.bilibili.com/" target="_blank">B站</a><span class="cls" id="time">2025年05月15日 20:07</span><br><br><!-- --------------------------- 正文 -------------------------------- --><!-- 定义一个视频, 引入 video/news.mp4 --><video src="video/news.mp4" controls width="100%"></video><p><strong>消息</strong>https://www.bilibili.com/</p><p>https://www.bilibili.com/</p><!-- 定义一张图片, 引入 img/1.gif --><img src="img/1.gif" width="100%"></img><img src="img/5.jpg" width="100%"></img><p> https://www.bilibili.com/</p></div></body>
</html>09. 盒子模型
<!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>10. Tlias案例-顶部导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}</style>
</head>
<body><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div>
</body>
</html>11. flex布局
<!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>12. 表单标签
<!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: 表单数据提交的url地址method: 提交方式get: 默认, 表单数据会出现在url后面, 形式: /save?name=Tom&age=18特点:1. 如果表单中包含了隐私数据, get方式并不安全, 不推荐使用该方式.2. 在浏览器中get请求的大小是有限制的, 不适合提交大数据量的表单.post: 表单数据会在消息体/请求体中提交到服务器特点: 1. 安全.2. 请求大小没有限制注意: 表单项要想能够采集数据, 必须得设置name属性, 表示当前表单项的名字--><form action="/save" method="post">姓名: <input type="text" name="name">年龄: <input type="text" name="age"><input type="submit" value="提交"></form>
</body>
</html>13. 表单项标签
<!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> 性别: <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>14. Tlias案例-搜索表单区域
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 300px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}</style>
</head>
<body><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><!-- form表单标签: action: 表单提交的地址 - urlmethod: 表单提交的方式 - get(默认) / postget: 提交时, 表单数据会在url后提交到服务端; 比如: /search?name=Tom&gender=2&position=3 ; get方式提交数据长度有限制, 不能提交大量数据; get方式不安全;post: 提交时, 表单数据会在请求体(消息体)中提交到服务端; 比如: /search -- name=Cat&gender=1&position=2post方式提交数据长度无限制; post方式安全;--><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" 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><button type="submit">查询</button><button type="reset">清空</button></form>
</body>
</html>15. Tlias案例-表格数据展示区域
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 300px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}tr:nth-child(even) {background-color: #f2f2f2;}.avatar {width: 50px;height: 50px;}</style>
</head>
<body><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" 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><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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>讲师</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>咨询师</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>向问天</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任我行</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table></body>
</html>16. Tlias案例-底部版权区域
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}tr:nth-child(even) {background-color: #f2f2f2;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" 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><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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>讲师</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>咨询师</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>向问天</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任我行</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>田伯光</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>班主任</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>不戒</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>班主任</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>左冷禅</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>定逸</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>东方兄弟</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>讲师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>金庸</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>咨询师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div>
</body>
</html>2-Javascript
01. JS-引入方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title>
</head>
<body><!-- <script>//1. 内部脚本alert('Hello JS');</script> --><!-- 2. 外部脚本 --><script src="js/demo.js"></script>
</body>
</html>alert('Hello JavaScript');02. JS-基础语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body><script>//1. 声明变量// let a = 10;// a = "Hello";// a = true;// alert(a); //弹出框//2. 声明常量const PI = 3.14;//PI = 5.0;console.log(PI); //输出到控制台// document.write(PI); //输出到body区域(不常用)</script>
</body>
</html>03. JS-数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body><script>//1. 数据类型// alert(typeof 10); //number// alert(typeof 1.5); //number// alert(typeof true); //boolean// alert(typeof false); //boolean// alert(typeof "Hello"); //string// alert(typeof 'JS'); //string// alert(typeof `JavaScript`); //string// alert(typeof null); //null ? -> object// let a ;// alert(typeof a); //undefined//2. 模板字符串 - 简化字符串拼接let name = 'Tom';let age = 18;console.log('我是'+name+', 我今年'+age+'岁');console.log(`我是${name}, 我今年${age}岁`);</script>
</body>
</html>04. JS-函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>//1. 函数定义及调用 - 具名函数// function add(a,b){// return a + b;// }// let result = add(10,20);// console.log(result);//2. 函数定义及调用 - 匿名函数//2.1 函数表达式// let add = function(a,b){// return a + b;// }// let result = add(100,200);// console.log(result);//2.2 箭头函数let add = (a,b) => {return a + b;}let result = add(1000,2000);console.log(result);</script>
</body>
</html>05. JS-自定义对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>//1. 自定义对象// let user = {// name: 'Tom',// age: 18,// gender: '男',// sing: function(){// alert(this.name + '悠悠的唱着最炫的民族风~')// }// }//let user = {// name: 'Tom',// age: 18,// gender: '男',// sing(){// alert(this.name + '悠悠的唱着最炫的民族风~')// }//}// let user = {// name: 'Tom',// age: 18,// gender: '男',// sing: () => { //注意: 在箭头函数中, this并不指向当前对象 - 指向的是当前对象的父级 【不推荐】// alert(this + ':悠悠的唱着最炫的民族风~')// }// }//2. 调用对象属性/方法//alert(user.name);//user.sing();//3. JSON - JS对象标记法let person = {name: 'itcast',age: 18,gender: '男'}alert(JSON.stringify(person)); //js对象 --> json字符串let personJson = '{"name": "heima", "age": 18}';alert(JSON.parse(personJson).name);</script>
</body>
</html>06. JS-案例-员工列表
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" 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><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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>讲师</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>咨询师</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>向问天</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任我行</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>田伯光</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>班主任</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>不戒</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>班主任</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>左冷禅</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>定逸</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>东方兄弟</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>讲师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>金庸</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>咨询师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script>//通过JS实现上述表格中数据行的隔行换色效果, 奇数行背景色设置为 #f2e2e2, 偶数行背景色设置为 #e6f7ff (JS新语法实现)let trList = document.querySelectorAll("tbody tr"); // 获取所有数据行 - DOM操作for (let i = 0; i < trList.length; i++) {if (i % 2 == 0) {trList[i].style.backgroundColor = "#f2e2e2";} else {trList[i].style.backgroundColor = "#e6f7ff";}}</script></body>
</html>07. JS-DOM
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-DOM</title>
</head>
<body><h1 id="title1">11111</h1><h1>22222</h1><h1>33333</h1><script>//1. 修改第一个h1标签中的文本内容//1.1 获取DOM对象// let h1 = document.querySelector('#title1');//let h1 = document.querySelector('h1'); // 获取第一个h1标签let hs = document.querySelectorAll('h1');//1.2 调用DOM对象中属性或方法hs[0].innerHTML = '修改后的文本内容';</script>
</body>
</html>08. JS-事件监听
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件</title>
</head>
<body><input type="button" id="btn1" value="点我一下试试1"><input type="button" id="btn2" value="点我一下试试2"><script>//事件监听 - addEventListener (可以多次绑定同一事件)document.querySelector('#btn1').addEventListener('click', () => {console.log('试试就试试~~');});document.querySelector('#btn1').addEventListener('click', () => {console.log('试试就试试22~~');});//事件绑定-早期写法 - onclick (如果多次绑定同一事件, 覆盖) - 了解document.querySelector('#btn2').onclick = () => {console.log('试试就试试~~');}document.querySelector('#btn2').onclick = () => {console.log('试试就试试22~~');}</script>
</body>
</html>09. JS-案例-员工列表
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" 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><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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>讲师</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>咨询师</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>向问天</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任我行</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>田伯光</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>班主任</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>不戒</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>班主任</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>左冷禅</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>定逸</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>东方兄弟</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>讲师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>金庸</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>咨询师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script>//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)// 1. 获取所有的tr标签let trs = document.querySelectorAll('tr');// 2. 为每一个tr标签添加事件监听for(let i = 0; i < trs.length; i++){trs[i].addEventListener('mouseenter', function(){ // mouseenter 鼠标进入trs[i].style.backgroundColor = '#f2e2e2';});trs[i].addEventListener('mouseleave', function(){ // mouseleave 鼠标离开trs[i].style.backgroundColor = '#fff';})}</script>
</body>
</html>10. JS-常见事件
<!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>JS-事件-常见事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="单击事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table><script>//click: 鼠标点击事件document.querySelector('#b2').addEventListener('click', () => {console.log("我被点击了...");})//mouseenter: 鼠标移入document.querySelector('#last').addEventListener('mouseenter', () => {console.log("鼠标移入了...");})//mouseleave: 鼠标移出document.querySelector('#last').addEventListener('mouseleave', () => {console.log("鼠标移出了...");})//keydown: 某个键盘的键被按下document.querySelector('#username').addEventListener('keydown', () => {console.log("键盘被按下了...");})//keyup: 某个键盘的键被抬起document.querySelector('#username').addEventListener('keyup', () => {console.log("键盘被抬起了...");})//blur: 失去焦点事件document.querySelector('#age').addEventListener('blur', () => {console.log("失去焦点...");})//focus: 元素获得焦点document.querySelector('#age').addEventListener('focus', () => {console.log("获得焦点...");})//input: 用户输入时触发document.querySelector('#age').addEventListener('input', () => {console.log("用户输入时触发...");})//submit: 提交表单事件document.querySelector('form').addEventListener('submit', () => {alert("表单被提交了...");})</script>
</body></html>11. JS-常见事件(优化)
export function printLog(msg){console.log(msg);
}import { printLog } from "./utils.js";//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {printLog("我被点击了...");
})//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {printLog("鼠标移入了...");
})//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {printLog("鼠标移出了...");
})//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {printLog("键盘被按下了...");
})//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {printLog("键盘被抬起了...");
})//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {printLog("失去焦点...");
})//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {printLog("获得焦点...");
})//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {printLog("用户输入时触发...");
})//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {alert("表单被提交了...");
})<!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>JS-事件-常见事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="单击事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table><!-- type="module" 模块化JS --><script src="./js/eventDemo.js" type="module"></script>
</body></html>3-Vue
01. Vue-快速入门
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title>
</head>
<body><div id="app"><h1>{{message}}</h1><h1>{{count}}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data() {return {message: 'Hello Vue',count: 100}}}).mount('#app');</script>
</body>
</html>02. Vue-案例-员工列表(常用指令)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form"><label for="name">姓名：</label><input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender" v-model="searchForm.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" name="position" v-model="searchForm.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="button" v-on:click="search">查询</button><button type="button" @click="clear">清空</button></form><!-- 表格展示区 --><table><!-- 表头 --><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体内容 --><tbody><tr v-for="(e, index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1?'男' : '女'}}</td><!-- 插值表达式是不能出现在标签内部 --><td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td><!-- v-if: 控制元素的显示与隐藏 --><td><span v-if="e.job == 1">班主任</span><span v-else-if="e.job == 2">讲师</span><span v-else-if="e.job == 3">学工主管</span><span v-else-if="e.job == 4">教研主管</span><span v-else-if="e.job == 5">咨询师</span><span v-else>其他</span></td><!-- v-show: 控制元素的显示与隐藏 --><!-- <td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">讲师</span><span v-show="e.job == 3">学工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨询师</span></td> --><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchForm: { //封装用户输入的查询条件name: '',gender: '',job: ''},empList: [{ "id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": "1","entrydate": "2023-06-09","updatetime": "2024-09-30T14:59:38"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": "1","entrydate": "2020-05-09","updatetime": "2024-09-01T00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg","gender": 2,"job": "2","entrydate": "2021-06-01","updatetime": "2024-09-01T00:00:00"}]}},//方法methods: {search(){//将搜索条件, 输出到控制台console.log(this.searchForm);},clear(){//清空表单项数据this.searchForm = {name:'', gender:'', job:''}}},}).mount('#container')</script></body>
</html>3. Axios
01. Axios-入门
<!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>Ajax-Axios</title>
</head>
<body><input type="button" value="获取数据GET" id="btnGet"><input type="button" value="操作数据POST" id="btnPost"><script src="js/axios.js"></script><script>//发送GET请求document.querySelector('#btnGet').addEventListener('click', () => {//axios发起异步请求axios({url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',method: 'GET'}).then((result) => { //成功回调函数console.log(result.data);}).catch((err) => { //失败回调函数console.log(err);})})//发送POST请求document.querySelector('#btnPost').addEventListener('click', () => {//axios发起异步请求axios({url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',method: 'POST',data: 'id=1' //POST请求方式 , 请求体}).then((result) => { //成功回调函数console.log(result.data);}).catch((err) => { //失败回调函数console.log(err);})})</script>
</body>
</html>02. Axios-请求方式别名
<!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>Ajax-Axios</title>
</head>
<body><input type="button" value="获取数据GET" id="btnGet"><input type="button" value="操作数据POST" id="btnPost"><script src="js/axios.js"></script><script>//发送GET请求document.querySelector('#btnGet').addEventListener('click', () => {axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {console.log(result.data);});console.log('==========================');})//发送POST请求document.querySelector('#btnPost').addEventListener('click', () => {axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {console.log(result.data);});})</script>
</body>
</html>4-实战案例
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form"><label for="name">姓名：</label><input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender" v-model="searchForm.gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" name="position" v-model="searchForm.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="button" v-on:click="search">查询</button><button type="button" @click="clear">清空</button></form><!-- 表格展示区 --><table><!-- 表头 --><thead><tr><th>序号</th><th>姓名</th><th>性别</th><th>头像</th><th>职位</th><th>入职日期</th><th>最后操作时间</th><th>操作</th></tr></thead><!-- 表格主体内容 --><tbody><tr v-for="(e, index) in empList" :key="e.id"><td>{{index + 1}}</td><td>{{e.name}}</td><td>{{e.gender == 1?'男' : '女'}}</td><!-- 插值表达式是不能出现在标签内部 --><td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td><!-- v-if: 控制元素的显示与隐藏 --><td><span v-if="e.job == 1">班主任</span><span v-else-if="e.job == 2">讲师</span><span v-else-if="e.job == 3">学工主管</span><span v-else-if="e.job == 4">教研主管</span><span v-else-if="e.job == 5">咨询师</span><span v-else>其他</span></td><!-- v-show: 控制元素的显示与隐藏 --><!-- <td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">讲师</span><span v-show="e.job == 3">学工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨询师</span></td> --><td>{{e.entrydate}}</td><td>{{e.updatetime}}</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script src="js/axios.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {searchForm: { //封装用户输入的查询条件name: '',gender: '',job: ''},empList: []}},//方法methods: {async search(){// 发送ajax请求，获取数据// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {// this.empList = result.data.data;// })// console.log('===========================');let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.empList = result.data.data;},clear(){//清空表单项数据this.searchForm = {name:'', gender:'', job:''}this.search()}},//钩子函数mounted(){//页面加载完成之后，发送ajax请求，获取数据this.search()}}).mount('#container')</script></body>
</html>