HTML + HTTP请求 +CSS知识点

HTML + HTTP请求 +CSS知识点
文章目录
- HTML
- 1.HTML元素
  2.HTML页面
  3.常见元素
  1）文本
  2）多媒体
  3）表单
  作用与语法
  常见表单项
  案例体验
  
  4.HTTP请求
  1）请求组成
  2）请求方式与数据格式
  get 请求示例
  post 请求（默认格式）示例
  json 请求（post请求json格式）示例
  multipart 请求（post请求multipart格式）示例
  
  3) session 原理
  4) jwt 原理
  
  5. CSS
  1) 选择器
  2) 属性和值
  3) 布局
HTML

在Vscode安装idea插件——快捷键使用

 1.HTML元素

HTML有各种标签（元素）构成！
- 元素有起始和结束标签
- 标签包围起来的称为内容
- 元素有属性
- id属性是元素的唯一标识
- 元素之间可以嵌套
- 不包含元素内容的成为空元素，如：
```
<img src="1.png">
<img src="1.png"/>
1
2
```
2.HTML页面
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello htmltitle>
head>
<body>
    我是html
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
```
- html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
- head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
- body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素
3.常见元素

 1）文本

标题
```
    <h1>我是标题h1>
    <h2>我是标题h2>
    <h3>我是标题h3>
    <h4>我是标题h4>
    <h5>我是标题h5>
    <h6>我是标题h6>
1
2
3
4
5
6
```
段落
```
<p>段落p>
1
```
列表

无序列表
```
<ul>
    <li>1li>
    <li>2li>
    <li>3li>
ul>
1
2
3
4
5
```
有序列表
```
<ol>
    <li>1li>
    <li>2li>
    <li>3li>
ol>
1
2
3
4
5
```
多级列表
```
<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区li>
            <li>朝阳区li>
            <li>昌平区li>
        ul>
    li>
    <li>
    	河北省
        <ul>
            <li>石家庄li>
            <li>保定li>
        ul>
    li>
ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
超链接
```
<a href="网页地址">超链接文本a>

<a href="http://www.baidu.com">点我a>
1
2
3
```
2）多媒体

图片
```
<img src="文件路径">
1
```
src 格式有 3 种
- 文件地址
- data URL，格式如下
```
data:媒体类型;base64,数据
1
```
- object URL，需要配合 javascript 使用
视频
```
<video src="文件路径">video>
1
```
音频
```
<audio src="文件路径">audio>
1
```
3）表单

注意：表单只能发post或者get请求

get：数据跟在URI后面

post：数据在请求体中

作用与语法

作用：表单用于收集用户填入的数据，并将这些数据提交给服务器

语法：
```
<form action="服务器地址" method="请求方式" enctype="数据格式">
    
    
    // 提交表单数据 submit
    <input type="submit" value="提交按钮">
form>
1
2
3
4
5
6
```
- method有两种请求方式：
  - get（默认）提交时数据跟在URL地址后面
  - post提交时数据跟在请求体内
- enctype：在post请求时，指定请求的数据格式
  - application/x-www-form-urlencoded（默认）
  - multipart/form-data（表单涉及文件时必须要用这个数据格式格式）
- 其中表单项提供多种收集数据的方式
  - 有name属性的表单项数据，才会被发送给服务器（为此后端要有与之对应name属性的属性名·或者bean对象）
常见表单项

文本框
```
<input type="text" name="uesrname">
1
```
密码框
```
<input type="password" name="password">
1
```
隐藏框
```
<input type="hidden" name="id">
1
```
日期框
```
<input type="date" name="birthday">
1
```
单选
```
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
1
2
```
多选
```
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
1
2
3
```
文件上传
```
<input type="file" name="avatar">
1
```
案例体验
- get请求前台发送from表单给后台（默认get请求）
前端根据action中服务器的具体路径（URL）定位到我们的boot项目的内置tomcat服务内对应端口程序，然后找到对应的controller

输出结果：

lwt 123456
- 当使用post请求提交表单时，通常函数的参数里边传的是form表单中对应name属性的bean对象
实体类：

在前端日期控件输入的日期是String类型，String类型的日期无法转换成相应的Date日期格式，数据库的日期类型格式有date(年-月-日/yyyy-MM-dd)和datetime(年-月-日时:分:秒/yyyy-MM-dd HH:mm:ss)
```
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
    private int id;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private LocalDate birthday;
    private String sex;
    private List<String> fav;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
```
<form action="http://localhost:8888/test2" method="post">
1
```
遇到的坑（错误写法）：
```
    @PostMapping("/test2")
    @ResponseBody
    public String getFormDatas3(@RequestBody User user){
        System.out.println(user);
        return "接收到数据！！";
    }
1
2
3
4
5
6
```
- 当form表单中涉及文件时：必须method="post" enctype="multipart/form-data"
```
1
```
同理：
```
<form action="http://localhost:8888/test" method="post" enctype="multipart/form-data">
1
```
```
    @PostMapping("/test")
    public String getFormDatas2( User user, MultipartFile avatar){
        System.out.println(user);
        System.out.println(avatar.getOriginalFilename());
        return "接收到数据！！";
    }
1
2
3
4
5
6
```
4.HTTP请求

 1）请求组成

请求由三部分组成：
1. 请求行：只有一行，包含请求方式、URI地址、协议版本
2. 请求头：可以有多行，格式：头名: 头值
3. 请求体
2）请求方式与数据格式

放请求前主机的IP和端口是我们预先要知道了的！！

get 请求示例
```
GET /test2?name=zhangsan&age=20 HTTP/1.1 // 请求行
Host: localhost // 请求头
1
2
```
```
GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1 // 请求行
Host: localhost // 请求头
1
2
```
- %E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求（默认格式）示例
```
POST /test2 HTTP/1.1 // 请求行
Host: localhost // 请求头
Content-Type: application/x-www-form-urlencoded // 请求体格式（默认格式）
Content-Length: 21

name=zhangsan&age=20 // 默认格式的请求体数据和get请求表示一样！
name=%E5%BC%A0&age=18// 汉字
1
2
3
4
5
6
7
```
application/x-www-form-urlencoed 格式细节：
- 参数分成名字和值，中间用 = 分隔
- 多个参数使用 & 进行分隔
- 【张】等特殊字符需要用 encodeURIComponent() 编码为【%E5%BC%A0】后才能发送
这种默认的方式对特殊字符必须进行编码处理，不然服务器不能识别

json 请求（post请求json格式）示例
```
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json // 请求体数据类型为json
Content-Length: 25

{"name":"zhang","age":18}
1
2
3
4
5
6
```
json 对象格式
```
{"属性名":属性值}
1
```
其中属性值可以是
- 字符串 “”
- 数字
- true, false
- null
- 对象
- 数组
json 数组格式
```
[元素1, 元素2, ...]
1
```
案例体验：
```
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

1
2
3
4
5
6
7
8
```
请求体的格式为json格式，这个时候User前就可以加@RequestBody了！！！！
```
    @PostMapping("/test3")
    @ResponseBody
    public String getFormDatas4(@RequestBody User user){
        System.out.println(user);
        return "接收到数据！！";
    }
1
2
3
4
5
6
```
multipart 请求（post请求multipart格式）示例
```
POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
- boundary=123 用来定义分隔符
- 起始分隔符是 --分隔符
- 结束分隔符是 --分隔符--
3) session 原理

Http 无状态，有会话
- 无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
- 有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享
由于http请求是无状态的，为了解决不能复用（下一次找不到）这一问题，服务端使用了 session 技术来暂存数据（存状态）

存
```
GET /s1?name=zhang HTTP/1.1
Host: localhost
1
2
```
取（取不到）
```
GET /s2 HTTP/1.1
Host: localhost
1
2
```
取（取得到）
```
GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D
1
2
3
```
session原理总结：

session在创建的时候（session对象key-value）,会在应答里携带JSESSIONID的标识（服务器帮我们生成），下次请求的时候，客户端会将这个JSESSIONID随着请求一起发给服务器，那么服务器就可以根据这个标识定位到对应的session对象！

session技术的应用：session 技术实现身份验证

登录认证中，通常我们将用户名或者userId作为JSESSIONID的标识存入服务器！当用户访问受限资源时先经过登录拦截器，拦截器就去检查session中有没有这个userId,有的话说明通过前面的登录认证，反之得跳到登录页面进行登录验证！session 技术适用于单体项目

 4) jwt 原理

jwt 技术实现身份验证

登录认证成功后会生成一个token令牌返回给客户端（与session的区别）客户端要把它记住，以后客户端的每一次请求都会携带token，那么登录拦截器就可以通过token去校验令牌，不用session也能实现，适用于分布式项目

生成 token
```
GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost
1
2
```
校验 token
```
GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28
1
2
3
```
5. CSS

即 Cascading Style Sheets，它描述了网页的表现与展示效果

 1) 选择器
- type （元素：标签名字）选择器 - 根据标签名进行匹配（元素选择器）
```
标签名 { // 所以标签
	color: red;
}

p { // 所以p标签
	color: red;
}
1
2
3
4
5
6
7
```
- class 选择器 - 根据元素的 class 属性进行匹配
```
.className {
	color: red;
}
1
2
3
```
- id 选择器 - 根据元素的 id 属性进行匹配
```
#id {
	color: red;
}
1
2
3
```
优先级：id 选择器 > class 选择器 > type 选择器

 2) 属性和值
- background-color : red;
- …
- display
3) 布局

与布局相关的 html 元素
- div
- template
参考链接：Java程序员用学前端么？java开发所需的前端技术全教程（HTML/CSS/js/vue2/vue3/react）_哔哩哔哩_bilibili
相关阅读:
Python学习之旅高级篇：Web开发之旅（一）—— Flask和Django框架概览
 websocket 的创建与关闭
 ECharts图表动态修改series显示隐藏
 AI面试常见题目整理
 ArrayList详解
 vscode setting.json 全局设置工作区设置位置优先级
 Spring Boot 2.x系列【20】应用监控篇之Actuator入门案例及端点配置详解
 MySQL 数据库增删查改、克隆、外键等操作
 名词作形容词的用法
 文件上传漏洞
原文地址：https://blog.csdn.net/qq_54773252/article/details/126924126

文章目录

HTML

1.HTML元素

2.HTML页面

3.常见元素

1）文本

2）多媒体

3）表单

作用与语法

常见表单项

案例体验

4.HTTP请求

1）请求组成

2） 请求方式与数据格式

get 请求示例

post 请求（默认格式）示例

json 请求（post请求json格式）示例

multipart 请求（post请求multipart格式）示例

3) session 原理

4) jwt 原理

5. CSS

1) 选择器

2) 属性和值

3) 布局

2）请求方式与数据格式