## 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基础知识 （掌握）
[HTML常用知识点总结笔记](https://blog.csdn.net/qq_42002794/article/details/118356086)

[使用 HTML 构建 Web](https://developer.mozilla.org/zh-CN/docs/Learn/HTML)

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。
HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作

HTML 元素（标签）:
![](./resources/imgs/grumpy-cat-small.png)

这个元素的主要部分有：
```
    开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
    内容（Content）：元素的内容，本例中就是段落的文本。
    结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。
```
元素也可以拥有属性，属性看起来像这样：
![](./resources/imgs/grumpy-cat-attribute-small.png)
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性是一个识别名称，以后为元素设置样式信息时更加方便。

属性必须包含：
```
   一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
    属性名称，后面跟着一个等于号。
    一个属性值，由一对引号（""）引起来。
```


#### 2.2.2 CSS3样式和布局 (了解)

[CSS基础知识整理](https://zhuanlan.zhihu.com/p/68801601)

[学习使用 CSS 为 HTML 添加样式](https://developer.mozilla.org/zh-CN/docs/Learn/CSS)

#### 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个字符。
- **Unicode：** 一种国际字符编码标准，支持世界上几乎所有的字符。
- - **UTF-8：** 基于Unicode的编码，兼容ASCII，广泛用于Web页面。
- - **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代码。