html,css,javascript

作者：堕魂灭天发布日期:2026-05-25 浏览:80

<!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: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- HTML部分 -->
    <div class="container">
        <h1>HTML, CSS, JavaScript 示例</h1>
        <p id="message">点击按钮改变这段文字。</p>
        <button onclick="changeMessage()">点击我</button>
    </div>

    <!-- JavaScript部分 -->
    <script>
        function changeMessage() {
            // 获取元素并修改其内容
            document.getElementById('message').innerText = '你已经成功改变了这段文字！';
        }
    </script>
</body>
</html>

解释说明：

HTML部分：定义了页面的结构，包括一个标题、一段文本和一个按钮。<p>标签内的文本会在点击按钮后被修改。
CSS部分：设置了页面的基本样式，如字体、背景颜色、容器的宽度和居中对齐等。按钮也有简单的样式设置。
JavaScript部分：包含了一个简单的函数changeMessage()，当点击按钮时调用此函数，修改<p>标签中的文本内容。

希望这个示例能帮助你理解HTML、CSS和JavaScript的基本用法。

上一篇：javascript trim

下一篇：javascript 字符串替换