崔玉昌·小白也能轻松掌握：前后端交互(第6课)

崔玉昌

已于 2023-12-18 16:07:59 修改

阅读量994

点赞数 29

分类专栏：前端教程后端教程笔记文章标签：交互学习方法笔记前端后端 ajax 测试用例

于 2023-12-08 23:03:35 首次发布

本文链接：https://blog.csdn.net/weixin_45490920/article/details/134885454

版权

前端教程同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

后端教程

10 篇文章 0 订阅

订阅专栏

笔记

4 篇文章 0 订阅

订阅专栏

上篇回顾

在上篇文章中我们讲了为什么要学后端和后端的基本配置和如何运行后端代码：点击跳转到上一篇，因为如果我们只学前端的话，那么就业领域太窄了，所以后面我们将面临独立开发，也就是我们会一个人开发整个项目。

本篇知识点

布局规划、js操作页面标签(DOM)、前端提交数据(ajax)、后端接收数据、后端验证数据，我们将掌握有记忆功能的登录与注册功能，之前我们做的登录功能再次打开页面后就不记得你的账号与面了，这次我们的登录与注册功能会把你的资料长久保留起来，本章将带你深入理解后端存在的意义。

创建基本标签

我们要先像我们第2课那样创建好基本的标签，比如一个标题，两个文本框、两个按钮：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 块级标签(页面独占一行)，可以理解为和body标签差不多 -->
  <div class="main">
    <h1>登录页面</h1>
    账号：<input type="text">
    <br>
    密码：<input type="text">
    <br>
    <button>注册</button>
    <button>点击登录</button>
  </div>
</body>
</html>

我们本次代码和之前差不多，唯独外面多了一个div标签，和h1标签一样是一个块级标签，也就是在页面上会独占一行，因为看我们input标签和button标签，这些都是内联标签，也就是需要在前面写br标签才可以换行，而块级标签是直接独占一行，不需要br标签换行。

我们这里用div包裹住其它标签是因为后面我们要弄个小区域的背景颜色，还有就是我们这里的两个按钮标签从原本的<input type="button" value="注册">变成了button标签，其实都一样，只是后者比较简洁，可以一眼看出是按钮标签。

运行结果：

添加基本样式

我们将body背景设为深绿色然后将div标签设置内边距，然后将div居中到屏幕并把背景设置为浅绿色并设置为圆角且让自身的所有文字标签居中：

<style>
    /* body标签的样式 */
    body {
      /* 背景：浅绿色 */
      background: rgb(13, 119, 13);
    }
    /* div的样式 */
    .main {
      /* 自身宽度 单位：px*/
      width: 250px;
      /* 自身高度 单位：px*/
      height: 300px;
      /* 体内标签离自己的上下内边距 单位：px*/
      padding: 10px;
      /* 背景颜色：深绿色 */
      background: rgb(19, 164, 19);
      /* 四个角的弧度 单位：px*/
      border-radius: 20px;
      /* 将自己居中 */
      margin: 0 auto;
    }
</style>

每个属性上面都有中文注释padding样式属性是div的内边距，也就是div里的标签与div的距离，当我们设置了内边距后会把div撑大，所以说我们既是设置了div的宽高再设置padding也会增自身大小，还有就是border-radius属性是用来设置块级标签四个角的弧度，像素值越大，也就越圆。

最后是margin：0 auto；第一个值 0 指的是上下的外边距，也就是div离body标签的距离，当值为0时可以省略px单位，第二值是左右的外边距，当值值为auto时表示自动，这样它就会居中自己。

运行结果：

然后我们将“登录页面”也就是h1标签和“账号：”和“密码：”字体颜色改为深绿色，并取消文本框与按钮的默认边框样式，并设置两个文本框与两个按钮的上边距，并改变两个按钮的背景颜色为深绿色，字体颜色改为浅绿色并添加鼠标放上去的效果与点击的效果：

<!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>
    /* 所有标签的样式 */
    * {
      /* 去除默认边框 */
      border: 0px;
    }
    /* body标签的样式 */
    body {
      /* 背景：浅绿色 */
      background: rgb(13, 119, 13);
    }
    /* div的样式 */
    .main {
      /* 自身宽度 单位：px*/
      width: 250px;
      /* 自身高度 单位：px*/
      height: 300px;
      /* 体内标签离自己的上下内边距 单位：px*/
      padding: 10px;
      /* 背景颜色：深绿色 */
      background: rgb(19, 164, 19);
      /* 四个角的弧度 单位：px*/
      border-radius: 20px;
      /* 将自己居中 */
      margin: 0 auto;
      /* 文字居中 */
      text-align: center;
    }
    /* h1标签与span的样式 */
    h1,span {
      /* 字体颜色：深绿色 */
      color: rgb(4, 113, 4);
    }
    /* 按钮标签的样式 */
    button {
      /* 字体颜色：浅绿色 */
      color: rgb(31, 212, 31);
      /* 背景颜色：深绿色 */
      background:rgb(4, 113, 4);
      /* 上边距 */
      margin-top: 30px;
    }
    /* 鼠标放到按钮上时的样式 */
    button:hover {
      /* 背景：浅绿色 */
      background: rgb(19, 164, 19);
    }
    /* 鼠标点击按钮时的样式 */
    button:active {
      /* 字体颜色：绿色 */
      color: green;
    }
  </style>
</head>
<body>
  <!-- 块级标签(页面独占一行)，可以理解为和body标签差不多 -->
  <div class="main">
    <h1>登录页面</h1>
    <span>账号：</span>
    <input type="text">
    <br>
    <span>密码：</span>
    <input type="text">
    <br>
    <button>点击注册</button>
    <button>点击登录</button>
  </div>
</body>
</html>

我们先看h1与span的样式这里，如果我们几个标签的样式相同是我们可以后面用逗号分隔来实现多个标签使用一个样式，这样可以省着再为另一个标签写相同的样式，然后还有我们之前的“账号：”还有“密码：”这几个字是没有用span标签来包裹，但我们这里需要改变它的样式，那么这个文字就必须是个标签，不然没办法获取到，通常span标签就是来展现文字的标签。

然后就是 :hover 表示这个标签被鼠标触摸后的样式，而 :active 表示被鼠标按下去的样式。

运行结果：