怎么用html做许愿网页

想要制作一个许愿网页，你可以使用HTML（超文本标记语言）来实现，下面我将为你详细介绍如何制作一个简单的许愿网页，在此之前，请确保你的电脑上已安装文本编辑器（如Notepad++、Sublime Text等）和浏览器（如Chrome、Firefox等）。

创建一个新的HTML文件，在文本编辑器中,输入以下基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>许愿网页</title>
</head>
<body>
</body>
</html>

我们将逐步完善这个网页。

添加网页标题和样式

在<head>标签内，你可以添加一些样式信息,使网页看起来更美观。

<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
        text-align: center;
        padding: 50px;
    }
    h1 {
        color: #333;
    }
</style>

创建许愿标题和文本框

在<body>标签内,添加以下代码：

<h1>许愿墙</h1>
<input type="text" id="wish" placeholder="请输入你的愿望" style="width: 300px; padding: 10px; margin-bottom: 20px;"/>

这里，我们创建了一个文本输入框,让用户输入愿望。

添加许愿按钮和显示区域

继续在<body>标签内添加以下代码：

怎么用html做许愿网页

<button onclick="addWish()">许愿</button>
<div id="wishes" style="margin-top: 30px;"></div>

这里，我们添加了一个按钮和一个用于显示愿望的<div>容器。

编写JavaScript代码

在<body>标签的底部,添加以下JavaScript代码：

<script>
    function addWish() {
        var wish = document.getElementById('wish').value;
        if (wish.trim() === '') {
            alert('请输入愿望！');
            return;
        }
        var wishesDiv = document.getElementById('wishes');
        var newWishDiv = document.createElement('div');
        newWishDiv.innerHTML = wish;
        newWishDiv.style.border = '1px solid #ccc';
        newWishDiv.style.padding = '10px';
        newWishDiv.style.marginBottom = '10px';
        wishesDiv.appendChild(newWishDiv);
        document.getElementById('wish').value = ''; // 清空输入框
    }
</script>

这段代码的作用是：当用户点击“许愿”按钮时，获取输入框中的愿望，将其添加到页面上的愿望显示区域,并清空输入框。

完成网页

至此，一个简单的许愿网页就制作完成了,以下是完整的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>许愿网页</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>许愿墙</h1>
    <input type="text" id="wish" placeholder="请输入你的愿望" style="width: 300px; padding: 10px; margin-bottom: 20px;"/>
    <button onclick="addWish()">许愿</button>
    <div id="wishes" style="margin-top: 30px;"></div>
    <script>
        function addWish() {
            var wish = document.getElementById('wish').value;
            if (wish.trim() === '') {
                alert('请输入愿望！');
                return;
            }
            var wishesDiv = document.getElementById('wishes');
            var newWishDiv = document.createElement('div');
            newWishDiv.innerHTML = wish;
            newWishDiv.style.border = '1px solid #ccc';
            newWishDiv.style.padding = '10px';
            newWishDiv.style.marginBottom = '10px';
            wishesDiv.appendChild(newWishDiv);
            document.getElementById('wish').value = ''; // 清空输入框
        }
    </script>
</body>
</html>

将上述代码保存为“wish.html”，然后用浏览器打开它，你就可以看到一个简单的许愿网页了，你可以在此基础上继续完善和美化网页，发挥你的创意,让更多人通过这个网页实现他们的愿望。

怎么用html做许愿网页