Web开发(AI)

原创已于 2025-06-27 15:26:30 修改 · 472 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-06-10 16:54:42 首次发布

HTML

HTML(Hyper Text Markup Language)：超文本标记语言
超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言：由标签 “<标签名>” 构成的语言

HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频
HTML代码直接在浏览器中运行，HTML标签由浏览器解析

在这里插入图片描述
CSS(Cascading Style Sheet）：层叠样式表，用于控制页面的样式(表现)

HTML快速入门

新建文本文件，后缀名改为 .html
写HTML的基本骨架，定义标题：

<html>
     <head>
          <title>HTML 快速入门</title>
     </head>
     <body>
                
     </body>
</html>

其中<html>是根标签，<head>和<body>是子标签

<head> : 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题，<title>中定义标题显示在浏览器的标题位置
<body> : 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等

在中编写HTML的核心内容

<html>
     <head>
        <title>HTML 快速入门</title>
     </head>
     <body>
        <h1>Hello HTML</h1>
        <img src="img/1.png">
     </body>
</html>

其中 <h1> 标签是一个一级标题的标签， <img> 标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片

然后选中文件，鼠标右击，选择使用浏览器打开文件

在这里插入图片描述

HTML标签不区分大小写，建议小写
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

常见标签&样式

标题排版

标题标签 h 系列：

<h1> 11111111111111 </h1>
<h2> 11111111111111 </h2>
<h3> 11111111111111 </h3>
<h4> 11111111111111 </h4>
<h5> 11111111111111 </h5>
<h6> 11111111111111 </h6>

效果：h1为一级标题，字体也是最大的； h6为六级标题，字体是最小的
注意：HTML标签是预定义好的，不能随意定义，也就以为着，标题标签就只有这六个，没有 <h7>

超链接 a 标签：

<a href="....." target=".....">央视网</a>

属性：

href: 指定资源访问的url
target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开

 <!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 id="title">【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：央视网 -->
  <a href="https://news.cctv.com/" target="_blank">央视网</a>
  2024年05月15日 20:07
  
</body>
</html>

标题样式

CSS引入方式

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	`<h1 style="xxx:xxx;">xx新闻网</h1>`
内部样式	定义`<style>`标签，在标签内部定义css样式	`<style> h1 {...} </style>`
外部样式	定义`<link>`标签，通过href属性引入外部css文件	`<link rel="stylesheet" href="css/news.css">`

行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用(常配合JS使用)
内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上(可以写在页面任何位置，但通常约定写在head标签中)
外部样式：html和css实现了完全的分离，企业开发常用方式

颜色表示方式

表示方式	属性值	说明	取值
关键字	颜色英文单词	red、green、blue	red、green、blue…
rgb表示法	`rgb(r, g, b)`	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
rgba表示法	`rgba(r, g, b, a)`	红绿蓝三原色，a表示透明度，取值：0-1	rgb(0,0,0,0.3)、rgb(255,255,255,0.5)
十六进制表示法	`#rrggbb`	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

<!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>
    .publish-date {
      color: #b2b2b2;
    }
     /* 设置超链接取消下划线效果 */
    a {
      text-decoration: none;
    }
  </style>
  <!-- 3. 外部样式 -->
  <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>

  <!-- 定义网页标题, 标题内容： xxxxxxxxxxxxx -->
  <h1 id="title">【xxxxxx】xxxxxxxxxxxxxxx</h1>
  
  <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：xx网 -->
  <a href="https://news.cctv.com/" target="_blank">xx网</a>

  <!-- 1. 行内样式 -->
  <!-- <span style="color: #b2b2b2;">2024年05月15日 20:07</span> -->

  <span class="publish-date">2024年05月15日 20:07</span>

</body>
</html>

CSS选择器

选择器是选取需设置样式的元素(标签)，但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种

选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

选择器	写法	示例	示例说明
元素选择器	元素名称 {…}	`h1 {...}`	选择页面上所有的`<h1>`标签，优先级最低
类选择器	.class属性值 {…}	`.cls {...}`	选择页面上所有class属性为cls的标签，优先级次之
id选择器	#id属性值 {…}	`#hid {...}`	选择页面上id属性为hid的标签，优先级最高
分组选择器	选择器1,选择器2{…}	`h1,h2 {...}`	选择页面上所有的`<h1>`和`<h2>`标签
属性选择器	元素名称[属性] {…}	`input[type] {...}`	选择页面上有type属性的`<input>`标签
属性选择器	元素名称[属性名=“值”] {…}	`input[type="text"] {...}`	选择页面上type属性为text的`<input>`标签
后代选择器	元素1元素2{…}	`form input {...}`	选择`<form>`标签内的所有`<input>`标签

正文排版

基本实现

浏览器在解析渲染页面的时候，是从上往下解析渲染的，那接下来，我们就可以从上往下来布局这个页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【xxxxxxxx】xxxxxxxxxxxxxxxxxxx</title>
  <!-- 2. 内部样式 -->
  <style>
    .publish-date {
      color: #b2b2b2;
    }
    
    /* 设置超链接取消下划线效果 */
    a {
      text-decoration: none;
    }
  </style>
</head>
<body>
      
    <!-- 定义网页标题, 标题内容： xxxxxxxxxxxxxxxxxxx -->
    <h1 id="title">xxxxxxxxxxxxxxxxxxx</h1>
    
    <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：xx网 -->
    <a href="https://news.cctv.com/" target="_blank">xx网</a>

    <span class="publish-date">2024年05月15日 20:07</span>
    <br>
    <br>

    <!-- 定义一个视频, video/news.mp4 -->
    <video src="video/news.mp4" controls  width="80%"></video>
    <p>
      xxxxxxxxxxxxxxxxxxx。
    </p>
    <p>
      xxxxxxxxxxxxxxxx。
    </p>
    <!-- 定义一张图片, img/1.gif -->
    <img src="img/1.gif" alt=""  width="100%">
    <p>
      xxxxxxxxxxxxxxxxx。
    </p>
    <p>
      xxxxxxxxxxxxxxxxxxx。
    </p>
    <p>
      xxxxxxxxxxxxxxxxxxx。
    </p>
    <img src="img/2.jpg" width="100%">
  
</body>
</html>

常见标签

标签	作用	属性/说明
`<video>`	视频标签	src：指定视频的url（绝对路径/相对路径）
		controls：是否显示播放控件
		width：宽度(像素/相对于父元素百分比)；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
		height：高度(像素/相对于父元素百分比)；备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。
`<img>`	图片标签	src，width，height
`<p>`	段落标签
`<br>`	换行标签
`<b> / <strong>`	加粗	`<strong>` 具有强调语义
`<u> / <ins>`	下划线	`<ins>` 具有强调语义
`<i> / <em>`	倾斜	`<em>` 具有强调语义
`<s> / <del>`	删除线	`<del>` 具有强调语义

在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格、<、>

字符实体	属性/说明
` `	空格
`<`	<
`>`	>

路径表示

在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类

绝对路径:
- 绝对磁盘路径(不推荐): <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
- 绝对网络路径: <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:
./ : 当前目录， ./ 可以省略的
…/: 上一级目录

正文样式

/* 设置段落首行缩进 */
p {
  text-indent: 2em; /* 首行缩进2em */
  line-height: 2; /* 行高2倍 */
}

整体布局

<!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">
      <!-- 定义网页标题, 标题内容： xxxxxxxxxxxxxxxxxxx -->
      <h1 id="title">【xxx】xxxxxxxxxxxxxxxxxxx</h1>
      
      <!-- 定义一个超链接, 链接地址：https://news.cctv.com/, 链接内容：xx网 -->
      <a href="https://news.cctv.com/" target="_blank" >xxx网</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>xxxx</strong>（xxxx）：xxxxxxxxxxxxxxxxxxx。
      </p>
      <p>
        xxxxxxxxxxxxxxxxxxx。
      </p>
      <!-- 定义一张图片, img/1.gif -->
      <img src="img/1.gif" alt=""  width="100%">
      <p>
        xxxxxxxxxxxxxxxxxxx。
      </p>
      <p>
        xxxxxxxxxxxxxxxxxxx。
      </p>
      <p>
        xxxxxxxxxxxxxx。
      </p>
      <img src="img/2.jpg"  width="100%">
    </div>
</body>
</html>

盒子模型

盒子：页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

CSS盒子模型，其实和日常生活中的包装盒是非常类似的

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的

布局标签

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签
标签：<div> <span>
特点：
<div>标签：
- 一行只显示一个(独占一行)
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高(width、height)
****标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
测试：

<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>
    <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>

    <span>
        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 
    </span>
    <span>
        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 
    </span>
</body>

div会独占一行，默认宽度为父元素 body 的宽度。可以设置宽高(width、height)
在这里插入图片描述
span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度。不可以设置宽高(width、height)

代码实现

<!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>

上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：
padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px
padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px
padding: 20px; -----------------------------> 表示上、右、下、左都是20px

在这里插入图片描述

flex布局

flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器(container)，它的所有子元素自动成为容器成员，称为Flex项目(item)
通过给父容器添加flex属性，来控制子元素的位置和排列方式

在这里插入图片描述

<!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;
      /* justify-content: space-between; */ /* 先两边贴边，再平分剩余空间 */
      /* justify-content: flex-start;*/ /* 从头开始排列  */
      /* justify-content: flex-end; */ /* 从尾开始排列 */
      /* justify-content: center; */ /* 居中排列 */
      /* justify-content: space-around; */ /* 两边留白，中间平分，平分剩余空间 */
      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样式：

属性	说明	取值	含义
display	模式	flex	使用flex布局
flex-direction	设置主轴	row	主轴方向为x轴，水平向右。（默认）
		column	主轴方向为y轴，垂直向下。
justify-content	子元素在主轴上的对齐方式	flex-start	从头开始排列
		flex-end	从尾部开始排列
		center	在主轴居中对齐
		space-around	平分剩余空间
		space-between	先两边贴边，再平分剩余空间

如果主轴设置为row，其实就是横向布局。主轴设置为column，其实就是纵向布局
在这里插入图片描述

表单

我们经常在访问网站时，出现的登录页面、注册页面、个人信息提交页面，其实都是一个一个的表单。当我们在这些表单中录入数据之后，一点击 “提交”，就会将表单中我们填写的数据采集到，并提交。这个数据，一般会提交到服务端，最终保存在数据库中
在这里插入图片描述

表单标签

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: <form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL
- method: 规定用于发送表单数据的方式，常见为： GET、POST
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的，不安全，不推荐
  - POST：表单数据是在请求体(消息体)中携带的，大小没有限制，安全
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

<!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>
    <!-- 
    form表单属性: 
        action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面
        method: 表单的提交方式 .
            get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值
            post: 在消息体(请求体)中传递的, 参数大小无限制的.
    -->   
        
    <form action="" method="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>
        
</body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12
在这里插入图片描述
表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项

用户名: <input type="text" name="username">

表单项标签

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项，通过type属性控制输入形式

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>: 定义下拉列表，<option> 定义列表项
<textarea>: 文本域

<!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>

在这里插入图片描述
而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。接下来，点击提交按钮，来提交当前表单，看看提交的数据

表格数据

基本实现

<!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>

在这里插入图片描述

表格标签

标签	描述
`<table>`	定义表格整体
`<thead>`	用于定义表格头部(可选)
`<tbody>`	定义表格中的主体部分(可选)
`<tr>`	表格的行，可以包裹多个 `<td>`
`<td>`	表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 `<th>`

版权区域

<!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>

在这里插入图片描述

JS

JavaScript(JS)是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，但是基础语法类似

组成：
- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等

JS核心语法

JS引入方式

第一种方式：内部脚本，将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script></script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度

<!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>
    alert('Hello JS')
  </script>
</body>
</html>

第二种方式：外部脚本，将JS代码定义在外部JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- 引入外部js的<script>标签，必须是双标签

在js目录下，定义一个js文件demo.js，在文件中编写js代码

alert('Hello JS')

在html文件中，通过****引入js文件demo.js

<script src="js/demo.js"></script>

JS书写规范：
- 结束符：每行js代码，结尾以分号结尾，而结尾的分号可有可无(建议在一个项目中保持一致，要么全部都加，要么全部都不加)
- 注释：单行注释，多行注解的写法，与java中一致

JS基础语法

输出语句

api	描述
`window.alert(...)`	警告框
`document.write(...)`	在HTML 输出内容
`console.log(...)`	写入浏览器控制台

变量&常量

在JS中，变量的声明和java中还是不同的

JS中主要通过 let 关键字来声明变量的，JS是一门弱类型语言，变量是可以存放不同类型的值的
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头
- 变量名严格区分大小写，如：name和Name是不同的变量
- 不能使用关键字作为变量名，如：let、if、for等
在JS中，如果声明一个常量，需要使用const关键字，一旦声明，常量的值就不能改变

数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为：原始数据类型 和 引用数据类型

原始数据类型	描述
number	数字(整数、小数、NaN(Not a Number))
string	字符串，单双引(‘…’)、双引号(“…”)、反引号(`...`)皆可，正常使用推荐单引号
boolean	布尔，true，false
null	对象为空。，JavaScript 是大小写敏感的，因此 null、Null、NULL是完全不同的
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

使用typeof关键字可以返回变量的数据类型

<!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>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

对于字符串类型的数据，除了可以使用双引号（“…”）、单引号（‘…’）以外，还可以使用反引号 (`…`)，而使用反引号引起来的字符串，也称为模板字符串

模板字符串的使用场景：拼接字符串和变量
模板字符串的语法：
- `…` ：反引号(英文输入模式下键盘 tab 键上方波浪线 ~ 那个键)
- 内容拼接时，使用 ${ } 来引用变量

  <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

函数

具名函数

函数(function)是被设计用来执行特定任务的代码块，方便程序的封装复用

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义
返回值也不需要声明类型，直接return即可
在调用函数时，实参个数与形参个数可以不一致，但是建议一致

匿名函数

匿名函数：是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。
匿名函数定义可以通过两种方式：函数表达式 和 箭头函数，箭头函数这种形式，在现在的前端开发中用的会更多一些

//函数表达式
var add = function (a,b){
    return a + b;
}
//箭头函数
var add = (a,b) => {
    return a + b;
}

自定义对象

let 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){} //: function可省略
};

调用：

对象名.属性名
对象名.方法名()

JSON

JSON对象：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript标记法书写的文本，由于语法简单，层级结构鲜明，现多用于作为数据载体，在网络中进行数据传输。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

key必须使用引号并且是双引号标记，value可以是任意数据类型
在这里插入图片描述
JSON.stringify(...)：作用就是将js对象，转换为json格式的字符串
JSON.parse(...)：作用就是将json格式的字符串，转为js对象

流程控制

if … else if … else …
switch
for
while
do … while

JS DOM

DOM：Document Object Model 文档对象模型，也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象， HTML 文档是浏览器解析，封装的对象分为：

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

JS通过DOM对HTML进行操作：

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM的核心思想：将网页的内容当做对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上

document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)
获取DOM元素方法
1. 根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
2. 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');
  获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组(有长度、有索引的数组，但没有push、pop等数组方法)

<!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>

JS事件监听

事件

事件：HTML事件是发生在HTML元素上的 “事情”

按钮被点击
鼠标移到元素上
输入框失去焦点
按下键盘按键
…

事件监听：JS可以在事件触发时，立即调用一个函数做出响应，自动的完成对应功能
在这里插入图片描述

语法

事件源.addEventListener('事件类型', 要执行的函数);

事件监听三要素:

事件源：哪个dom元素触发了事件，要获取dom元素
事件类型：用什么方式触发，比如：鼠标单击 click，鼠标经过 mouseover
事件触发执行的函数：要做什么事

JavaScript对于事件的绑定还提供了另外2种方式(早期版本)：
1)通过html标签中的事件属性进行绑定
例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数

<input type="button" id="btn1" value="点我一下试试1" onclick="on()">

<script>
    function on(){
        alert('试试就试试')
    }
</script>

2)通过DOM中Element元素的事件属性进行绑定
依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性
例如一个按钮，我们对于按钮可以绑定单机事件，可以通过DOM元素的属性，为其做事件绑定

<body>
    <input type="button" id="btn1" value="点我一下试试1">
    <script>
      document.querySelector('#btn1').onclick = function(){
          alert("按钮2被点击了...");
      }
    </script>
</body>

addEventListener 与 on事件区别：on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener

常见事件

在这里插入图片描述

<!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("键盘被按下了...");
        })

        //keydown: 某个键盘的键被抬起
        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>

模块化

Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架

<p v-xxx="....">.....</p>

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

v-for

作用：列表渲染，遍历容器的元素或者对象的属性
语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>
参数：

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"
key：
作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等
语法：v-bind:属性名=“属性值” <img v-bind:src="item.image" width="30px">
简化：:属性名=“属性值” <img :src="item.image" width="30px">
注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来

v-if / v-show

作用：这两类指令，都是用来控制元素的显示与隐藏
v-if：

语法：v-if=“表达式”，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断

注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后

v-show：

语法：v-show=“表达式”，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型
注意：v-model 中绑定的变量，必须在data中定义

v-on

作用：为html标签绑定事件（添加时间监听）
语法：

v-on:事件名=“方法名”
简写为 @事件名=“…”
<input type="button" value="点我一下试试" v-on:click="handle">
<input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义
在这里插入图片描述
注意： methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据

Vue的生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程
vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法，其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：
在这里插入图片描述
其中我们需要重点关注的是mounted，其他的了解即可
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

    methods: {
      async search() {
        //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
        const 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() {
      this.search();
    }
  }).mount('#container')

Ajax

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML，其作用有如下2点：

与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

我们详细的解释一下Ajax技术的2个作用：

与服务器进行数据交互
如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术
如下图所示，当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高

同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求，介绍一下异步请求和同步请求的区别

同步请求发送过程如下图所示：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作
异步请求发送过程如下图所示：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作

Axios

使用原生的Ajax请求的代码编写起来还是比较繁琐的。Axios是对原生的AJAX进行封装，简化书写
Axios官网是：https://www.axios-http.cn
Axios的使用比较简单，主要分为2步：
1). 引入Axios文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2). 点击按钮时，使用Axios发送请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Axios入门程序</title>
</head>
<body>

  <button id="getData">GET</button>
  <button id="postData">POST</button>
  
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    //GET请求
    document.querySelector('#getData').onclick = function() {
      axios({
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
        method:'get'
      }).then(function(res) {
        console.log(res.data);
      }).catch(function(err) {
        console.log(err);
      })
    }
    
    //POST请求
    document.querySelector('#postData').onclick = function() {
      axios({
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
        method:'post'
      }).then(function(res) {
        console.log(res.data);
      }).catch(function(err) {
        console.log(err);
      })
    }
  </script>
</body>
</html>

在使用axios时，在axios之后，输入 thenc 会自动生成成功及失败回调函数结构
Axios还针对不同的请求，提供了别名方式的api，具体格式如下：

axios.请求方式(url [, data [, config]])

方法	描述
`axios.get(url [, config])`	发送get请求
`axios.delete(url [, config])`	发送delete请求
`axios.post(url [, data[, config]])`	发送post请求
`axios.put(url [, data[, config]])`	发送put请求

如果使用axios中提供的.then(function(){....}).catch(function(){....})，这种回调函数的写法，会使得代码的可读性和维护性变差。而为了解决这个问题，我们可以使用两个关键字，分别是：async、await
可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行。

//修改前
search() {
    //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
    axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {
      this.empList = res.data.data
    })
  },

//修改后
async search() {
    //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
    const 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;
  },

Maven

Maven 是一款用于管理和构建Java项目的工具，是Apache旗下的一个开源项目
在这里插入图片描述

依赖管理
方便快捷的管理项目依赖的资源(jar包)，避免版本冲突问题
1). 使用maven前
我们项目中要想使用某一个jar包，就需要把这个jar包从官方网站下载下来，然后再导入到项目中。然后在这个项目中，就可以使用这个jar包
2). 使用maven后
当使用maven进行项目依赖(jar包)管理，则很方便的可以解决这个问题。我们只需要在maven项目的pom.xml文件中，添加一段如下图所示的配置即可实现

在maven项目的配置文件中，加入上面这么一段配置信息之后，maven会自动的根据配置信息的描述，去下载对应的依赖。然后在项目中，就可以直接使用
项目构建
Maven还提供了标准化的跨平台的自动化构建方式

如上图所示我们开发了一套系统，代码需要进行编译、测试、打包、发布等过程，这些操作是所有项目中都需要做的，如果需要反复进行就显得特别麻烦，而Maven提供了一套简单的命令来完成项目构建

通过Maven中的命令，就可以很方便的完成项目的编译(compile)、测试(test)、打包(package)、发布(deploy) 等操作
而且这些操作都是跨平台的，也就是说无论你是Windows系统，还是Linux系统，还是Mac系统，这些命令都是支持的
统一项目结构
Maven 还提供了标准、统一的项目结构
1). 未使用Maven
由于java的开发工具有很多，除了大家熟悉的IDEA以外，还有像早期的Eclipse、MyEclipse。而不同的开发工具，创建出来的java项目的目录结构是存在差异的，那这就会出现一个问题。
Eclipse创建的java项目，并不能直接导入IDEA中。 IDEA创建的java项目，也没有办法直接导入到Eclipse中

2). 使用Maven
而如果我们使用了Maven这一款项目构建工具，它给我们提供了一套标准的java项目目录。如下所示

也就意味着，无论我们使用的是什么开发工具，只要是基于maven构建的java项目，最终的目录结构都是相同的，如图所示。我们使用Eclipse、MyEclipse、IDEA创建的maven项目，就可以在各个开发工具直接直接导入使用了，更加方便、快捷

而在上面的maven项目的目录结构中，main目录下存放的是项目的源代码，test目录下存放的是项目的测试代码。而无论是在main还是在test下，都有两个目录，一个是java，用来存放源代码文件；另一个是resources，用来存放配置文件

Maven概述

Maven模型

构建生命周期/阶段(Build lifecycle & phases)

在这里插入图片描述
以上图中紫色框起来的部分，就是用来完成标准化构建流程。当我们需要编译，Maven提供了一个编译插件供我们使用；当我们需要打包，Maven就提供了一个打包插件供我们使用等

项目对象模型 (Project Object Model)

在这里插入图片描述
以上图中紫色框起来的部分属于项目对象模型，就是将我们自己的项目抽象成一个对象模型，有自己专属的坐标(坐标，就是资源(jar包)的唯一标识，通过坐标可以定位到所需资源(jar包)位置,组成部分：groupId: 组织名; arfitactId: 模块名; Version: 版本号)，如下图所示是一个Maven项目
在这里插入图片描述

依赖管理模型(Dependency)

在这里插入图片描述
以上图中紫色框起来的部分属于依赖管理模型，是使用坐标来描述当前项目依赖哪些第三方jar包

之前我们项目中需要jar包时，直接就把jar包复制到项目下的lib目录，而现在我们只需要在pom.xml中配置依赖的配置文件即可。而这个依赖对应的jar包其实就在我们本地电脑上的maven仓库中