html js css

作者：缺爱╮不缺钙发布日期:2025-07-02 浏览:12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML JS CSS Example</title>
    <style>
        /* CSS代码：设置body的背景颜色和文本样式 */
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* 设置按钮的样式 */
        .button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* 鼠标悬停时改变按钮的颜色 */
        .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>Welcome to HTML, JS, and CSS!</h1>
    <p>This is a simple example that demonstrates the use of HTML, JavaScript, and CSS.</p>

    <!-- 按钮元素 -->
    <button class="button" id="myButton">Click Me</button>

    <script>
        // JavaScript代码：为按钮添加点击事件监听器
        document.getElementById('myButton').addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

解释说明：

HTML部分：
- 使用<h1>标签定义了一个标题。
- 使用<p>标签定义了一段描述性文字。
- 使用<button>标签创建了一个按钮，并为其设置了id属性，方便通过JavaScript进行操作。
CSS部分：
- 使用<style>标签在<head>中定义了样式规则。
- 设置了body的背景颜色和字体样式。
- 定义了.button类的样式，包括内边距、背景颜色、文本颜色、边框等。
- 使用:hover伪类来改变鼠标悬停时按钮的背景颜色。
JavaScript部分：
- 使用<script>标签在页面底部定义了JavaScript代码。
- 使用document.getElementById获取按钮元素，并为其添加了一个点击事件监听器。
- 当按钮被点击时，会弹出一个警告框显示“Button clicked!”。

上一篇：html css js三者之间的关系

下一篇：json转html