黑马HTMLCSS基础

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

第一章. HTML 与 CSS

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

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

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

1. HTML 元素

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

<p>Hello, world!</p>

  • 整体称之为元素

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

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

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

元素还可以有属性，如

<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 种

  • 文件地址

  • data URL，格式如下

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

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

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

  • object URL，需要配合 javascript 使用

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（默认）【见下文post请求Content-Type配置项】
    • multipart/form-data 【文件上传时需要指定的格式】
  • 其中表单项提供多种收集数据的方式
    • 有 name 属性的表单项数据，才会被发送给服务器
常见的表单项

文本框

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

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

密码框

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

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

隐藏框

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

日期框

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

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

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

多选

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

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

文件上传

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

文件上传需要指定表单属性：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
  • %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 # 请求体：携带数据

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

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

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

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

    encodeURLComponent("张")
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json # 请求体格式为json
Content-Length: 25{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

  • 字符串 “”
  • 数字
  • true, false
  • null
  • 对象
  • 数组

json 数组格式

[元素1, 元素2, ...]

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

    @RequestMapping("/test3")  // 前端发送json字符串
@ResponseBody  	// 将java对象转化为json字符串，并提交给前端
public Req test3(@RequestBody Req req) {  // 接收请求体中的json字符串，并把它转为 java对象System.out.println(req);return req;
}
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 用来定义分隔符为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]

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

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

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

校验 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
  • 后端获取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 token2. 通过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代码动态显示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/293696.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用Pilotfish扩展Sui执行能力

使用Pilotfish扩展Sui执行能力

Pilotfish第一个多机智能合约执行引擎&#xff0c;使Sui网络的验证节点可以利用多台机器&#xff0c;并在负载增加时自动扩展以执行更多的交易。这一目标实现不会影响可靠性或功能完整性。 Pilotfish可以从内部执行机器的故障中恢复&#xff0c;并支持Sui的全面动态操作。其流…
阅读更多...
分享react+three.js展示温湿度采集终端

分享react+three.js展示温湿度采集终端

前言 气象站将采集到的相关气象数据通过GPRS/3G/4G无线网络发送到气象站监测中心&#xff0c;摆脱了地理空间的限制。 前端&#xff1a;气象站主机将采集好的气象数据存储到本地&#xff0c;通过RS485等线路与GPRS/3G/4G无线设备相连。 通信&#xff1a;GPRS/3G/4G无线设备通…
阅读更多...
计算机网络链路层

计算机网络链路层

数据链路 链路是从一个节点到相邻节点之间的物理线路&#xff08;有线或无线&#xff09; 数据链路是指把实现协议的软件和硬件加到对应链路上。帧是点对点信道的数据链路层的协议数据单元。 点对点信道 通信的主要步骤&#xff1a; 节点a的数据链路层将网络层交下来的包添…
阅读更多...
Dockerfile和Docker-compose

Dockerfile和Docker-compose

一、概述 Dockerfile和Docker Compose是用于构建和管理 Docker 容器的两个工具&#xff0c;但它们的作用和使用方式不同。 Dockerfile Dockerfile 是一个文本文件&#xff0c;用于定义 Docker 镜像的构建规则。它包含一系列指令&#xff0c;如 FROM&#xff08;指定基础镜像…
阅读更多...
【蓝桥杯第十三届省赛B组】（详解）

【蓝桥杯第十三届省赛B组】（详解）

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…
阅读更多...
安全SCDN的威胁情报库对DDOS防护有什么好处

安全SCDN的威胁情报库对DDOS防护有什么好处

目前网络攻击事件频频发生&#xff0c;DDoS&#xff08;分布式拒绝服务&#xff09;攻击已成为各种企业&#xff08;小到区域性小公司大到各种跨国公司&#xff09;的主要威胁&#xff0c;DDoS 攻击可能会对企业造成重大损害和破坏&#xff0c;比如对目标公司的业务造成产生不利…
阅读更多...
吴晓波频道：构建知识付费领域的数据飞轮

吴晓波频道：构建知识付费领域的数据飞轮

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 知识付费正在完成新阶段的转变。 知识付费的概念可以追溯到 20 世纪 80 年代的彼得德鲁克&#xff0c;他在《后资本主义》一书中提出“知识经济”&#xff0c;指出…
阅读更多...
IDEA跑Java后端项目提示内存溢出

IDEA跑Java后端项目提示内存溢出

要设置几个地方&#xff0c;都试一下吧&#xff1a; 1、默认是700&#xff0c;我们设置大一点&#xff08;上次配置了这儿就解决了&#xff09; 2、 3、 4、-Xmx4g
阅读更多...
redolog 和 binlog 的区别以及两阶段提交

redolog 和 binlog 的区别以及两阶段提交

最近在学习MySQL架构的时候&#xff0c;关于执行器&#xff0c;存储引擎的具体操作那里&#xff0c;有些地方不是很懂&#xff0c;我仔细思考了一下&#xff0c;发现我对两阶段提交这个过程比较模糊&#xff0c;所以我特意写一篇文章来说一下两阶段提交。 比如说一条更新语句&…
阅读更多...
接口自动化框架搭建（九）：接入钉钉消息通知

接口自动化框架搭建（九）：接入钉钉消息通知

1&#xff0c;jenkins安装钉钉插件 2&#xff0c;在钉钉群聊设置机器人 3&#xff0c;jenkins配置钉钉 根据情况选择&#xff1a; 除了这些&#xff0c;其他不用配置&#xff0c;配置完成点击确认 4&#xff0c;项目配置 添加后保存 5&#xff0c;测试下效果 构建完成后&a…
阅读更多...
免费开源的 AI 绘图工具 ImgPilot

免费开源的 AI 绘图工具 ImgPilot

免费开源的 AI 绘图工具 ImgPilot 分类 开源分享 项目名: ImgPilot -- 通过提示词及涂鸦生成图片 Github 开源地址&#xff1a; GitHub - leptonai/imgpilot: Turn the draft into amazing artwork with the power of Real-Time Latent Consistency Model 在线地址&#xff…
阅读更多...
Go语言学习Day6：数组与切片

Go语言学习Day6：数组与切片

名人说&#xff1a;莫愁千里路&#xff0c;自有到来风。 ——钱珝 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1. 数组① 什么是数组② 数组的声明③ 初始化数组的几种方式④ 遍历数组元素⑤ 数组为值类型⑥ 数…
阅读更多...
Excel 粘贴回筛选后的单元格不能完全粘老是少数据 ,有些单元格还是空的

Excel 粘贴回筛选后的单元格不能完全粘老是少数据 ,有些单元格还是空的

环境&#xff1a; excel2021 Win10专业版 问题描述&#xff1a; excel 粘贴回筛选后的单元格不能完全粘老是少数据 有些单元格还是空的 复制选择筛选后A1-A10单元格 &#xff0c;定位条件&#xff09;&#xff08;仅可见单元格&#xff09;来访问&#xff0c;或者你可以使用…
阅读更多...
牛角工具箱源码 轻松打造个性化在线工具箱

牛角工具箱源码 轻松打造个性化在线工具箱

&#x1f389; Whats this&#xff1f; 这是一款在线工具箱程序&#xff0c;您可以通过安装扩展增强她的功能 通过插件模板的功能&#xff0c;您也可以把她当做网页导航来使用~ 觉得该项目不错的可以给个Star~ &#x1f63a; 演示地址 https://tool.aoaostar.com &#x1f…
阅读更多...
MySQL 高级语句（一）

MySQL 高级语句（一）

一、MySQL查询 1.1 排序 1.1.1 排序语法 1.1.2 order by案例 1.2 区间判断及查询不重复记录 1.2.1 区间判断 1.2.2 查询不重复记录 1.3 对结果进行分组 1.3.1 group by 语法 1.3.2 group by 案例 1.4 限制结果条目 1.4.1 LIMIT 语法 1.4.2 LIMIT 案例 1.5 设置别名…
阅读更多...
分治——归并排序算法

分治——归并排序算法

例题一 解法&#xff08;归并排序&#xff09;&#xff1a; 算法思路&#xff1a; 归并排序的流程充分的体现了「分⽽治之」的思想&#xff0c;⼤体过程分为两步&#xff1a; ◦ 分&#xff1a;将数组⼀分为⼆为两部分&#xff0c;⼀直分解到数组的⻓度为 1 &#xff0c;使…
阅读更多...
网络游戏推广利器：Xinstall一站式解决方案

网络游戏推广利器：Xinstall一站式解决方案

随着网络游戏的飞速发展&#xff0c;游戏推广已成为游戏公司不可或缺的一环。然而&#xff0c;面对渠道繁多、效果评估困难、用户获取成本高昂等问题&#xff0c;许多游戏公司在推广过程中感到力不从心。今天&#xff0c;我们要为大家介绍一款强大的游戏推广利器——Xinstall。…
阅读更多...
[leetcode] 100. 相同的树

[leetcode] 100. 相同的树

给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff1a;true示例 2&a…
阅读更多...
Linux 理解进程信号

Linux 理解进程信号

目录 一、共享内存通信机制中的临界资源访问与同步控制 1、概念 2、生活角度理解信号机制 3、信号量的操作 二、信号 1、生活角度的信号 2、技术应用角度的信号 3、操作系统角度的信号 信号如何产生 理解组合键变为信号 理解信号如何被进程保存 时钟中断&#xff0…
阅读更多...
基于《2023腾讯云容器和函数计算技术实践精选集》—探索腾讯云TKE的Docker容器、Serverless和微服务优势

基于《2023腾讯云容器和函数计算技术实践精选集》—探索腾讯云TKE的Docker容器、Serverless和微服务优势

重剑无锋&#xff0c;大巧不工。 ——金庸 腾讯云TKE&#xff0c;全称Tencent Kubernetes Engine&#xff0c;是一种完全托管式的容器服务。它可以帮助用户快速、高效地部署和管理Kubernetes集群&#xff0c;并提供一系列与之相关的云服务&#xff0c;如负载均衡、云硬盘、对象…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023