java-web/docs/tasks/chapter03-tasks.md

## 3. 前端技术


### 第一部分：响应式设计与Bootstrap（30分钟）

1. **Bootstrap快速入门**
    - **目标**：熟悉Bootstrap的基本安装和使用。
    - **步骤**：
        1. 创建一个新的HTML文件，引入Bootstrap的CDN链接。
        2. 使用Bootstrap的栅格系统创建一个简单的响应式布局。
        3. 添加一些Bootstrap组件，如按钮、导航栏等。

2. **响应式布局练习**
    - **目标**：使用Bootstrap栅格系统创建一个简单的响应式布局。
    - **步骤**：
        1. 使用12列栅格系统创建一个包含标题、正文内容和侧边栏的布局。
        2. 当屏幕宽度减小时，布局应该自动调整以适应小屏幕设备。

#### 第二部分：AJAX与异步请求处理（45分钟）

1. **Fetch API练习**
    - **目标**：使用Fetch API发送GET和POST请求。
    - **步骤**：
       1. 创建一个HTML文件，包含一个按钮和一个输出结果的区域。
       2. 使用Fetch API发送GET请求到 https://jsonplaceholder.typicode.com/posts。
       3. 显示接收到的数据。
       4. 在页面添加一个简单的表单，使用Fetch API发送POST请求到https://jsonplaceholder.typicode.com/posts，并显示服务器的响应。

2. **jQuery AJAX练习**
    - **目标**：使用jQuery的AJAX方法发送请求。
    - **步骤**：
      1. 创建一个HTML文件，包含一个按钮和一个输出结果的区域。
      2. 使用`$.get()`方法发送GET请求到https://jsonplaceholder.typicode.com/posts
      3. 显示接收到的数据。
      4. 在页面添加一个简单的表单，使用`$.ajax()`方法发送POST请求到https://jsonplaceholder.typicode.com/posts，并显示服务器的响应。


#### 第三部分：XML简介（10分钟）

1. **XML文档创建**
    - **目标**：创建一个简单的XML文档。
    - **步骤**：
        1. 创建一个XML文件，包含一个描述书籍的信息。
        2. 包括书名、作者、出版日期等信息。
        3. 使用注释和处理指令。
        4. 验证XML文档是否符合规范。


#### 第四部分：JSON简介（15分钟）

1. **JSON文档创建**
    - **目标**：创建一个简单的JSON文档。
    - **步骤**：
        1. 创建一个JSON文件，包含一个描述个人的信息。
        2. 包括姓名、年龄、地址等信息。
        3. 使用嵌套的对象和数组。