html/css/js 的关系

作者：碎花洋裙的优雅发布日期:2025-09-24 浏览:82

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML/CSS/JS 的关系</title>
    <style>
        /* CSS 用于样式化 HTML 元素 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .button {
            padding: 10px 20px;
            background-color: blue;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>HTML/CSS/JS 的关系</h1>
    <p>HTML 提供结构，CSS 提供样式，JavaScript 提供交互。</p>
    <button class="button" id="myButton">点击我</button>

    <script>
        // JavaScript 用于添加交互功能
        document.getElementById('myButton').addEventListener('click', function() {
            alert('你点击了按钮！');
        });
    </script>
</body>
</html>

解释说明：

HTML (HyperText Markup Language):
- HTML 提供网页的结构和内容。在上面的例子中，<h1>、<p> 和 <button> 标签定义了页面的标题、段落和按钮。
CSS (Cascading Style Sheets):
- CSS 用于样式化 HTML 元素，使页面看起来更美观。在这个例子中，<style> 标签内的代码设置了字体、背景颜色和按钮的样式。
JavaScript:
- JavaScript 为网页提供交互功能。在这个例子中，<script> 标签内的代码为按钮添加了一个点击事件监听器，当用户点击按钮时，会弹出一个提示框。

上一篇：js 判断奇数偶数

下一篇：js 隐藏滚动条