后端学习前端-html+css

第一章. HTML 与 CSS

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

• HyperText 是指用超链接的方式组织网页，把网页联系起来

• Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

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

1. HTML 元素

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

Hello, world!

• 整体称之为元素

• 和

  分别称为起始和结束标签

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

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

元素还可以有属性，如

Hello, world!

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

元素之间可以嵌套，如

HTML 是一门非常强大的语言

错误嵌套写法：

HTML 是一门非常强大的语言

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

• img 作用是用来展示图片

• src 属性用来指明图片路径

2. HTML 页面

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

  
    
    
  
  
    
Hello, world!
    
  

• html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素

• head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等

• body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

3. 常见元素

1) 文本

Heading

1号标题
2号标题
3号标题
4号标题
5号标题
6号标题

Paragraph

段落

List

无序列表 unordered list

    
列表项1
    
列表项2
    
列表项3

有序列表

    
列表项1
    
列表项2
    
列表项3

多级列表

    

    	北京市
        

            
海淀区
            
朝阳区
            
昌平区
        
    
    

    	河北省
        

            
石家庄
            
保定
        
    

Anchor

锚，超链接

超链接文本

2) 多媒体

Image

src 格式有 3 种

• 文件地址

• data URL，格式如下

  data:媒体类型;base64,数据
  

• object URL，需要配合 javascript 使用

Video

Audio

3) 表单

作用与语法

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

表单的语法

• method 请求方式有

  • get （默认）提交时，数据跟在 URL 地址之后(?拼接,在后端多参数的情况用实体类接收)

  • post 提交时，数据在请求体内(在后端用@RequestBody接收数据)

• enctype 在 post 请求时，指定请求体的数据格式

  • application/x-www-form-urlencoded（默认）

  • multipart/form-data (上传多文件的话，需要加入multiple="multiple"、上传文件夹的话，需要加入 webkitdirectory directory)

  • 区别：

  • 数据格式
    application/x-www-form-urlencoded: 在这种格式下，表单的数据会转换成一系列的键值对，每个键值对之间用 "&" 分隔，键与值之间用 "=" 连接。特殊字符会被转义。
    multipart/form-data: 这种格式用于处理二进制数据，比如文件上传。它将数据分割成多个部分（part），每个部分可以包含任何形式的数据，并且每个部分之间通过一个边界（boundary）字符串来区分。
    用途
    application/x-www-form-urlencoded: 通常用于发送普通的表单数据，如文本输入等。由于数据被编码成 URL 的形式，这种方式不适合发送二进制数据或大文件。
    multipart/form-data: 主要用于需要上传文件的场景。它可以同时发送文件和其他表单字段，因此在实现文件上传功能时更为常用。
    服务器端处理
    在服务器端处理这两种类型的请求时，需要根据 Content-Type 头来识别数据的编码方式，并采取相应的解析策略。对于 multipart/form-data，还需要特别注意处理边界字符串以正确解析各个部分的内容。

  • @RequestMapping("/uploadFile")//上传单文件
        public String UploadTheme(MultipartFile meFile,Model model){
            if (meFile != null) {
                System.out.println(meFile.getContentType());//在控制台打印文件的类型
                System.out.println(meFile.getName());//返回文件的名称
                System.out.println(meFile.getOriginalFilename());//返回文件的原文件名
                try {
                    // 存放到一个位置
                  meFile.transferTo(new File("E:/temp/"+UUID.randomUUID()+meFile.getOriginalFilename()));
                } catch (IllegalStateException e) {
                    e.printStackTrace();
                    model.addAttribute("msg", "上传失败");
                    return "/error.html";
                } catch (IOException e) {
                    e.printStackTrace();
                    model.addAttribute("msg", "上传失败");
                    return "/error.html";
                }
            }
            model.addAttribute("msg", "上传成功");
            return "index";
    }

    @RequestMapping("/temp")// 上传多文件
        public String UploadFile(HttpServletRequest request,Model model){
            CommonsMultipartResolver cResolver = new CommonsMultipartResolver();
            if (cResolver.isMultipart(request)) {
                MultipartHttpServletRequest httpservletrequest = (MultipartHttpServletRequest) request;
                List list = httpservletrequest.getFiles("meFile");
                for (int i = 0; i < list.size(); i++) {
                    System.out.println(list.get(i).getOriginalFilename());
                    System.out.println(list.get(i).getContentType());
                    try {
                       list.get(i).transferTo(new File("D:/temp/"+UUID.randomUUID()+list.get(i).getOriginalFilename()));
                    } catch (IllegalStateException e) {
                        e.printStackTrace();
                        model.addAttribute("msg", "上传失败");
                        return "/error.html";
                    } catch (IOException e) {
                        e.printStackTrace();
                        model.addAttribute("msg", "上传失败");
                        return "/error.html";
                    }
                }
            }
            model.addAttribute("msg", "上传成功");
            return "index";
        }

• 其中表单项提供多种收集数据的方式

  • 有 name 属性的表单项数据，才会被发送给服务器

常见的表单项

文本框

密码框

隐藏框

日期框

单选

多选

文件上传

4. HTTP 请求

1) 请求组成

请求由三部分组成

1. 请求行

2. 请求头

3. 请求体

可以用 telnet 程序测试

2) 请求方式与数据格式（中文在内的特殊字符会被URL 编码）

get 请求示例（？拼接）

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=%E5%BC%A0&age=18

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

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

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

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

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

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 用来定义分隔符

• 起始分隔符是 --分隔符

• 结束分隔符是 --分隔符--

数据格式小结

客户端发送

• 编码

  • application/x-www-form-urlencoded ：url 编码

  • application/json：utf-8 编码

  • multipart/form-data：每部分编码可以不同

• 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据

• 文件上传需要用 multipart/form-data 格式

• js 代码可以支持任意格式发送数据

服务端接收

• 对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可

• 对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

3) session 原理

Http 无状态，有会话

• 无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用

• 有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

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

存

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

取

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

session 技术实现身份验证

4) jwt 原理

jwt 技术实现身份验证

生成 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 选择器 - 根据标签名进行匹配（元素选择器）

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

• id 选择器 - 根据元素的 id 属性进行匹配

2) 属性和值

• background-color : red;

• ...

• display

3) 布局

与布局相关的 html 元素

• div

• template