## 2. web页面开发基础

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

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

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

[TCP/IP网络模型](https://www.cnblogs.com/phpstudy2015-6/p/6804202.html)

#### 2.1.1 URI、URL、URN

- URI = Uniform Resource Identifier 统一资源标志符
> URI是抽象的定义，不管用什么方法表示，只要能定位一个资源，就叫URI. URI包括URL和URN.后来urn没流行起来，导致几乎目前所有的uri都是url。
- URL = Uniform Resource Locator 统一资源定位符
> 是URI的一个子集，又称统一资源定位器、定位地址、URL地址，俗称网址，是因特网上标准的资源的地址，作用是为了告诉使用者某个资源在 Web 上的地址。URL包含访问资源所需的协议类型（如HTTP、HTTPS、FTP）和资源的网络位置（如域名和文件路径）
- URN = Uniform Resource Name 统一资源名称
> 指的是资源而不指定其位置或是否存在. URN 的一个最好的例子是 ISBN 号，它被用来唯一地识别一本书。URN 与 URL 完全不同，因为它不包含任何协议。

三者的关系图示：
![](./resources/uri-url-urn.png)

---

URL结构定义：

![](./resources/url.png)

```text
    模式（ schema ），相当于 URL 的类型，通常用来表示访问协议，比如 HTTP ；
    用户信息（ userinfo ），用于访问资源的用户信息，可选；
    主机（ host ），资源所在主机，可选；
    端口（ port ），资源所在主机端口，可选，不填则使用协议的默认端口；
    路径（ path ），资源所在路径；
    查询（ query ），用于访问资源的参数，比如网页传参，可选；
    片段（ fragment ），指定资源中的某个片段，比如网页中的锚，可选；
```

URL示例分析：
![](./resources/url-example.png)

其他类型URL示例：
```text
    ftp://ftp.is.co.za/rfc/rfc1808.txt
    https://www.ietf.org/rfc/rfc2396.txt
    ldap://[2001:db8::7]/c=GB?objectClass?one
    mailto:John.Doe@example.com
    news:comp.infosystems.www.servers.unix
    telnet://192.0.2.16:80/
    file:///c:/
```

#### 2.1.2 浏览器与web服务器的交互过程

基本过程：

![](./resources/web-flow-with-dns.png)

动态页面交互过程：
![](./resources/web_application_with_html_and_steps.png)

#### 2.1.3 HTTP请求包结构
[HTTP 消息结构](https://www.runoob.com/http/http-messages.html)

![](./resources/imgs/http-request-struct.png)

#### 2.1.4 HTTP请求方法

[HTTP 请求方法](https://www.runoob.com/http/http-methods.html)

#### 2.1.5 HTTP请求头
[HTTP Request Header 请求头](https://stackoverflow.org.cn/httpheader/)

#### 2.1.6 HTTP响应包结构

![](./resources/imgs/http-response-struct.png)

#### 2.1.7 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.8 HTTP请求头
[HTTP Response Header 响应头](https://stackoverflow.org.cn/httpheader/)

#### 2.1.9 Cookie

参考阅读： [HTTP Cookie](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies)

HTTP 是无状态协议，说明它不能以状态来区分和管理请求和响应。也就是说，无法根据之前的状态进行本次的请求处理。
而在实际应用中我们又希望能够保持用户的状态，为解决这个问题，Cookie诞生了，在保留无状态协议这个特征的同时又要解决类似记录状态的矛盾问题。

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据。浏览器会存储 cookie 并在下次向同一服务器再发起请求时携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器——如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。

Cookie 主要用于以下三个方面：

- 会话状态管理
> 如用户登录状态、购物车、游戏分数或其他需要记录的信息
- 个性化设置
> 如用户自定义设置、主题和其他设置
- 浏览器行为跟踪
> 如跟踪分析用户行为等

**创建 Cookie**

服务器收到 HTTP 请求后，服务器可以在响应标头里面添加一个或多个 Set-Cookie 选项。浏览器收到响应后通常会保存下 Cookie，并将其放在 HTTP Cookie 标头内，向同一服务器发出请求时一起发送。你可以指定一个过期日期或者时间段之后，不能发送 cookie。你也可以对指定的域和路径设置额外的限制，以限制 cookie 发送的位置。关于下面提到的头部属性的详细信息，请参考 Set-Cookie 文章。

服务器使用 Set-Cookie 响应头部向用户代理（一般是浏览器）发送 Cookie 信息。这指示服务器发送标头告知客户端存储一对 cookie：
```http
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

```
现在，对该服务器发起的每一次新请求，浏览器都会将之前保存的 Cookie 信息通过 Cookie 请求头部再发送给服务器。
```http
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
```

#### 2.1.10 Session

Session表示会话,服务器端用来跟踪用户状态的一种机制。在java web中session是一个存储在WEB服务器端的java对象，该对象代表用户和WEB服务器的一次会话。
> 那什么才叫一次会话呢？
>> 一般多数情况下，是这样描述的：用户打开浏览器，在浏览器上进行一些操作，然后将浏览器关闭，表示一次会话结束。
>>
>> 本质上的描述：从session对象的创建，到最终session对象超时之后销毁，这个才是真正意义的一次完整会话。

**Session的工作原理与限制**
- 服务器端用来跟踪用户状态的一种机制。
- Session 通常使用Cookie来传递Session ID。
- 服务器通过Session ID来查找与特定用户相关的数据。
- session的使用要求用户浏览器必须支持cookie，如果浏览器不支持使用cookie，或者设置为禁用cookie，那么将不能使用session。

### 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代码。