htmlcssjavascript各自的作用

作者：巅峰战犯发布日期:2026-06-14 浏览:131

<!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 示例</title>
    <style>
        /* CSS 用于控制页面的样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            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);
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
        button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <!-- HTML 用于定义页面的结构和内容 -->
    <div class="container">
        <h1>HTML、CSS 和 JavaScript 的作用示例</h1>
        <p>这是一个简单的示例，展示了 HTML、CSS 和 JavaScript 各自的作用。</p>
        <button id="myButton">点击我</button>
    </div>

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

解释说明：

HTML (HyperText Markup Language)：用于定义网页的结构和内容。在这个例子中，<h1> 标签定义了一个标题，<p> 标签定义了一段文本，<button> 标签定义了一个按钮。
CSS (Cascading Style Sheets)：用于控制网页的样式和布局。在这个例子中，CSS 被用来设置字体、背景颜色、边距、内边距、阴影效果等，使页面看起来更加美观。
JavaScript：用于为网页添加交互功能。在这个例子中，JavaScript 监听按钮的点击事件，并在用户点击按钮时弹出一个提示框。

上一篇：javascript trim

下一篇：html,css,javascript