黑马HTML&CSS基础

黑马的笔记和资料都是提供好了的，这个文档非常适合回顾复习。我在黑马提供的笔记上做了一些微不足道的补充，以便自己复习查阅。该笔记比较重要的部分是表单，http请求

第一章. HTML 与 CSS

HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

HyperText 是指用超链接的方式组织网页，把网页联系起来
Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果

1. HTML 元素

HTML 由一系列元素 elements 组成，例如

 <p>Hello, world!</p>复制

整体称之为元素
<p> 和 </p> 分别称为起始和结束标签
标签包围起来的 Hello, world 称之为内容
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

 <p id="p1">Hello, world!</p>复制

属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套，如

 <p>HTML 是一门非常<b>强大</b>的语言</p>复制

错误嵌套写法：

 <p>HTML 是一门非常<b>强大的语言</p></b>复制

不包含内容的元素称之为空元素，如

 <img src="1.png">
<img src="1.png"/>复制

img 作用是用来展示图片
src 属性用来指明图片路径

2. HTML 页面

前面介绍的只是单独的 HTML 元素，它们可以充当一份完整的 HTML 页面的组成部分

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <p id="p1">Hello, world!</p>
    <img src="1.png">
  </body>
</html>复制

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

3. 常见元素

1) 文本

Heading

 <h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>复制

Paragraph

 <p>段落</p>复制

List

无序列表 unordered list

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

Anchor

锚，超链接

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

2) 多媒体

Image

 <img src="文件路径">复制

src 格式有 3 种

文件地址
data URL，格式如下
```
 <img src="data:媒体类型;base64,数据">
媒体类型：值为 image/png 表示图片复制
```
数据需要自己获取，具体步骤如下：
1. 通过命令行输入 jshell
2. 输入 Files.readAllBytes(Path.of(“图片路径”))
3. 输入 System.out.println(Base64.getEncoder().encodeToString($1)) 得到数据
object URL，需要配合 javascript 使用

Video

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

Audio

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

3) 表单

作用与语法

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

表单的语法

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

method 请求方式有
- get （默认）提交时，数据跟在 URL 地址之后
- post 提交时，数据在请求体内
enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）【见下文post请求Content-Type配置项】
- multipart/form-data 【文件上传时需要指定的格式】
其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据，才会被发送给服务器

常见的表单项

文本框

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

像这种单一属性，后端实体类中用单一变量接收即可: String username; // 属性名要与框中name属性的值相同

密码框

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

像这种单一属性，后端实体类中用单一变量接收即可: String password;

隐藏框

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

日期框

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

一般来讲，后端java中日期格式和前端提交的日期格式一般是不对应的。

所以要在后端实体类的 LocalDate birthday属性上面添加注解 @DateTimeFormat(pattern=“yyyy-MM-dd”) 或 @JsonFormat(pattern = “YYYY-MM-dd HH:mm:ss”)

单选

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

像这种单一属性，后端实体类中用单一变量接收即可: String sex;

多选

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

像这种多属性，后端实体类中用集合接收即可：List<String> fav;

文件上传

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

文件上传需要指定表单属性：method=“post” enctype=“multipart/form-data”

后端接收需要用spring提供的接口：MultipartFile avatar; // 形参名与name属性值相同，容器自动注入

4. HTTP 请求

1) 请求组成

请求由三部分组成

请求行：请求方式，uri地址，协议版本
请求头：格式是 ”头名: 头值“
请求体：携带数据

可以用 postman 程序测试

2) 请求方式与数据格式

get 请求示例

 GET /test2?name=张&age=20 HTTP/1.1 # 请求行（get请求在这里传输数据）
# 请求头
Host: localhost 复制

张是【张】经过 URL 编码后的结果

post 请求示例

 POST /test2 HTTP/1.1  # 请求行
#请求头
Host: localhost  # 指明访问服务器的哪个虚拟主机
Content-Type: application/x-www-form-urlencoded # 请求体格式【表单中的 enenctype可以指定】
Content-Length: 21  # 请求体长度
 
name=张&age=18 # 请求体：携带数据复制

application/x-www-form-urlencoed 格式细节：

参数分成名字和值，中间用 = 分隔
多个参数使用 & 进行分隔
【张】等特殊字符（汉字）需要用 encodeURIComponent() 编码为【张】后才能发送
```
 encodeURLComponent("张")复制
```

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, ...]复制

后端接收前端发送的json格式字符串，需要将其转化为 java对象（javaBean），然后进行处理，所以需要加 @RequestBody注解。代码形如：

 @RequestMapping("/test3")  // 前端发送json字符串
@ResponseBody  	// 将java对象转化为json字符串，并提交给前端
public Req test3(@RequestBody Req req) {  // 接收请求体中的json字符串，并把它转为 java对象
    System.out.println(req);
    return req;
}复制

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 用来定义分隔符为123
起始分隔符是 --分隔符
结束分隔符是 --分隔符--

数据格式小结

客户端发送

编码
- application/x-www-form-urlencoded ：url 编码【用于传输普通格式：&name=value&name=value】
- application/json：utf-8 编码【汉字3个字节】【用于传输json格式字符串】
- multipart/form-data：每部分编码可以不同【用于上传文件】
表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
文件上传需要用 multipart/form-data 格式
json格式字符串需要用 application/json格式发送数据
js 代码可以支持任意格式发送数据

服务端接收

对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可【自动注入】
对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式。

spring响应需要使用 @ResponseBody注解

3) session 原理

Http 无状态，有会话

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

服务端使用了 session 技术来暂存数据

存：HttpSession session.setAttribute(“name”, name); // 通过session存放name数据

 GET /s1?name=zhang HTTP/1.1
Host: localhost
Set-Cookie:JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D;.... # [设置jsessionid]复制

取：HttpSession session.getAttribute(“name”);

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

session 技术实现身份验证

4) jwt 原理

jwt 技术实现身份验证

生成 token：

String token = Jwts.builder().setSubject(name).signWith(key).compact();

 GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost复制

校验 token：

Jws jws = Jwts.parserBuilder().setSigningKey(key).build().parseClaimsJws(authorization);
验证失败会抛出异常

 GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28 # Authorization 的值就是 JWT令牌token复制

后端获取token：
1. 自动注入：@RequestHeader(“Authorization”) String token
2. 通过HttpServletRequest对象获取：String token = request.getHeader(“Authorization”);

5. CSS

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

1) 选择器

type 选择器 - 根据标签名进行匹配（元素选择器）
- h1{}
class 选择器 - 根据元素的 class 属性进行匹配
- .class{}
id 选择器 - 根据元素的 id 属性进行匹配
- #id{}
优先级：id选择器 > class选择器 > 元素选择器

2) 属性和值

background-color : red;
…
display: none; // 隐藏元素【block：显示元素】

3) 布局

与布局相关的 html 元素

div：div和spn常用于页面布局
template：template标签中的代码默认不会显示，但可以通过执行 javascript代码动态显示

X28 # Authorization 的值就是 JWT令牌token

  
- 后端获取token：
  1. 自动注入：@RequestHeader("Authorization") String token
  2. 通过HttpServletRequest对象获取：String token = request.getHeader("Authorization");
 
 
 
 
 
 
 
## 5. CSS
 
即 Cascading  Style  Sheets，它描述了网页的表现与展示效果
 
 
 
### 1) 选择器
 
* type 选择器 - 根据标签名进行匹配（元素选择器）
  * h1{}
 
* class 选择器 - 根据元素的 class 属性进行匹配
  *  .class{}
* id 选择器  - 根据元素的 id 属性进行匹配
  *  #id{}
* 优先级：id选择器 > class选择器  > 元素选择器
 
 
 
 
 
### 2) 属性和值
 
* background-color : red;
* ...
* display: none;  //  隐藏元素【block：显示元素】
 
 
 
 
 
### 3) 布局
 
与布局相关的 html 元素
 
* div：div和spn常用于页面布局
* template：template标签中的代码默认不会显示，但可以通过执行 javascript代码动态显示
 复制

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>测试页面</title>
	</head>
	<body>
	<p id="p1">Hello, world!</p>
	<img src="1.png">
	</body>
	</html>

	<h1>1号标题</h1>
	<h2>2号标题</h2>
	<h3>3号标题</h3>
	<h4>4号标题</h4>
	<h5>5号标题</h5>
	<h6>6号标题</h6>

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

	<img src="data:媒体类型;base64,数据">
	媒体类型：值为 image/png 表示图片

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

	<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="游戏">

	GET /test2?name=张&age=20 HTTP/1.1 # 请求行（get请求在这里传输数据）
	# 请求头
	Host: localhost

	POST /test2 HTTP/1.1 # 请求行
	#请求头
	Host: localhost # 指明访问服务器的哪个虚拟主机
	Content-Type: application/x-www-form-urlencoded # 请求体格式【表单中的 enenctype可以指定】
	Content-Length: 21 # 请求体长度

	name=张&age=18 # 请求体：携带数据

	POST /test3 HTTP/1.1
	Host: localhost
	Content-Type: application/json # 请求体格式为json
	Content-Length: 25

	{"name":"zhang","age":18}

	@RequestMapping("/test3") // 前端发送json字符串
	@ResponseBody // 将java对象转化为json字符串，并提交给前端
	public Req test3(@RequestBody Req req) { // 接收请求体中的json字符串，并把它转为 java对象
	System.out.println(req);
	return req;
	}

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

	GET /s1?name=zhang HTTP/1.1
	Host: localhost
	Set-Cookie:JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D;.... # [设置jsessionid]

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

	GET /j2 HTTP/1.1
	Host: localhost
	Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28 # Authorization 的值就是 JWT令牌token


	- 后端获取token：
	1. 自动注入：@RequestHeader("Authorization") String token
	2. 通过HttpServletRequest对象获取：String token = request.getHeader("Authorization");







	## 5. CSS

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



	### 1) 选择器

	* type 选择器 - 根据标签名进行匹配（元素选择器）
	* h1{}

	* class 选择器 - 根据元素的 class 属性进行匹配
	* .class{}
	* id 选择器 - 根据元素的 id 属性进行匹配
	* #id{}
	* 优先级：id选择器 > class选择器 > 元素选择器





	### 2) 属性和值

	* background-color : red;
	* ...
	* display: none; // 隐藏元素【block：显示元素】





	### 3) 布局

	与布局相关的 html 元素

	* div：div和spn常用于页面布局
	* template：template标签中的代码默认不会显示，但可以通过执行 javascript代码动态显示