用HTML实现许愿墙

HTML可以用来构建静态网页，而实现一个简单的许愿墙通常会结合CSS样式和JavaScript动态交互。下面是一个基础的步骤描述：

1. **创建HTML结构**：
- 使用`<div>`元素作为容器，给它一个独特的ID，比如`wall-container`。
- 创建若干个`<input>`标签用于用户输入愿望，加上名称属性如`wish-input`。
- 添加`<button>`按钮，让用户提交愿望，可以用`submit-button`作为其ID。

<div id="wall-container">
  <h1>许愿墙</h1>
  <form id="wish-form">
    <label for="wish-input">写下你的愿望:</label>
    <input type="text" id="wish-input" name="wish">
    <button type="button" id="submit-button">许愿</button>
  </form>
  <!-- 这里将会显示许愿列表 -->
</div>

2. **添加CSS样式**：
- 为容器、输入框和按钮设置基本样式，使其看起来整洁美观。

3. **JavaScript交互**：
- 使用JavaScript获取用户的输入并保存到数组或其他数据结构中。
- 当点击提交按钮时，阻止表单默认提交行为，并动态创建一个新的`<p>`元素，包含用户输入的愿望，然后添加到`wall-container`中。

document.getElementById('submit-button').addEventListener('click', function(e) {
  e.preventDefault();
  const wish = document.getElementById('wish-input').value;
  createWishElement(wish);
});

function createWishElement(wish) {
  const newWish = document.createElement('p');
  newWish.textContent = '您的愿望：' + wish;
  document.getElementById('wall-container').appendChild(newWish);
}