编程马·菜鸟教程

Appearance

14. HTML与CSS、JS的联动（衔接前序教程，形成前端闭环） ​

14.1 HTML与CSS联动 ​

基本原理 ​

HTML与CSS的联动是通过选择器和属性来实现的。CSS通过选择器定位HTML元素，然后应用样式规则。

给HTML标签添加class、id ​

html
<!-- 使用class -->
<div class="container">内容</div>

<!-- 使用id -->
<div id="header">头部</div>

<!-- 同时使用class和id -->
<div id="main" class="container">主要内容</div>

CSS选择器 ​

css
/* 标签选择器 */
div {
    color: red;
}

/* 类选择器 */
.container {
    width: 100%;
}

/* ID选择器 */
#header {
    background-color: blue;
}

/* 后代选择器 */
.container p {
    font-size: 14px;
}

/* 伪类选择器 */
a:hover {
    color: green;
}

14.2 HTML与JS联动 ​

基本原理 ​

HTML与JS的联动是通过DOM（文档对象模型）来实现的。JS通过DOM API获取HTML元素，然后修改其属性或内容。

给HTML元素添加事件 ​

html
<!-- 内联事件 -->
<button onclick="alert('点击了按钮')">点击我</button>

<!-- 通过JS添加事件 -->
<button id="myButton">点击我</button>
<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('点击了按钮');
    });
</script>

常用事件 ​

事件描述
click点击事件
mouseover鼠标悬停事件
mouseout鼠标离开事件
keydown键盘按下事件
keyup键盘松开事件
focus获取焦点事件
blur失去焦点事件
submit表单提交事件
load页面加载完成事件
resize窗口大小改变事件

14.3 常见联动场景 ​

按钮点击 ​

html
<button id="changeText">点击改变文本</button>
<p id="demo">这是原始文本</p>

<script>
    document.getElementById('changeText').addEventListener('click', function() {
        document.getElementById('demo').textContent = '文本已改变';
    });
</script>

表单验证 ​

html
<form id="myForm">
    <input type="text" id="username" placeholder="请输入用户名">
    <button type="submit">提交</button>
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const username = document.getElementById('username').value;
        if (username === '') {
            alert('请输入用户名');
        } else {
            alert('表单提交成功');
        }
    });
</script>

图片切换 ​

html
<img id="myImage" src="image1.jpg" alt="图片1" width="300">
<button id="prev">上一张</button>
<button id="next">下一张</button>

<script>
    const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    let currentIndex = 0;
    const img = document.getElementById('myImage');
    
    document.getElementById('prev').addEventListener('click', function() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        img.src = images[currentIndex];
        img.alt = '图片' + (currentIndex + 1);
    });
    
    document.getElementById('next').addEventListener('click', function() {
        currentIndex = (currentIndex + 1) % images.length;
        img.src = images[currentIndex];
        img.alt = '图片' + (currentIndex + 1);
    });
</script>

14.4 新手友好：联动代码示例 ​

示例1：点击切换背景颜色 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML与JS联动示例</title>
    <style>
        body {
            transition: background-color 0.5s ease;
        }
    </style>
</head>
<body>
    <h1>点击按钮切换背景颜色</h1>
    <button id="changeColor">切换颜色</button>
    
    <script>
        const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
        let currentIndex = 0;
        
        document.getElementById('changeColor').addEventListener('click', function() {
            currentIndex = (currentIndex + 1) % colors.length;
            document.body.style.backgroundColor = colors[currentIndex];
        });
    </script>
</body>
</html>

示例2：表单验证 ​

html
<!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>
        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>表单验证</h1>
    <form id="myForm">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
            <span id="usernameError" class="error"></span>
        </div>
        <br>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email">
            <span id="emailError" class="error"></span>
        </div>
        <br>
        <button type="submit">提交</button>
    </form>
    
    <script>
        document.getElementById('myForm').addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;
            
            // 验证用户名
            const username = document.getElementById('username').value;
            const usernameError = document.getElementById('usernameError');
            if (username === '') {
                usernameError.textContent = '请输入用户名';
                isValid = false;
            } else {
                usernameError.textContent = '';
            }
            
            // 验证邮箱
            const email = document.getElementById('email').value;
            const emailError = document.getElementById('emailError');
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                emailError.textContent = '请输入有效的邮箱';
                isValid = false;
            } else {
                emailError.textContent = '';
            }
            
            if (isValid) {
                alert('表单提交成功');
            }
        });
    </script>
</body>
</html>

14.5 实战：编写HTML结构，配合简单CSS美化和JS交互 ​

实战目标 ​

创建一个包含HTML结构、CSS美化和JS交互的完整网页。

代码示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML+CSS+JS联动实战</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }
        
        /* 容器 */
        .container {
            width: 90%;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部 */
        header {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        /* 卡片 */
        .card {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        /* 按钮 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        /* 隐藏内容 */
        .hidden {
            display: none;
        }
        
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>HTML+CSS+JS联动实战</h1>
            <p>点击按钮查看效果</p>
        </header>
        
        <div class="card">
            <h2>交互示例</h2>
            <p>点击下面的按钮，显示隐藏的内容：</p>
            <button class="btn" id="toggleBtn">显示内容</button>
            <div id="hiddenContent" class="hidden fade-in">
                <h3>隐藏的内容</h3>
                <p>这是通过JavaScript控制显示和隐藏的内容。</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
        
        <div class="card">
            <h2>计数器示例</h2>
            <p>点击按钮增加计数：</p>
            <button class="btn" id="countBtn">点击计数</button>
            <p>当前计数：<span id="counter">0</span></p>
        </div>
        
        <div class="card">
            <h2>颜色选择器</h2>
            <p>选择颜色改变背景：</p>
            <input type="color" id="colorPicker" value="#3498db">
        </div>
    </div>
    
    <script>
        // 显示/隐藏内容
        document.getElementById('toggleBtn').addEventListener('click', function() {
            const content = document.getElementById('hiddenContent');
            const button = this;
            
            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                button.textContent = '隐藏内容';
            } else {
                content.classList.add('hidden');
                button.textContent = '显示内容';
            }
        });
        
        // 计数器
        let count = 0;
        document.getElementById('countBtn').addEventListener('click', function() {
            count++;
            document.getElementById('counter').textContent = count;
        });
        
        // 颜色选择器
        document.getElementById('colorPicker').addEventListener('change', function() {
            document.body.style.backgroundColor = this.value;
        });
    </script>
</body>
</html>

小结 ​

HTML与CSS、JS的联动是前端开发的核心，通过这种联动，可以创建出功能完整、交互丰富的网页。HTML提供结构，CSS提供样式，JS提供交互，三者相辅相成，共同构成了现代前端开发的基础。在实际开发中，应该注重三者的配合，创建出既美观又实用的网页。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建