前端入门——案例一：登录界面设计（html+css+js）

许久不用html，丢的差不多了，复习些基础语法，且用个小案例进行学习。

基础介绍

下面将介绍网页里常见的结构元素<html> </html>、<head> </head>、<body> </body>、<div> </div> 。

<html> ... </html>

整个 HTML 文档的根标签。
网页所有内容都必须写在 <html> 标签里面。
它通常分为两大部分：
- <head>
- <body>

<head> ... </head>

网页的"头部" ，用来放网页的元信息 （meta-information），而不是展示给用户看的内容。
常见内容：
- <title> 网页标题（显示在浏览器标签上）
- <meta> 网页编码、关键词、描述等信息
- <link> 引用 CSS 文件
- <style> 内嵌 CSS
- <script> 引用或写 JS（通常推荐放在 <body> 最底部）

<body> ... </body>

网页的主体内容 ，用户能在浏览器里看到的东西都写在这里。
包含：
- 文本（<h1> <p> <span> ...）
- 图片（<img>）
- 链接（<a>）
- 表单（<form> <input>）
- 结构容器（<div> <section> 等）

4. `<div> ... </div>`

HTML 的通用容器（division，分区）。
本身没有语义，只是一个盒子，用来包裹和分组内容。
常和 CSS 样式 或 JS 脚本结合使用，用来布局或交互。

5. 总结区别

<html>：根标签，整个网页的外壳
<head>：放网页信息和设置，不直接展示给用户
<body>：放网页实际内容，用户能看到的部分
<div>：通用容器，用来分组和布局内容

基础语法

1. HTML 基础语法

HTML (HyperText Markup Language ) → 用来写页面的结构和内容。

特点：标签结构化，大多数是成对出现的。

基本结构：

html 复制代码

<!DOCTYPE html> <!-- 声明 HTML5 -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
</head>
<body>
  <h1>标题</h1>
  <p>这里是一段文字。</p>
  <a href="https://example.com">这是一个链接</a>
  <img src="image.jpg" alt="一张图片">
</body>
</html>

<h1>~<h6> → 标题，数字越大标题越小。
<p> → 段落。
<a href="URL"> → 超链接。
<img src="路径" alt="说明"> → 图片。
<div> → 区块容器（常用来布局）。
<span> → 行内容器（用来包小范围文字）。

2. CSS 基础语法

CSS (Cascading Style Sheets ) → 用来写页面的样式（颜色、布局、大小）。
选择器 + 属性:值;

常见选择器：

css 复制代码

/* 标签选择器 */
p {
  color: red;   /* 设置文字颜色 */
}

/* 类选择器 */
.my-class {
  font-size: 20px;
}

/* ID 选择器 */
#my-id {
  background: yellow;
}

/* 通配符（所有元素） */
* {
  margin: 0;
  padding: 0;
}

常见属性：

color: red; → 文字颜色
background-color: blue; → 背景颜色
font-size: 16px; → 字体大小
margin / padding → 外边距 / 内边距
border: 1px solid black; → 边框
width: 100px; height: 50px; → 宽高
display: flex; → 弹性布局

3. JavaScript 基础语法

JS (JavaScript ) → 给页面加交互。
基本组成：变量、数据类型、语句、函数、事件。

变量

js 复制代码

let name = "Alice";  // 可修改
const pi = 3.14;     // 常量，不可修改
var age = 20;        // 老语法，不推荐

数据类型

字符串："hello"
数字：123
布尔：true / false
数组：[1, 2, 3]
对象：{name: "Alice", age: 20}
空值：null, undefined

条件 & 循环

js 复制代码

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

函数

js 复制代码

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice"));

DOM操作（Document Object Model，JS 操作 HTML）

树形的

html 复制代码

<p id="demo">原始文字</p>
<button onclick="changeText()">点我</button>

<script>
function changeText() {
  document.getElementById("demo").innerText = "文字被修改了！";
}
</script>

4. 三者关系

HTML → 页面内容和结构（骨架）。
CSS → 页面样式和布局（外观）。
JS → 页面逻辑和交互（行为）。

案例------登录界面设计

任务说明

设计一个用户登录界面，固定用户账号和密码，当用户输入的账号密码不匹配时，在输入框下方显示提示。

目标功能：

用户输入用户名和密码；
点击Login按钮后验证是否与设定的固定账号匹配；
如果不匹配，在输入框下方出现红色小字提示:Incorrect username or password；
提供"眼睛"图标，可以显示/隐藏密码框内容。

最终效果如图所示：

一、整体设计思路

这个登录页面主要由三部分组成：

html：控制页面整体结构，包括输入框、按钮、提示文字等。
CSS：控制页面样式细节，如颜色、排版、按钮样式、阴影等美观效果。
JavaScript：控制逻辑功能，包括密码显示隐藏功能、登录验证逻辑。

html 控制的是整体架构，css 为 html 添加细节，js则是逻辑控制。如果把 html 比作人， css 就是为其上妆，js 控制其行为。

自定义设计说明

固定用户名和密码（admin / 12345）
居中卡片式登录框（白色背景 + 圆角阴影）
登录框标题为login
用户名输入背景为：username
密码输入背景为：password（右侧添加一个眼睛图标，可切换密码可见与不可见）
整体背景使用淡渐变蓝紫色
输入框为圆角，输入时有聚焦效果
"Login" 按钮为蓝色，悬停时变深
登录失败时，在登录框下方出现红色小字体提示："Incorrect username or password"

代码思路

首先还是用HTML负责页面结构，CSS 负责页面样式和布局，JavaScript 负责交互逻辑。

HTML 结构 ：

(1)在 <body> 标签中，使用一个中心化的 <div> 容器（.login-box）来放置所有登录相关的元素，包括标题、用户名输入框、密码输入框（带有显示/隐藏密码的图标）、登录按钮以及错误提示信息。
CSS 样式 ：

(1)为 <body> 设置渐变背景，并使用 Flexbox 使登录框在页面上水平垂直居中。

(2).login-box 样式使登录框呈现出圆角、阴影和白色背景，使其看起来像一个独立的卡片。

(3).input-wrapper 容器用来包裹密码输入框和切换显示/隐藏密码的图标（SVG），并使用 position: relative 来定位图标。

(4)定义输入框和按钮的样式，包括悬停（:hover）和聚焦（:focus）效果，增强用户体验。

(5).error-message 样式用来设置错误提示文字的颜色和大小，并初始设置为 display: none，使其在页面加载时是隐藏的。
JavaScript 交互 ：

(1)通过 <script> 标签，编写了页面的动态交互逻辑。

(2)login() 函数：当用户点击登录按钮时，此函数会被调用。它会获取用户输入的用户名和密码，并与预设的固定值进行比较。如果匹配，会弹出一个"登录成功"的提示框并隐藏错误信息；如果不匹配，则会显示之前隐藏的错误提示信息。

(3)togglePassword() 函数：这个函数用来切换密码输入框的类型，使其在 password（隐藏）和 text（明文）之间切换，同时改变 SVG 图标，从闭合的眼睛变为睁开的眼睛，以提供视觉反馈。

二、代码实现

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #74ebd5, #9face6);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-box {
      background: #fff;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.2);
      width: 300px;
      text-align: center;
      position: relative;
    }

    .login-box h2 {
      margin-bottom: 20px;
      color: #333;
    }

    .input-wrapper {
      position: relative;
    }

    
    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      padding-right: 40px; /* 给右边的"眼睛图标"预留空间 */
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      transition: 0.3s;
    }

    input[type="text"]:focus,
    input[type="password"]:focus {
      border-color: #5b9bd5;
      outline: none;
    }

    .toggle-password {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      width: 20px;
      height: 20px;
      fill: #888;
      transition: fill 0.3s;
    }

    .toggle-password:hover {
      fill: #5b9bd5;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #5b9bd5;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
      margin-top: 10px;
      transition: 0.3s;
    }

    button:hover {
      background-color: #4a8ac3;
    }

    .error-message {
      margin-top: 10px;
      color: red;
      font-size: 0.85em;
      display: none;
    }
  </style>
</head>
<body>
  <div class="login-box">
    <h2>Login</h2>
    <input type="text" id="username" placeholder="Username">

    <div class="input-wrapper">
      <input type="password" id="password" placeholder="Password">
      <!-- SVG eye icon -->
      <svg class="toggle-password" id="togglePassword" onclick="togglePassword()" viewBox="0 0 24 24">
        <path d="M12 4.5C7 4.5 2.73 8.11 1 12c1.73 3.89 6 7.5 11 7.5s9.27-3.61 11-7.5c-1.73-3.89-6-7.5-11-7.5zm0 13a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
      </svg>
    </div>

    <button onclick="login()">Login</button>
    <div class="error-message" id="errorMsg">Incorrect username or password</div>
  </div>

  <script>
    let isPasswordVisible = false;

    function togglePassword() {
      const passwordInput = document.getElementById('password');
      const toggleIcon = document.getElementById('togglePassword');

      if (isPasswordVisible) {
        passwordInput.type = 'password';
        toggleIcon.innerHTML = `
          <path d="M12 4.5C7 4.5 2.73 8.11 1 12c1.73 3.89 6 7.5 11 7.5s9.27-3.61 11-7.5c-1.73-3.89-6-7.5-11-7.5zm0 13a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0-2a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
        `;
      } else {
        passwordInput.type = 'text';
        toggleIcon.innerHTML = `
          <path d="M12 6a9.77 9.77 0 0 1 8.94 6A9.77 9.77 0 0 1 12 18a9.77 9.77 0 0 1-8.94-6A9.77 9.77 0 0 1 12 6m0-1.5C7 4.5 2.73 8.11 1 12c1.15 2.59 3.22 4.91 6 6.41L3 22l1.41 1.41 18-18L21 3l-4.41 4.41C16.45 7.14 14.27 6 12 6z"/>
        `;
      }

      isPasswordVisible = !isPasswordVisible;
    }

    function login() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const errorMsg = document.getElementById('errorMsg');

      // 固定的账号密码
      const correctUsername = "admin";
      const correctPassword = "12345";

      if (username === correctUsername && password === correctPassword) {
        alert("Login successful!");
        errorMsg.style.display = "none";
      } else {
        errorMsg.style.display = "block";
      }
    }
  </script>
</body>
</html>

代码拆解：

HTML 部分（页面结构）

html 复制代码

<!DOCTYPE html>：定义了 HTML5 文档类型。
<html lang="en">：根元素，指定页面语言为英语。
<head>：包含文档的属性信息。
<head>
  <meta charset="UTF8">
  <title>Login</title>
定义文档编码为 UTF8，并设置网页标题为 "Login"。
<style>...</style>：包含所有的 CSS 样式规则。
<div class="login-box">：登录界面的主容器，用于布局和样式。
<input type="text" id="username" placeholder="Username">：用户名输入框。
id="username"：为该元素设置一个唯一的 ID，方便 JavaScript 查找。
placeholder="Username"：在输入框为空时显示的提示文本。
<div class="input-wrapper">：密码输入框和眼球图标的父容器。
<input type="password" id="password" placeholder="Password">：密码输入框。
type="password"：输入内容会被掩盖（如显示为 * 或 •），保护用户隐私。
<svg class="toggle-password" ...>：这是一个 SVG 图标（矢量图），用作切换密码显示状态的按钮。
onclick="togglePassword()"：当用户点击这个 SVG 时，会执行名为 togglePassword 的 JavaScript 函数。
<button onclick="login()">Login</button>：登录按钮。
onclick="login()"：当用户点击按钮时，会执行名为 login 的 JavaScript 函数。
<div class="error-message" id="errorMsg">...</div>：用于显示错误信息的容器。
<script>...</script>：包含所有的 JavaScript 代码。

CSS 部分

css 复制代码

* { ... }：通用选择器，应用到所有元素，用于重置盒模型和字体。
body { ... }：设置页面的背景和布局。
.login-box { ... }：设置登录框的样式，如背景、内边距、圆角、阴影和宽度。
input[type="text"], input[type="password"] { ... }：属性选择器，为这两种输入框设置统一的样式，如宽度、内边距和边框。
.toggle-password { ... }：设置 SVG 图标的样式。
position: absolute;：允许它相对于其父元素 .input-wrapper 进行精确定位。
top: 50%; transform: translateY(-50%);：这是一种居中技巧，使图标在父容器中垂直居中。

前端入门——案例一：登录界面设计（html+css+js）

基础介绍

4. <div> ... </div>

5. 总结区别

基础语法

1. HTML 基础语法

基本结构：

2. CSS 基础语法

常见选择器：

常见属性：

3. JavaScript 基础语法

变量

数据类型

条件 & 循环

函数

DOM操作（Document Object Model，JS 操作 HTML）

4. 三者关系

案例------登录界面设计

任务说明

最终效果如图所示：

一、整体设计思路

自定义设计说明

代码思路

二、代码实现

代码拆解：

HTML 部分（页面结构）

CSS 部分

4. `<div> ... </div>`