HTML + HTTP请求 +CSS知识点

最新推荐文章于 2024-04-08 08:09:24 发布

不会喵喵喵的捣蛋猫

最新推荐文章于 2024-04-08 08:09:24 发布

阅读量1.8k

点赞数 3

分类专栏：后端的前端学习文章标签： html http css

本文链接：https://blog.csdn.net/qq_54773252/article/details/126924126

版权

后端的前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

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

1.HTML元素

HTML有各种标签（元素）构成！

元素有起始和结束标签
标签包围起来的称为内容
元素有属性
id属性是元素的唯一标识
元素之间可以嵌套
不包含元素内容的成为空元素，如：
```
<img src="1.png">
<img src="1.png"/>
```

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 html</title>
</head>
<body>
    我是html
</body>
</html>

html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

3.常见元素

1）文本

标题

    <h1>我是标题</h1>
    <h2>我是标题</h2>
    <h3>我是标题</h3>
    <h4>我是标题</h4>
    <h5>我是标题</h5>
    <h6>我是标题</h6>

段落

<p>段落</p>

列表

无序列表

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

多级列表

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

超链接

<a href="网页地址">超链接文本</a>

<a href="http://www.baidu.com">点我</a>

2）多媒体

图片

<img src="文件路径">

src 格式有 3 种

文件地址
data URL，格式如下
```
data:媒体类型;base64,数据
```
object URL，需要配合 javascript 使用

视频

<video src="文件路径"></video>

音频

<audio src="文件路径"></audio>

3）表单

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

get：数据跟在URI后面

post：数据在请求体中

作用与语法

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

语法：

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    // 提交表单数据 submit
    <input type="submit" value="提交按钮">
</form>

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

常见表单项

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

文件上传

<input type="file" name="avatar">

案例体验

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;

}

<form action="http://localhost:8888/test2" method="post">

遇到的坑（错误写法）：

    @PostMapping("/test2")
    @ResponseBody
    public String getFormDatas3(@RequestBody User user){
        System.out.println(user);
        return "接收到数据！！";
    }

在这里插入图片描述

当form表单中涉及文件时：必须method="post" enctype="multipart/form-data"

同理：

<form action="http://localhost:8888/test" method="post" enctype="multipart/form-data">

    @PostMapping("/test")
    public String getFormDatas2( User user, MultipartFile avatar){
        System.out.println(user);
        System.out.println(avatar.getOriginalFilename());
        return "接收到数据！！";
    }

在这里插入图片描述

4.HTTP请求

1）请求组成

请求由三部分组成：

请求行：只有一行，包含请求方式、URI地址、协议版本
请求头：可以有多行，格式：头名: 头值
请求体

2）请求方式与数据格式

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

get 请求示例

GET /test2?name=zhangsan&age=20 HTTP/1.1 // 请求行
Host: localhost // 请求头

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1 // 请求行
Host: localhost // 请求头

%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// 汉字

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}

json 对象格式

{"属性名":属性值}

其中属性值可以是

字符串 “”
数字
true, false
null
对象
数组

json 数组格式

[元素1, 元素2, ...]

案例体验：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String username;
    private String password;
}

请求体的格式为json格式，这个时候User前就可以加@RequestBody了！！！！

    @PostMapping("/test3")
    @ResponseBody
    public String getFormDatas4(@RequestBody User user){
        System.out.println(user);
        return "接收到数据！！";
    }

在这里插入图片描述

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--

boundary=123 用来定义分隔符
起始分隔符是 --分隔符
结束分隔符是 --分隔符--

3) session 原理

Http 无状态，有会话

无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

由于http请求是无状态的，为了解决不能复用（下一次找不到）这一问题，服务端使用了 session 技术来暂存数据（存状态）

存

GET /s1?name=zhang HTTP/1.1
Host: localhost

取（取不到）

GET /s2 HTTP/1.1
Host: localhost

取（取得到）

GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D

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

校验 token

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

5. CSS

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

1) 选择器

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

p { // 所以p标签
	color: red;
}
```
class 选择器 - 根据元素的 class 属性进行匹配
```
.className {
	color: red;
}
```
id 选择器 - 根据元素的 id 属性进行匹配
```
#id {
	color: red;
}
```