文章目录
- HTML&CSS&HTTP
- 1. HTML 元素
- 2. HTML 页面
- 3. 常见元素
- 4. HTTP 请求
- 1) 请求组成
- 2) 请求方式与数据格式
- get 请求示例
- post 请求示例
- json 请求示例
- multipart 请求示例
- 数据格式小结
- 3) session 原理
- 4) jwt 原理
- 5. CSS
HTML&CSS&HTTP
HTML 是什么:即 HyperText Markup language 超文本标记语言,咱们熟知的网页就是用它编写的,HTML 的作用是定义网页的内容和结构。
- HyperText 是指用超链接的方式组织网页,把网页联系起来
- Markup 是指用
<标签>
的方式赋予内容不同的功能和含义
CSS 是什么:即 Cascading Style Sheets 级联(层叠)样式表,它描述了网页的表现与展示效果
1. HTML 元素
HTML 由一系列元素 elements
组成,例如
<p>Hello, world!</p>
元素还可以有属性,如
<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 种
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(默认)
- multipart/form-data
- 其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据,才会被发送给服务器
常见的表单项
文本框
<input type="text" name="uesrname">
密码框
<input type="password" name="password">
隐藏框
<input type="hidden" name="id">
日期框
<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="游戏">
文件上传
<input type="file" name="avatar">
4. HTTP 请求
1) 请求组成
请求由三部分组成
- 请求行
- 请求头
- 请求体
可以用 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: 21name=%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 技术实现身份验证
#mermaid-svg-hazncM7Q6nlZcEaf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hazncM7Q6nlZcEaf .error-icon{fill:#552222;}#mermaid-svg-hazncM7Q6nlZcEaf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-hazncM7Q6nlZcEaf .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-hazncM7Q6nlZcEaf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-hazncM7Q6nlZcEaf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-hazncM7Q6nlZcEaf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-hazncM7Q6nlZcEaf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-hazncM7Q6nlZcEaf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-hazncM7Q6nlZcEaf .marker.cross{stroke:#333333;}#mermaid-svg-hazncM7Q6nlZcEaf svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-hazncM7Q6nlZcEaf .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hazncM7Q6nlZcEaf text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-hazncM7Q6nlZcEaf .actor-line{stroke:grey;}#mermaid-svg-hazncM7Q6nlZcEaf .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-hazncM7Q6nlZcEaf .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-hazncM7Q6nlZcEaf #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-hazncM7Q6nlZcEaf .sequenceNumber{fill:white;}#mermaid-svg-hazncM7Q6nlZcEaf #sequencenumber{fill:#333;}#mermaid-svg-hazncM7Q6nlZcEaf #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-hazncM7Q6nlZcEaf .messageText{fill:#333;stroke:#333;}#mermaid-svg-hazncM7Q6nlZcEaf .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hazncM7Q6nlZcEaf .labelText,#mermaid-svg-hazncM7Q6nlZcEaf .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-hazncM7Q6nlZcEaf .loopText,#mermaid-svg-hazncM7Q6nlZcEaf .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-hazncM7Q6nlZcEaf .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-hazncM7Q6nlZcEaf .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-hazncM7Q6nlZcEaf .noteText,#mermaid-svg-hazncM7Q6nlZcEaf .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-hazncM7Q6nlZcEaf .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hazncM7Q6nlZcEaf .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hazncM7Q6nlZcEaf .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-hazncM7Q6nlZcEaf .actorPopupMenu{position:absolute;}#mermaid-svg-hazncM7Q6nlZcEaf .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-hazncM7Q6nlZcEaf .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-hazncM7Q6nlZcEaf .actor-man circle,#mermaid-svg-hazncM7Q6nlZcEaf line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-hazncM7Q6nlZcEaf :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Client LoginController LoginInterceptor Session 登录请求 检查用户名,密码,验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在,放行 Client LoginController LoginInterceptor Session
4) jwt 原理
jwt 技术实现身份验证
#mermaid-svg-muyEcnwMQjFTNlhS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-muyEcnwMQjFTNlhS .error-icon{fill:#552222;}#mermaid-svg-muyEcnwMQjFTNlhS .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-muyEcnwMQjFTNlhS .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-muyEcnwMQjFTNlhS .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-muyEcnwMQjFTNlhS .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-muyEcnwMQjFTNlhS .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-muyEcnwMQjFTNlhS .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-muyEcnwMQjFTNlhS .marker{fill:#333333;stroke:#333333;}#mermaid-svg-muyEcnwMQjFTNlhS .marker.cross{stroke:#333333;}#mermaid-svg-muyEcnwMQjFTNlhS svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-muyEcnwMQjFTNlhS .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-muyEcnwMQjFTNlhS text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-muyEcnwMQjFTNlhS .actor-line{stroke:grey;}#mermaid-svg-muyEcnwMQjFTNlhS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-muyEcnwMQjFTNlhS .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-muyEcnwMQjFTNlhS #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-muyEcnwMQjFTNlhS .sequenceNumber{fill:white;}#mermaid-svg-muyEcnwMQjFTNlhS #sequencenumber{fill:#333;}#mermaid-svg-muyEcnwMQjFTNlhS #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-muyEcnwMQjFTNlhS .messageText{fill:#333;stroke:#333;}#mermaid-svg-muyEcnwMQjFTNlhS .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-muyEcnwMQjFTNlhS .labelText,#mermaid-svg-muyEcnwMQjFTNlhS .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-muyEcnwMQjFTNlhS .loopText,#mermaid-svg-muyEcnwMQjFTNlhS .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-muyEcnwMQjFTNlhS .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-muyEcnwMQjFTNlhS .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-muyEcnwMQjFTNlhS .noteText,#mermaid-svg-muyEcnwMQjFTNlhS .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-muyEcnwMQjFTNlhS .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-muyEcnwMQjFTNlhS .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-muyEcnwMQjFTNlhS .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-muyEcnwMQjFTNlhS .actorPopupMenu{position:absolute;}#mermaid-svg-muyEcnwMQjFTNlhS .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-muyEcnwMQjFTNlhS .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-muyEcnwMQjFTNlhS .actor-man circle,#mermaid-svg-muyEcnwMQjFTNlhS line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-muyEcnwMQjFTNlhS :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Client LoginController LoginInterceptor 登录请求 检查用户名,密码,验证通过 登录成功,返回token 其它请求,携带token 校验token,校验无误,放行 Client LoginController LoginInterceptor
生成 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 属性进行匹配
- 优先级:id>class>type选择器
2) 属性和值
- background-color : red;
- …
- display
3) 布局
与布局相关的 html 元素
HTMLCSSHTTP相关推荐
最新文章
- 判断两个链表是否相交
- curl获取站点的各类响应时间(dns解析时间,响应时间,传输时间)
- C#学习笔记(十一):动态类型
- CSS可见格式化模型
- PhpSpreadsheet如何读取excel文件
- 边玩边学,15个学习Python 的编程游戏网站
- HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
- “数据科学”课程群与 “数据科学导论”课程建设初探
- time stamp convert
- 博士申请 | 香港科技大学(广州)王林助理教授招收计算机视觉博士生
- 模拟人生4修改服务器,模拟人生4常用秘籍与修改技巧心得
- Excel中带字母的数字序列自增实现方法
- 页面在微信端禁止缩放
- android 获取wifi连接不上,如何检测无法在android中连接wifi?
- Tensorflow入门——自制数据集:将未经处理的图片制成npy格式的数据集
- 【博主推荐】大数据可视化大屏(源码下载)
- COM注册什么时候需要注册APPID
- red hart linux中文,hart是什么意思_hart的翻译_音标_读音_用法_例句_爱词霸在线词典...
- 清除系统垃圾的bat文件
- 语音对讲软件_转发信息效率太低?还不赶紧使用微信语音转播软件?
热门文章
- 虚拟机开启及简单的系统命令
- 【log4j2】下载、安装、使用
- windows11 版本 business editions consumer editions 区别介绍
- 酷炫的终端模拟器eDEX-UI
- 网络技术这十个术语你知道吗?
- IDLE使用方法详解
- uni-app开发微信小程序getLocation 需要在app.json中声明permission字段解决办法
- 使用Amazon FreeRTOS快速和安全地连接设计到云
- 力扣 378. 有序矩阵中第 K 小的元素
- DOTA2利雅得大师赛利用api多线程对选手数据和战队数据爬取与分析