【前端入门】小白也能懂！用登录页面示例给你讲清楚前端三剑客

原创 已于 2025-05-07 07:45:51 修改 · 467 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html #css #javascript #web开发基础

于 2025-04-19 23:59:28 首次发布

作者：唐叔在学习
专栏：唐叔学前端
更新时间：2025-04-19
关键词：前端入门、通俗讲解、Web开发基础、HTML、CSS、JavaScript

各位优快云的小伙伴们好，我是你们的老朋友唐叔。python入门的系列专栏内容 已经告一段落了，接下来将是前端的入门知识，要知道python本身也可以作为后端语言，所以今天我就带大家打开前端世界的大门！让你成为 全栈小能手 吧。

前端开发就像搭积木：HTML是骨架，CSS是外衣，JavaScript是灵魂。这三剑客组合起来，就能创造出炫酷的交互式网页。

文章目录

一、HTML：网页的结构骨架

HTML（HyperText Markup Language）是网页的基础构建块，它通过标签来定义内容结构。

下面以常见的登录页面为例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
</head>
<body>
    <div>
        <div>
            <h1>欢迎登录</h1>
            <p>请输入您的账号和密码</p>
        </div>
        <form>
            <div>
                <label for="username">用户名</label>
                <input type="text" name="username" placeholder="请输入用户名">
                <div></div>
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password" name="password" placeholder="请输入密码">
                <div></div>
            </div>
            <button type="submit">登录</button>
        </form>
        <div>
            <a href="#">忘记密码?</a>
            <span> | </span>
            <a href="#">注册新账号</a>
        </div>
    </div>
</body>
</html>

显示效果

在这里插入图片描述

可以发现：HTML 只能简单的构筑网页的内容，但是反过来也可以理解仅通过 HTML 就可以构建任何网页的内容了。

二、CSS：让网页美起来

CSS（Cascading Style Sheets）是一种样式表语言，用来描述 HTML文档的呈现方式。简单说：在HTML构建网页内容的基础上，对网页进行美化。

以登录页面为例，在原来的页面基础上增加CSS样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .login-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            transition: all 0.3s ease;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            border-color: #4285f4;
            outline: none;
        }

        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            height: 18px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .error-message.show {
            opacity: 1;
        }

        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        .login-button:hover {
            background-color: #3367d6;
        }

        .login-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .shake {
            animation: shake 0.5s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        .additional-links {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
        }

        .additional-links a {
            color: #4285f4;
            text-decoration: none;
        }

        .additional-links a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>欢迎登录</h1>
            <p>请输入您的账号和密码</p>
        </div>
        <form>
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" name="username" placeholder="请输入用户名">
                <div class="error-message"></div>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" name="password" placeholder="请输入密码">
                <div class="error-message"></div>
            </div>
            <button type="submit" class="login-button">登录</button>
        </form>
        <div class="additional-links">
            <a href="#">忘记密码?</a>
            <span> | </span>
            <a href="#">注册新账号</a>
        </div>
    </div>
</body>
</html>

注意：这里 css 内容需要用 <style></style> 包裹起来，才能生效。

显示效果

在这里插入图片描述

很显然，增加CSS美化后，登录页面明显会更加美观。

三、JavaScript：网页的交互逻辑

JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。在Web网页场景，通过 JavaScript，可以实现各种网页交互，极大地提高用户体验。

以包含HTML+CSS+JS后完整的登录页面为例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .login-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            transition: all 0.3s ease;
        }

        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-header h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 14px;
        }

        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-group input:focus {
            border-color: #4285f4;
            outline: none;
        }

        .error-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            height: 18px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .error-message.show {
            opacity: 1;
        }

        .login-button {
            width: 100%;
            padding: 12px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }

        .login-button:hover {
            background-color: #3367d6;
        }

        .login-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .shake {
            animation: shake 0.5s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        .additional-links {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
        }

        .additional-links a {
            color: #4285f4;
            text-decoration: none;
        }

        .additional-links a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="login-container" id="loginContainer">
        <div class="login-header">
            <h1>欢迎登录</h1>
            <p>请输入您的账号和密码</p>
        </div>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
                <div class="error-message" id="usernameError"></div>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请输入密码">
                <div class="error-message" id="passwordError"></div>
            </div>
            <button type="submit" class="login-button" id="loginButton">登录</button>
        </form>
        <div class="additional-links">
            <a href="#">忘记密码?</a>
            <span> | </span>
            <a href="#">注册新账号</a>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            const usernameError = document.getElementById('usernameError');
            const passwordError = document.getElementById('passwordError');
            const loginButton = document.getElementById('loginButton');
            const loginContainer = document.getElementById('loginContainer');

            // 表单提交事件
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // 验证用户名
                const username = usernameInput.value.trim();
                if (!username) {
                    showError(usernameError, '请输入用户名');
                    shakeElement(usernameInput);
                    return;
                } else if (username.length < 4) {
                    showError(usernameError, '用户名至少4个字符');
                    shakeElement(usernameInput);
                    return;
                } else {
                    hideError(usernameError);
                }

                // 验证密码
                const password = passwordInput.value.trim();
                if (!password) {
                    showError(passwordError, '请输入密码');
                    shakeElement(passwordInput);
                    return;
                } else if (password.length < 6) {
                    showError(passwordError, '密码至少6个字符');
                    shakeElement(passwordInput);
                    return;
                } else {
                    hideError(passwordError);
                }

                // 模拟登录过程
                simulateLogin(username, password);
            });

            // 输入时实时验证
            usernameInput.addEventListener('input', function() {
                const username = usernameInput.value.trim();
                if (username && username.length >= 4) {
                    hideError(usernameError);
                }
            });

            passwordInput.addEventListener('input', function() {
                const password = passwordInput.value.trim();
                if (password && password.length >= 6) {
                    hideError(passwordError);
                }
            });

            // 显示错误信息
            function showError(element, message) {
                element.textContent = message;
                element.style.opacity = '1';
            }

            // 隐藏错误信息
            function hideError(element) {
                element.style.opacity = '0';
            }

            // 抖动效果
            function shakeElement(element) {
                element.classList.add('shake');
                setTimeout(() => {
                    element.classList.remove('shake');
                }, 500);
            }

            // 模拟登录
            function simulateLogin(username, password) {
                loginButton.disabled = true;
                loginButton.textContent = '登录中...';

                // 模拟API请求延迟
                setTimeout(() => {
                    // 这里应该是真实的API调用
                    // 为了演示，我们假设用户名为"admin"，密码为"123456"时登录成功
                    if (username === 'admin' && password === '123456') {
                        loginSuccess();
                    } else {
                        loginFailed();
                    }
                }, 1500);
            }

            // 登录成功
            function loginSuccess() {
                loginContainer.innerHTML = `
                    <div class="login-header" style="padding: 20px 0;">
                        <h1 style="color: #4CAF50;">登录成功!</h1>
                        <p>欢迎回来，${usernameInput.value.trim()}</p>
                    </div>
                    <div style="text-align: center; margin-top: 30px;">
                        <p>正在跳转到首页...</p>
                    </div>
                `;

                // 实际应用中这里应该是页面跳转
                setTimeout(() => {
                    alert('在实际应用中，这里会跳转到首页');
                }, 2000);
            }

            // 登录失败
            function loginFailed() {
                showError(passwordError, '用户名或密码错误');
                shakeElement(loginContainer);
                loginButton.disabled = false;
                loginButton.textContent = '登录';
            }
        });
    </script>
</body>
</html>

注意：这里 JavaScript 内容需要使用 <script></script> 标签包裹起来。

显示效果

在这里插入图片描述

在原本的页面显示效果上，添加JavaScript后，就像页面注入了灵魂。

四、现代前端开发工具链

  1. 代码编辑器：VS Code + ESLint插件
  2. 版本控制：Git + GitHub
  3. 包管理：npm/yarn/pnpm
  4. 构建工具：Vite/Webpack
  5. 框架选型：
    • 入门推荐：Vue.js
    • 企业级：React
    • 全栈向：Next.js/Nuxt.js

五、学习路线建议

下面是唐叔给出的前端学习路线建议：
HTML基础
CSS布局
JavaScript核心
ES6+特性
前端框架
工程化实践
性能优化

结语：开始你的第一个项目吧！

看完这篇入门指南，建议立即动手实践：

  1. 用HTML+CSS仿写你喜欢的网站首页
  2. 用JavaScript实现一个TODO List应用
  3. 部署到GitHub Pages展示你的作品

记住唐叔的话：“前端开发没有捷径，但正确的学习方法能让你少走弯路！” 下期我会带大家深入html常见的标签，记得点关注不迷路~

参考资料： 面向开发者的 Web 技术

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐叔在学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值