html css js三者之间的关系

作者：一岁就很帅发布日期:2025-02-13 浏览:108

<!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: #f0f0f0;
        }
        .container {
            width: 80%;
            margin: auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML、CSS 和 JavaScript 的关系</h1>
        <p id="description">这是一个展示 HTML、CSS 和 JavaScript 如何协同工作的例子。</p>
        <button onclick="changeText()">点击我改变文字</button>
    </div>

    <script>
        // JavaScript 用于处理交互逻辑，它可以动态地修改 HTML 和 CSS
        function changeText() {
            document.getElementById('description').innerText = '你刚刚点击了按钮，这是 JavaScript 动态修改的内容。';
        }
    </script>
</body>
</html>

解释说明：

HTML (超文本标记语言):
- HTML 提供了网页的结构和内容。在这个例子中，<div>、<h1>、<p> 和 <button> 标签用来构建页面的基本元素。
CSS (层叠样式表):
- CSS 用于定义 HTML 元素的样式。例如，通过 .container 类来设置容器的宽度、背景颜色、边距等样式；通过 button 标签选择器来设置按钮的样式。
JavaScript:
- JavaScript 用于实现网页的交互功能。在这个例子中，onclick 事件绑定到按钮上，当用户点击按钮时，会调用 changeText() 函数，该函数使用 document.getElementById 来查找并修改 <p> 标签中的文本内容。

三者结合可以创建一个具有丰富视觉效果和交互功能的网页。

上一篇：js innerhtml

下一篇：json转html