Java程序员学前端—HTML 与 CSS

HTML 与 CSS

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

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

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

一、HTML 元素

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

<p>Hello, world!</p>

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

元素还可以有属性，如

<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 属性用来指明图片路径

二、HTML 页面

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

<!DOCTYPE html><!--文档类型声明-->
<!--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 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

三、常见元素

可以参考

https://developer.mozilla.org/zh-CN/docs/Web/HTML

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>

3.2 多媒体

Image

<img src="文件路径">

src 格式有 3 种

文件地址
data URL，格式如下
```
data:媒体类型;base64,数据
```
object URL，需要配合 javascript 使用

Video

视频

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

Audio

音频

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

3.3 表单

作用与语法

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

表单的语法

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

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

常见的表单项

文本框

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

密码框

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

隐藏框

可以通过value预先给值，虽然前端中不会显示，但也会通过表单提交给后端

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

日期框

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

单选

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

文件上传

要设置：method="post" enctype="multipart/form-data"

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

四、HTTP 请求

4.1 请求组成

请求由三部分组成

请求行
请求头
请求体

可以用 telnet 程序测试

4.2 请求方式与数据格式

get 请求示例

请求行：请求方式-GET、URL-/test2?name=%E5%BC%A0&age=20、版本协议-HTTP/1.1

请求头：

头名：头值（Host: localhost）

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】后才能发送
post把数据放在请求体中，而get放在了请求头中

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 的方式

4.3 session 原理

Http 无状态，有会话

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

服务端使用了 session 技术来暂存数据，体现在代码中就是创建一个session 对象

存

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

应答中包含JSESSIONID

取

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

session 技术实现身份验证

将登录标记（这里是用户名）存储到session中

sequenceDiagram participant Client participant L as LoginController participant i as LoginInterceptor participant Session rect rgb(200, 223, 255) Client ->> +L : 登录请求 L ->> L : 检查用户名，密码，验证通过 L ->> +Session : 存入用户名 Session -->> -L: L -->> -Client: 登录成功 end rect rgb(200, 190, 255) Client ->> +i : 其它请求 i ->> +Session : 获取用户名 Session -->> -i : i ->> i: 用户名存在，放行 i -->> -Client : end

session解决了http无状态的问题，每次有新的用户访问服务器时，服务器都会自动存储用户信息。当存储数据量大，资源占用过多时，用户每次请求服务器都要花费相当多的时间去查询有没有sessionid。当系统涉及到多个服务器时，数据需要同步，那么就需要共享session，而cookie无法完成跨域。

　　那么有没有方法解决这些问题呢？

　　建立一个专用的数据库服务器，将session存储在一个数据库当中，但是当请求太多时，数据库的压力会非常大，一旦数据库挂了，就无法完成请求了。此时，需要建立数据库的集群，动态分配一个数据库去访问，保证响应速度。

session存在的问题：

存储在服务器，消耗大量的存储资源
查询速度会成为瓶颈，导致响应速度慢
在跨端、跨服务器时，需要session同步
通过架设数据库集群redis，会导致维护成本高，配置复杂

4.4 jwt 原理

json web token（jwt）

jwt 技术实现身份验证

服务器不存储用户数据，而是直接通过加密的方式把用户数据通过token令牌的方式返回给客户端，该令牌将会由服务器自己设置。每次用户访问时，都会携带这个令牌，用来证明自己的身份，从而得到自己的状态和数据。这样，服务器不需要存储用户资源导致资源占用过多的问题，也不需要每次查询从而加快了响应速度，而且传递的方式也由双方协定，不管是否跨域，都可以正常传递。

sequenceDiagram participant Client participant L as LoginController participant i as LoginInterceptor rect rgb(200, 223, 255) Client ->> +L : 登录请求 L ->> L : 检查用户名，密码，验证通过 L -->> -Client : 登录成功，返回token end rect rgb(150, 190, 155) Client ->> +i : 其它请求，携带token i ->> i : 校验token，校验无误，放行 i -->> -Client : end

生成 token

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

客户端要记住token，之后的请求都要携带token

校验 token

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

但是，上面的这种token容易被伪造，因为只要任何人拿到了这种令牌都可以称自己是合法的用户，从而获取一些私密的信息，此时如果服务器能拥有某种方式使得能证明该用户是合法的就显得极为重要。

sign签名它是由服务端进行设置，且只有服务器知道签名和密钥。当用户登录时，服务器提取将用户信息（payload 数据）和header组成新的数据，然后再加上sign进行加密得到一个token。当用户发起请求后，由服务器对sign进行解密，然后再结合自己设置的sign进行对比，如果一致，就证明该token合法，如果不一致，该token就是非法的。

token

不需要将用户状态存储在服务端
消耗的是cpu，需要计算资源（验签）
token不能立即失效

五、CSS

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

5.1 选择器

type 选择器 - 根据标签名进行匹配（元素选择器）
class 选择器 - 根据元素的 class 属性进行匹配
id 选择器 - 根据元素的 id 属性进行匹配

优先级：id选择器>class选择器>type选择器

5.2 属性和值

background-color : red;
...
display

5.3 布局

与布局相关的 html 元素

div
template

posted @ 2019-03-05 20:12 王陸阅读(285) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

王陸

我可不是为了被全人类喜欢才活着的，只要对于某一个人来说我是必要的，我就能活下去。