html+css+javascript网页制作

作者：以往沧海发布日期:2026-01-24 浏览:59

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML + CSS + JavaScript 网页制作示例</title>
    <style>
        /* 内部样式表 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        main {
            padding: 20px;
        }
        button {
            padding: 10px 20px;
            background-color: #555;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #777;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的网页</h1>
    </header>
    <main>
        <p id="message">点击按钮改变这段文字。</p>
        <button onclick="changeText()">点击我</button>
    </main>

    <script>
        // JavaScript 代码
        function changeText() {
            document.getElementById('message').innerText = '你点击了按钮！';
        }
    </script>
</body>
</html>

解释说明：

HTML 部分:
- <!DOCTYPE html> 声明文档类型。
- <html lang="zh-CN"> 设置语言为简体中文。
- <head> 包含元数据、标题和样式信息。
- <body> 是页面的主体内容，包含一个头部 (<header>) 和主要内容区域 (<main>)。
- 按钮 (<button>) 绑定了一个 onclick 事件，点击时会调用 changeText() 函数。
CSS 部分:
- 使用内部样式表定义了页面的样式。
- 设置了背景颜色、字体、按钮样式等。
- 使用了 :hover 伪类来改变按钮悬停时的样式。
JavaScript 部分:
- 定义了一个简单的函数 changeText()，当按钮被点击时，它会更改页面中某个元素的文字内容。

上一篇：javascript ?.

下一篇：javascript编程