第一章. HTML 与 CSS

一、前言

Java 程序员一提起前端知识，心情那是五味杂陈，百感交集。

• 说不学它吧，说不定进公司以后，就会被抓壮丁去时不时写点前端代码

• 说学它吧，HTML、CSS、JavaScript 哪个不得下大功夫才能精通？

• 学一点够不够用呢？如果只学基础的 JavaScript 是不够用的，前端都已经工程化了，Vue、React 这些框架你去看吧，光有点基础根本看不懂，甚至连前端页面路径在哪儿配置，如何跳转都不甚了解，所以得学，而且要学的还不少，请把前端当作 web 不可或缺的一部分来学习。

• 学习前端好处挺多，我听说过这么一句挺有道理的话：一个程序员至少应该掌握一门静态语言，如 Java，还应该掌握一门动态语言，如 JavaScript。而且，你不觉得学了前端，就如打通了程序员的任督二脉，可以独立接活了嘛

这门课为什么不由前端老师来讲？

• 前端老师不知道后端学员的痛点，他认为重要的咱不关心，他认为是常识一带而过的又恰恰是咱迷茫的地方，作为后端老师，我更懂后端学员

• 前端老师不懂后端知识，只能用前端思维来讲前端，如果授课老师懂 Java，能用一些现有知识对比讲解，能起到快速突破的效果

• 前端每个框架动辄需要数十个小时的学习，咱耗不起，我们更希望学到对我们最有用的那部分，其它的省省吧，总不能夺了前端程序员的饭碗

课程安排

• 整个课程分成五章

  • HTML / CSS 这部分对咱们来说，不是重点，但又不能不讲，这俩知识作为第一章，必学

  • JavaScript 这部分是重点，尤其是 ES6 以后的一些新语法，不理解这些，前端代码你根本看不懂，必学

  • Vue2，Vue3，React 这三章是三选一的关系，根据你入职公司的使用的前端技术不同，有针对地学习

    • 后三章会涵盖 TypeScript、VueCli、Vuex、VueRouter、ElementUI、Vite、CreateReactApp、React、Redux、ReactRouter 等库和工具的使用

  • jquery 经过调研，还有一些学员毕业后确实会用到，所以也作为一个可选章节进行学习

 

二、第一章. 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 提交时，数据在请求体内

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

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

  • multipart/form-data

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

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

常见的表单项

文本框

密码框

隐藏框

日期框

单选

多选

文件上传

4. HTTP 请求

1) 请求组成

请求由三部分组成

1. 请求行

2. 请求头

3. 请求体

可以用 telnet 程序测试

2) 请求方式与数据格式

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 技术实现身份验证

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

4) jwt 原理

jwt 技术实现身份验证

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

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