html+css+js

作者：疾风雨辰发布日期:2026-04-06 浏览:70

<!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 Example</title>
    <style>
        /* 这里是CSS部分，用于样式设置 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            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>
    <div class="container">
        <h1>HTML + CSS + JS 示例</h1>
        <p id="message">点击按钮改变这段文字。</p>
        <button onclick="changeMessage()">点击我</button>
    </div>

    <script>
        // 这里是JavaScript部分，用于交互逻辑
        function changeMessage() {
            document.getElementById('message').innerText = '文字已成功改变！';
        }
    </script>
</body>
</html>

解释说明：

HTML:
- 定义了页面的结构，包括标题、段落和按钮。
- <div class="container"> 包含了主要内容，居中显示并设置了内边距和背景色。
CSS:
- 设置了页面的整体样式，如字体、背景颜色、容器样式等。
- .container 类用于设置内容区域的宽度、外边距、内边距和阴影效果。
- button 样式设置了按钮的内边距、字体大小和鼠标指针样式。
JavaScript:
- 定义了一个名为 changeMessage 的函数，当用户点击按钮时，该函数会被调用。
- 函数通过 document.getElementById('message') 获取段落元素，并使用 innerText 属性改变其文本内容。

上一篇：javascript 数据类型

下一篇：html css js