html,css,js之间的关系

作者：ι错过了发布日期:2025-12-15 浏览:25

<!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 之间的关系</title>
    <style>
        /* CSS 用于样式化 HTML 元素 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }

        header {
            background: #50b3a2;
            color: white;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
        }

        header h1 {
            margin: 0;
            text-align: center;
            padding: 0;
        }

        button {
            background-color: #e8491d;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>HTML, CSS, JS 之间的关系</h1>
        </div>
    </header>

    <div class="container">
        <section id="content">
            <p>HTML 提供了页面的结构，CSS 用来美化这些结构，而 JavaScript 则为页面添加交互功能。</p>
            <button onclick="changeColor()">点击改变颜色</button>
        </section>
    </div>

    <script>
        // JavaScript 用于处理交互逻辑
        function changeColor() {
            document.body.style.backgroundColor = '#ffcccb';
            document.querySelector('button').textContent = '颜色已改变';
        }
    </script>
</body>
</html>

解释说明：

HTML (HyperText Markup Language):
- HTML 提供了网页的基本结构。在这个例子中，<header> 和 <div> 标签定义了页面的布局和内容。
CSS (Cascading Style Sheets):
- CSS 用于样式化 HTML 元素。例如，body 的背景颜色、字体，以及按钮的样式都是通过 CSS 来设置的。
JavaScript:
- JavaScript 用于处理用户交互。在这个例子中，onclick 事件触发 changeColor 函数，该函数会改变页面背景颜色并更新按钮文本。

通过这三者的结合，我们可以创建一个既美观又具有交互性的网页。

上一篇：html js css

下一篇：json转html