和：容器标签
```
2.CSS样式表
3.js脚本
## 前端交互知识
根据代码运行的位置，Web应用分为前端和后端技术。网页的交互技术，其实指的就是前端和后端的交互。需要强调的是，浏览器的数据传输（即前后端交互）经历了好几个阶段。最初使用“Form”，后来使用XMLHttpRequest，现在则基本上使用Fetch API。具体请参考“学习资料”中的“网页开发基础”。
### 第一代：原生 Form 表单提交
Form 表单是“Web 1.0”时代唯一的数据提交方式，只适合简单的登录、注册，完全无法做复杂交互。
范例代码
```html
```
### 第二代：XMLHttpRequest
为解决“Form”必须刷新页面的致命问题，让前端可以不刷新页面和服务器通信，2005年，随着“AJAX”概念的提出，XMLHttpRequest开始普及，开启了 Web 2.0 时代。
范例代码
```javascript
// 经典 XHR 写法（繁琐）
const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true); // true = 异步
xhr.onload = function() {
if(xhr.status === 200) {
console.log(xhr.responseText); // 局部更新页面，不刷新
}
};
xhr.send('username=test');
```
### 第三代：Fetch API
“XMLHttpRequest”的设计非常繁琐、不直观，编程难度很大。“Fetch API”于2011年首次提出，2015年被 WHATWG 正式标准化，并在同年开始被主流浏览器原生支持。
范例代码：
```javascript
// 现代简洁写法
async function postData() {
const res = await fetch('/submit', {
method: 'POST',
body: JSON.stringify({ username: 'test' }),
headers: { 'Content-Type': 'application/json' }
});
const data = await res.json();
console.log(data);
}
```
### 表单基础知识
表单的地址和方法：POST、GET
## 数据库基础
数据库基本知识