请写一个侧边栏便签功能要求便签有的功能都要能实现请写出html代码

以下是一个简单的侧边栏便签功能的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>侧边栏便签</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .sidebar {
      width: 250px;
      background-color: #f1f1f1;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
    }
    .sidebar h2 {
      margin-top: 0;
    }
    .note {
      background-color: #fff;
      border: 1px solid #ddd;
      padding: 10px;
      margin-bottom: 10px;
    }
    .note textarea {
      width: 100%;
      height: 100px;
    }
    .note button {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <h2>便签</h2>
    <div class="note">
      <textarea id="note-input" placeholder="输入便签内容"></textarea>
      <button onclick="saveNote()">保存</button>
    </div>
    <div id="note-list"></div>
  </div>
  <script>
    function saveNote() {
      var noteInput = document.getElementById("note-input");
      var noteList = document.getElementById("note-list");
      var noteText = noteInput.value;
      if (noteText) {
        var note = document.createElement("div");
        note.className = "note";
        note.innerText = noteText;
        noteList.appendChild(note);
        noteInput.value = "";
      }
    }
  </script>
</body>
</html>

该代码实现了一个简单的侧边栏便签功能。用户可以在文本框中输入便签内容，点击保存按钮后，便签将被添加到便签列表中。