devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

黑马HTML&CSS基础

作者：Gausst松鼠会 | 2024-04-05 19:23:32

赞

踩

黑马HTML&CSS基础

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

第一章. HTML 与 CSS

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

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

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

1. HTML 元素

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

<p>Hello, world!</p>

  • 1

  • 整体称之为元素

  • <p> 和 </p> 分别称为起始和结束标签

  • 标签包围起来的 Hello, world 称之为内容

  • p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

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

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

元素之间可以嵌套，如

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

  • 1

错误嵌套写法：

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

  • 1

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

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

  • 1
  • 2
  • 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
Paragraph
<p>段落</p>

  • 1
List

无序列表 unordered list

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

  • 1
  • 2
  • 3
  • 4
  • 5

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</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
Anchor

锚，超链接

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

  • 1

2) 多媒体

Image
<img src="文件路径">

  • 1

src 格式有 3 种

  • 文件地址

  • data URL，格式如下

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

    • 1
    • 2

    数据需要自己获取，具体步骤如下：

    1. 通过命令行输入 jshell
    2. 输入 Files.readAllBytes(Path.of(“图片路径”))
    3. 输入 System.out.println(Base64.getEncoder().encodeToString($1)) 得到数据

  • object URL，需要配合 javascript 使用

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

  • 1
Audio
<audio src="文件路径"></audio>

  • 1

3) 表单

作用与语法

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

表单的语法

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

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

文本框

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

  • 1

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

密码框

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

  • 1

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

隐藏框

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

  • 1

日期框

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

  • 1

一般来讲，后端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="女">

  • 1
  • 2

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

多选

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

  • 1
  • 2
  • 3

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

文件上传

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

  • 1

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

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

4. HTTP 请求

1) 请求组成

请求由三部分组成

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

可以用 postman 程序测试

2) 请求方式与数据格式

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

  • 1
  • 2
  • 3
  • %E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1  # 请求行
#请求头
Host: localhost  # 指明访问服务器的哪个虚拟主机
Content-Type: application/x-www-form-urlencoded # 请求体格式【表单中的 enenctype可以指定】
Content-Length: 21  # 请求体长度

name=%E5%BC%A0&age=18 # 请求体：携带数据

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

  • 参数分成名字和值，中间用 = 分隔

  • 多个参数使用 & 进行分隔

  • 【张】等特殊字符（汉字）需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送

    encodeURLComponent("张")

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
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 用来定义分隔符为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]

  • 1
  • 2
  • 3

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

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

  • 1
  • 2
  • 3

image-20240325143129348

session 技术实现身份验证

Client LoginController LoginInterceptor Session 登录请求 检查用户名，密码，验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在，放行 Client LoginController LoginInterceptor Session

4) jwt 原理

jwt 技术实现身份验证

Client LoginController LoginInterceptor 登录请求 检查用户名，密码，验证通过 登录成功，返回token 其它请求，携带token 校验token，校验无误，放行 Client LoginController LoginInterceptor

生成 token：

  • String token = Jwts.builder().setSubject(name).signWith(key).compact();
GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

  • 1
  • 2

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

  • 1
  • 2
  • 3
  • 后端获取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代码动态显示


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/367542
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号