mirror of
https://gitee.com/many2many/java-web.git
synced 2025-01-11 22:50:54 +08:00
74 lines
3.5 KiB
Markdown
74 lines
3.5 KiB
Markdown
|
## 1. 概述
|
|||
|
|
|
|||
|
|
### 1.1 Web开发的基本概念
|
|||
|
|
#### 1.1.1 什么是Web应用？
|
|||
|
|
> Web应用是基于 Web 技术开发的应用程序，用户可以通过浏览器访问和使用，而无需下载和安装应用。Web应用可以在不同的设备和平台上运行，无需针对不同的操作系统进行开发和维护，具有较好的跨平台兼容性。
|
|||
|
|
|
|||
|
|
### 1.3 什么是Java Web开发？
|
|||
|
|
> Java Web开发是指使用Java语言来构建和维护可以在Web浏览器上运行的应用程序的过程。这些应用程序通常由服务器端组件和客户端组件组成，服务器端负责处理业务逻辑并提供数据给客户端，而客户端则负责显示数据并允许用户与之交互。
|
|||
|
|
|
|||
|
|
## 2. web页面开发基础
|
|||
|
|
|
|||
|
|
### 2.1 HTTP协议
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.1.1 URI、URL、URN
|
|||
|
|
- URL: Uniform Resource Locator 统一资源定位符
|
|||
|
|
> 是URI的子集，URL包含访问资源所需的协议类型（如HTTP、HTTPS、FTP）和资源的网络位置（如域名和文件路径）
|
|||
|
|
|
|||
|
|
#### 2.1.3 HTTP请求包结构
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.1.4 HTTP请求方法
|
|||
|
|
|
|||
|
|
#### 2.1.5 HTTP请求头
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.1.6 HTTP响应包结构
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.1.7 HTTP状态码
|
|||
|
|
- **200 OK：** 请求成功。
|
|||
|
|
- **404 Not Found：** 请求失败，服务器上没有请求的资源。
|
|||
|
|
- **500 Internal Server Error：** 请求失败，服务器出现未知的内部错误。
|
|||
|
|
|
|||
|
|
#### 2.1.8 HTTP响应头
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.1.9 Cookie
|
|||
|
|
|
|||
|
|
HTTP 是无状态协议，不能以状态来区分和管理请求和响应。也就是说，无法根据之前的状态进行本次的请求处理。
|
|||
|
|
|
|||
|
|
Cookie是为了解决HTTP协议无状态的问题而设计的一种持久化机制，它允许服务器在用户浏览器上存储数据。Cookie 的数据保存在用户浏览器中，服务器可以通过 Cookie 识别用户，从而实现用户个性化。
|
|||
|
|
|
|||
|
|
Cookie 主要用于以下三个方面：
|
|||
|
|
- 会话状态管理
|
|||
|
|
- 个性化设置
|
|||
|
|
- 浏览器行为跟踪
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 2.2 HTML/CSS/JavaScript基础
|
|||
|
|
|
|||
|
|
#### 2.2.1 HTML5基础知识
|
|||
|
|
|
|||
|
|
HTML 元素（标签）的主要部分:
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
|
|||
|
|
内容（Content）：元素的内容，本例中就是段落的文本。
|
|||
|
|
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 2.2.2 CSS
|
|||
|
|
|
|||
|
|
|
|||
|
|
| 选择器类型 | 解释 | 示例 |
|
|||
|
|
| ------------ |-----------------------------------| -------------------------------- |
|
|||
|
|
| **元素选择器** | 也叫标签选择器，通过标签名选取元素 | `p { color: red; }` 选取所有 `<p>` 元素，将文本颜色设置为红色。 |
|
|||
|
|
| **类选择器** | 通过类名选取元素 | `.my-class { font-weight: bold; }` 选取具有类名为 `my-class` 的元素，使其字体加粗。 |
|
|||
|
|
| **ID选择器** | 通过ID名称选取唯一元素 | `#unique-id { background-color: yellow; }` 选取ID为 `unique-id` 的元素，背景色设为黄色。 |
|
|||
|
|
| **通配符选择器** | 匹配所有元素 | `* { margin: 0; padding: 0; }` 选取所有元素，清除默认的外边距和内边距。 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.2.3 JavaScript基本语法和DOM操作
|