文章目录
- 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"/>
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")@ResponseBodypublic 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: 21name=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")@ResponseBodypublic 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; }
优先级:id 选择器 > class 选择器 > type 选择器
2) 属性和值
- background-color : red;
- …
- display
3) 布局
与布局相关的 html 元素
- div
- template
参考链接:Java程序员用学前端么?java开发所需的前端技术全教程(HTML/CSS/js/vue2/vue3/react)_哔哩哔哩_bilibili