正文

网站建设入门：静态与动态站点实战习题解析

/0 浏览量
0827

一、静态站点实战习题解析

1.1 题目一：创建一个简单的HTML页面

题目描述：请创建一个包含标题、段落、图片和链接的简单HTML页面。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个简单的HTML页面。</p>
    <img src="example.jpg" alt="示例图片">
    <a href="https://www.example.com">访问我的博客</a>
</body>
</html>

解析：这个简单的HTML页面包含了一个标题、一个段落、一张图片和一个链接。标题使用<h1>标签，段落使用<p>标签，图片使用<img>标签，链接使用<a>标签。

1.2 题目二：使用CSS美化HTML页面

题目描述：为上述HTML页面添加CSS样式，使其看起来更加美观。

代码示例：

/* 在<head>标签内添加<style>标签 */
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
    }
    h1 {
        color: #333;
        text-align: center;
        margin-top: 50px;
    }
    p {
        color: #666;
        text-align: center;
        margin-top: 20px;
    }
    img {
        display: block;
        margin: 0 auto;
        margin-top: 20px;
    }
    a {
        display: block;
        text-align: center;
        color: #0066cc;
        text-decoration: none;
        margin-top: 20px;
    }
</style>

解析：这里使用了内联CSS来设置页面的字体、背景颜色、段落对齐、图片居中显示以及链接样式。

二、动态站点实战习题解析

2.1 题目三：使用JavaScript创建一个点击按钮切换文本的动态效果

题目描述：创建一个按钮，当用户点击按钮时，页面上显示的文本从“Hello World!”变为“你好，世界！”。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态文本切换</title>
    <script>
        function changeText() {
            var textElement = document.getElementById("dynamicText");
            if (textElement.innerHTML === "Hello World!") {
                textElement.innerHTML = "你好，世界！";
            } else {
                textElement.innerHTML = "Hello World!";
            }
        }
    </script>
</head>
<body>
    <h1>点击按钮切换文本</h1>
    <button onclick="changeText()">切换文本</button>
    <p id="dynamicText">Hello World!</p>
</body>
</html>

解析：这个例子中，我们定义了一个名为changeText的JavaScript函数，该函数通过getElementById方法获取页面中id为dynamicText的元素，并切换其innerHTML属性，从而实现文本的动态变化。

2.2 题目四：使用jQuery实现上述JavaScript功能

题目描述：使用jQuery库替代JavaScript实现上述功能。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态文本切换 - jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#changeTextBtn").click(function(){
                var $textElement = $("#dynamicText");
                $textElement.text($textElement.text() === "Hello World!" ? "你好，世界！" : "Hello World!");
            });
        });
    </script>
</head>
<body>
    <h1>点击按钮切换文本 - jQuery</h1>
    <button id="changeTextBtn">切换文本</button>
    <p id="dynamicText">Hello World!</p>
</body>
</html>

解析：在这个例子中，我们使用了jQuery库来简化DOM操作。当文档加载完成后，我们为按钮添加了一个点击事件监听器，当按钮被点击时，使用jQuery的.text()方法来切换文本内容。

通过以上实战习题，你可以初步了解静态和动态网站的基本构建方法。在实际开发中，这两种技术往往需要结合使用，以实现更丰富的功能和用户体验。

-- 展开阅读全文 --