1.实现如图所示图书新增界面 2.点击新增按钮，将图书信息展示在页面中

要在网页上实现如图所示的图书新增界面，你需要考虑以下几个步骤：

1. **HTML布局**：
创建一个包含标题、输入框（书名、作者、出版社等）、下拉选择框（类别）以及新增按钮的基本结构。例如：

   <form id="bookForm">
       <label for="title">书名:</label>
       <input type="text" id="titleInput"><br>
       <label for="author">作者:</label>
       <input type="text" id="authorInput"><br>
       <label for="publisher">出版社:</label>
       <input type="text" id="publisherInput"><br>
       <label for="category">类别:</label>
       <select id="categorySelect">
           <option value="">请选择</option>
           <!-- 添加各类别选项 -->
       </select><br>
       <button type="submit">新增</button>
   </form>

2. **CSS样式**：
对表单元素添加适当的样式，使其看起来更直观，比如设置输入框的宽度、边距等。

3. **JavaScript功能**：
- 当用户点击新增按钮时，需要阻止其默认行为（防止表单提交刷新页面），并获取输入框的数据。

   const bookForm = document.getElementById('bookForm');
   bookForm.addEventListener('submit', function(e) {
       e.preventDefault(); // 阻止表单提交

       const title = document.getElementById('titleInput').value;
       const author = document.getElementById('authorInput').value;
       const publisher = document.getElementById('publisherInput').value;
       const category = document.getElementById('categorySelect').value;

       // 这里可以进一步处理数据，如发送到服务器或显示在一个弹窗中
       console.log('新图书信息:', { title, author, publisher, category });
   });

4. **动态添加或删除书籍列表**：
如果你想实时显示已有的图书列表，可以在另一个区域利用JavaScript遍历数据结构，并生成HTML展示出来。

至于第二个需求，当点击新增按钮时，确实会获取输入的信息并在相应位置（可能是表格、列表或其他容器）插入新行，展示图书信息。这通常是配合服务器端的操作一起完成的，因为浏览器本身并不存储数据。