html css javascript

作者：绝朢╭ァ发布日期:2025-06-02 浏览:58

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML CSS JavaScript Example</title>
    <style>
        /* 这里是CSS样式部分 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML CSS JavaScript 示例</h1>
        <p id="demo">点击按钮改变这段文字。</p>
        <button onclick="changeText()">点击我</button>
    </div>

    <script>
        // 这里是JavaScript代码部分
        function changeText() {
            document.getElementById("demo").innerHTML = "你点击了按钮！";
        }
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 使用了基本的 HTML 结构，定义了一个标题、一段文本和一个按钮。
- 文本内容在 <p> 标签中，默认显示为“点击按钮改变这段文字。”。
CSS 部分:
- 定义了一些样式来美化页面，包括字体、背景颜色、按钮样式等。
- .container 类用于设置页面内容的宽度和居中显示。
- button 样式设置了按钮的颜色、边距和悬停效果。
JavaScript 部分:
- 定义了一个简单的函数 changeText()，当用户点击按钮时，会调用这个函数。
- 函数通过 document.getElementById("demo").innerHTML 修改 <p> 标签中的文本内容为“你点击了按钮！”。

这个示例展示了如何将 HTML、CSS 和 JavaScript 结合使用来创建一个简单的交互式网页。

上一篇：javascript用alert输出

下一篇：javascript 正则表达式