java-web/docs/chapter02.md

## 2. web页面开发基础

### 2.1 HTTP协议(重点掌握)

推荐阅读 [《图解http》读书笔记](https://juejin.cn/post/6903526294806331400)  [pdf下载](./resources/《图解http》读书笔记%20-%20掘金.pdf)

[PPT](./resources/HTTP协议-黑马.pptx)

#### 2.1.1 浏览器与Web服务器的工作流程
- **请求过程：** 用户在浏览器中输入URL地址后，浏览器向服务器发送HTTP请求。
- **响应过程：** 服务器接收到请求后处理并返回HTTP响应给浏览器。
- **交互细节：** 包括DNS解析、建立TCP连接、发送HTTP请求、接收HTTP响应、关闭连接等步骤。

#### 2.1.2 HTTP请求与响应结构
- **请求行：** 包含方法、URL、HTTP版本。
- **请求头：** 包含客户端信息、认证信息等。
- **请求体：** 包含POST请求的数据。
- **响应行：** 包含HTTP版本、状态码、状态消息。
- **响应头：** 包含服务器信息、缓存控制等。
- **响应体：** 包含服务器返回的数据。

#### 2.1.3 URL
- **构成：** 协议、主机名、端口号、路径、查询字符串。
- **示例：** `https://example.com/path/to/resource?param1=value1&param2=value2`

#### 2.1.4 HTTP方法
- **GET：** 请求指定的页面信息并将其返回。
- **POST：** 向指定资源提交数据进行处理请求（例如提交表单）。
- **PUT：** 从客户端向服务器发送新的数据，并要求服务器覆盖原位置上的数据。
- **DELETE：** 请求服务器删除指定的页面。

#### 2.1.5 HTTP状态码
- **2xx 成功：** 请求已成功被服务器接收、理解，并接受。
    - **200 OK：** 请求已成功，请求所希望的响应头或数据体将随此响应返回。
- **3xx 重定向：** 需要客户端采取进一步的操作才能完成请求。
    - **301 Moved Permanently：** 请求的资源已被永久移动到新位置。
    - **302 Found：** 服务器目前从不同位置的资源响应请求，但请求者应继续使用原有位置来进行以后的请求。
- **4xx 客户端错误：** 请求包含语法错误或无法完成请求。
    - **400 Bad Request：** 服务器不理解请求的语法。
    - **401 Unauthorized：** 请求要求用户的身份认证。
    - **403 Forbidden：** 服务器理解请求客户端的请求，但是拒绝执行此请求。
    - **404 Not Found：** 请求失败，请求所希望得到的资源未被在服务器上发现。
- **5xx 服务器错误：** 服务器在处理请求的过程中发生了错误。
    - **500 Internal Server Error：** 服务器遇到某种不可预知的情况。
    - **503 Service Unavailable：** 由于临时的服务器维护或者过载，服务器当前无法处理请求。

#### 2.1.6 Cookie和Session
- **Cookie：**
    - 存储在客户端的小型文本文件，用于跟踪用户状态。
    - 可以设置有效期、路径、域名、安全标志等属性。
- **Session：**
    - 服务器端用来跟踪用户状态的一种机制。
    - Session 通常使用Cookie来传递Session ID。
    - 服务器通过Session ID来查找与特定用户相关的数据。

### 2.2 HTML/CSS/JavaScript基础

[PPT](./resources/网页开发基础-黑马.pptx)

#### 2.2.1 HTML5基础知识 （掌握）
- **标签与属性：** HTML5引入了新的语义标签如`<header>`、`<nav>`、`<section>`、`<article>`等。
- **表单控件：** 新增了多种类型的输入字段，如日期选择器、电子邮件验证等。
- **媒体元素：** `<video>`和`<audio>`标签用于嵌入多媒体内容。
- **离线存储：** `localStorage`和`sessionStorage`提供了持久化的存储能力。
- **拖放API：** 支持文件的拖放操作。
- **Canvas绘图：** `<canvas>`标签用于绘制图形和动画。

#### 2.2.2 CSS3样式和布局 (了解)
- **选择器：** 更强大的选择器，如属性选择器、伪类选择器等。
- **盒模型：** 支持`box-sizing`属性来控制元素的尺寸计算方式。
- **背景与边框：** 圆角边框、阴影、渐变背景等。
- **文字效果：** 文字阴影、多列布局等。
- **布局：** 弹性盒子（Flexbox）和网格布局（Grid）。
- **动画与过渡：** 使用`transition`和`animation`属性创建平滑的视觉效果。

#### 2.2.3 JavaScript基本语法和DOM操作（掌握)
- **变量声明：** `var`、`let`、`const`。
- **数据类型：** 原始类型（如字符串、数字、布尔值）、复合类型（如数组、对象）。
- **条件语句：** `if`、`else if`、`switch`。
- **循环：** `for`、`while`。
- **函数：** 定义、调用、回调、闭包。
- **DOM操作：** 查询节点、创建节点、修改节点、事件处理等。

#### 2.2.4字符编码和字符集(了解)

[字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx)

- **ASCII：** 7位编码，只能表示128个字符。
- **UTF-8：** 基于Unicode的编码，兼容ASCII，广泛用于Web页面。
- **Unicode：** 一种国际字符编码标准，支持世界上几乎所有的字符。
- **UTF-16：** Unicode的另一种编码形式，JavaScript内部使用UTF-16。

#### 2.2.5 认识TypeScript（简单了解）

[面向初学者的 TypeScript 完全指南](https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide)


- **TypeScript简介：** TypeScript是JavaScript的一个超集，它添加了静态类型检查。
- **类型系统：** TypeScript支持多种数据类型，如`number`、`string`、`boolean`、`object`、`array`等。
- **接口与类：** TypeScript支持面向对象编程，包括类、接口、继承、抽象类等。
- **装饰器：** 一种特殊类型的声明，可以修改类的行为。
- **模块与命名空间：** 用于组织代码结构，避免全局命名冲突。
- **工具与编译：** 使用`tsc`命令将TypeScript代码编译为JavaScript代码。