黑马HTML&CSS基础

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

第一章. HTML 与 CSS

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

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

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

1. HTML 元素

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

p>Hello, world!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 fav;

文件上传

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

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

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

4. HTTP 请求

1) 请求组成

请求由三部分组成

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

可以用 postman 程序测试

2) 请求方式与数据格式

get 请求示例

GET /test2?name=张&age=20 HTTP/1.1 

Host: localhost 

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

post 请求示例

POST /test2 HTTP/1.1  

Host: localhost  
Content-Type: application/x-www-form-urlencoded 
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 
Content-Length: 25

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

json 对象格式

{"属性名": 属性值}

其中属性值可以是

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

json 数组格式

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

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

  @RequestMapping("/test3")  
  @ResponseBody  	
  public Req test3(@RequestBody Req req) {  
      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;.... 

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

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

5. CSS

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

1) 选择器

• type 选择器 – 根据标签名进行匹配（元素选择器）

• class 选择器 – 根据元素的 class 属性进行匹配

• 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 代码动态显示