html渲染

作者：幸福的起点发布日期:2025-03-02 浏览:402

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 渲染示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到 HTML 渲染示例页面</h1>
        <p>这是一个简单的 HTML 页面，用于演示如何使用 HTML 和 CSS 进行渲染。</p>
        <button onclick="changeColor()">点击我改变颜色</button>
    </div>

    <script>
        function changeColor() {
            document.querySelector('.container').style.backgroundColor = '#ffcccc';
        }
    </script>
</body>
</html>

解释说明：

HTML 结构:
- <!DOCTYPE html> 声明文档类型为 HTML5。
- <html lang="en"> 定义了文档的语言为英语。
- <head> 包含元数据（如字符集、视口设置、标题等）和样式定义。
- <body> 包含页面的主要内容，包括一个带有样式的容器、标题、段落和按钮。
CSS 样式:
- 使用内联 <style> 标签定义了一些基本的样式，例如字体、容器宽度、边距、内边距、边框和背景颜色。
JavaScript 功能:
- 在 <script> 标签中定义了一个简单的 JavaScript 函数 changeColor()，当用户点击按钮时，它会改变 .container 元素的背景颜色。

上一篇：html基础教程

下一篇：html网页表单设计